Clik here to view.
kintoneでボタンを消したいときにすぐにクラスを見つける方法
「レコード追加ボタンを消したい」kintoneのカスタマイズを行っていて、標準の設定からレコードのアクセス権を設定することはできても、何かしらの状況でレコード一覧画面やレコード詳細画面に表示している「レコード追加ボタン」を非表示にしたいときがありました。無理やりCSSで見えなくなるように制御すればいいことはわかっていたものの、要素を探すのにすこし手こずってしまったので解決方法をメモとして残しておきま...
View ArticleClik here to view.
新米フロントエンドエンジニア がお世話になってるサイトまとめ
はじめに今月よりフロントエンドエンジニアとして働き始めたあくしおです。業務で進めていく中で自分が普段参考にしていたり勉強で使用しているサイトを羅列していこうと思います。「こんなもん参考にしてるうちはダメだぞ！」って声もあるかもしれませんが許してくださいHTML編HTML Reference - A free...
View ArticleClik here to view.
CSS 復習
はじめに自分の中のCSSの知識がスカスカになっていたので、コーディングにおいて分からなかった箇所とその解決方法を書きます。ヘッダーを横幅いっぱいに広げる下記のようにwidthを１００％、もしくは100vwヘッダーが横幅いっぱいに広がります。私はこの部分を「width: 100vh;」と書いていたので横幅が広がりませんでした。「vh」とかくとボックスの縦の長さになるんですね...header {...
View Article初心者によるプログラミング学習ログ 247日目
100日チャレンジの247日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。247日目は、おはようございます247日目・youtubeで、Jsのアコーディオンメニュー模写・Udemyで、Js講座#早起きチャレンジ#駆け出しエンジニアと繋がりた...
View ArticleClik here to view.
ハンバーガーメニュー + α
filename.html<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,...
View ArticleClik here to view.
【class名一覧】CSSでよく使うクラス名をたった１枚にまとめてみました。
class命名のときに毎回「何にしよっかなー？」って迷わないように一覧にしてみましたのでシェアいたします。もっと詳しくまとめてくれているサイトもあるんですけど、情報が多すぎて・・印刷したら何ページにもなっちゃうしかといって毎回サイトを開いて確認するのも面倒くさい。そこで、すっきり１枚にまとめてみました。サイト模写するときにこの一覧を見ながらまずはclass名やid名を決めてしまえば...
View ArticleiPhoneのON,OFFスイッチのようなトグルスイッチを作ってみた
CSSを使ってトグルスイッチの作り方早速だけどコード See the Pen zYGoYex by yamazaki (@y_m_z_k) on CodePen....
View ArticleCSS: CSSをHTMLに追加する
方法1：HEADタグ内に書く方法index.html<header><divclass="area1"><style>h1{color:blue;}.area1{color:red;}</style></div></header>方法2：外部ファイルへリンクさせる方法index.html<header><lin...
View ArticleClik here to view.
マークアップエンジニアがチェックしたいCSSリファレンスまとめ6つ
基本を既に知っているベテランこそチェックしておきたいCSSリファレンス。おすすめのCSSリファレンスサイトを6つご紹介します。CSSリファレンス 日本語版読みやすく安心な日本語のCSSリファレンスのおすすめ3サイトをご紹介します。TAG...
View ArticleClik here to view.
Webサイト 固定幅の解除
はじめに最近ではフルHDやそれ以上の解像度のディスプレイが当たり前のようになってきましたが、ネットのサイトでは意外とそれを活用できていないと思ったことはありませんか？と言っても、何のことか分からない方は、以下のImpressのPC Watchの例をご覧下さい。左右に大きな余白があるのが分かると思います。...
View Article初心者によるプログラミング学習ログ 248日目
100日チャレンジの248日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。248日目は、おはようございます248日目・webサイト模写・Udemyで、photoshopバナー作成講座#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100...
View ArticleClik here to view.
Sassの基礎の基礎
Sass（サス）って聞いたことあるんです。聞いたことがあったんだけど、まぁCSSの新たな効率的な書き方でしょ。くらいしか知りませんでした。なので、独学で学んでみることに。学んでいる途中でいろんな開発者さんのブログとかも参考にして自分なりにまとめてみました。SassとはそもそもSassって何の略だ。って調べてみると、、、Syntactically ＝ 構文的なAwesome ＝ オーサムなStyle...
View Articleいつから、z-indexがpositionだけのものだと錯覚していた？
タイトルの元ネタになっている『BLEACH』は読んだことありません。悩ましいz-index問題CSSを学んだことある人なら一度は通るz-index問題。単純にz-indexの値で重なりが決まるのではなく、親要素との関係によって重なりが変わるので複雑です。ついz-index:...
View Articlechat-spaceを作ろう①
アプリケーションを立ち上げるターミナルrailsnewchat-space-dmysqlアプリ立ち上げ アプリ名 データベース指定cd~/ディレクトリを移動 rails db:create データベース作成...
View ArticleClik here to view.
HTMLとCSSで魔法陣を描いてみる
そもそも魔法陣って？創作作品でよく見る、モンスターが召喚されたりするときに下にひいてあるアレ。最近だとiPhoneの充電もできるようになりました。「魔法陣」というのはいわゆる創作作品で描かれる演出用の陣の名称で、実在の魔術で使われるガチな方のやつは「魔法円」と呼ばれて区別される。魔法円はだいたいが「円の中と外を魔術的に遮断する」という目的の元に作成される結界。なので、その中にモンスターを召喚するので...
View ArticleClik here to view.
1pxのborder付けた画像をChromeでズームした時に現れる隙間を消す方法
CSSでimg要素の周囲に1pxのborderを付けた画像をChromeで表示した時、ズームで拡大していくと下図のように左右borderと画像の端との間にわずかな隙間が生じる現象に遭遇しハマったので、解決方法をここに書きます。動作環境 macOS 10.14 (Mojave), Retinaディスプレイ(Radeon Pro 575), Chrome...
View Article