CSS3– tag –
-
CSS3: サイドメニューをボトムメニューに切り替えるサンプル
PC サイトのサイドメニューをモバイルで表示すると、画面が横長から縦長になるため、サイドメニューの領域によりメインコンテンツのエリアが狭くなってしまいます。 画面上部のグローバルメニューは、ハンバーガーメニューへ変更するパターンが多いですが... -
CSS3: 使用頻度の高い擬似クラス一覧
個人的によく使う CSS3 擬似クラスの一覧を作成しました。 スタイルコーディング時にご参考にしてください。 【目次】 使用頻度の高い擬似クラス一覧 まとめ 【使用頻度の高い擬似クラス一覧】 記述例 説明 div[class] "class" 属性を持つ div 要素 div[cl... -
CSS3: デフォルトのフォントスタイルを指定する
モダンブラウザであればフォントのことは特に気にしなくても、いい感じに出力されますが、レガシーブラウザの対応までを考慮すると、フォントの指定も重要となってきます。 今回は CSS でスタイルを定義する際、ベースとなるフォント指定をメモしておきま... -
CSS3: hover 要素のマウスイベントを無効にする
UI デザイン上、ボタン自体は表示させるが、押せないようにしたい、hover エフェクトやポインターは無反応にしたい、といったケースがあると思いますが、そういった場合は、JavaScript を書くまでもなく、CSS のみで解決します。 今回は CSS でマウスイベ... -
CSS3: 擬似要素 :before, :after で配置した画像サイズを変更する
開発が完了した Web アプリやサイトで HTML ではなく、CSS 修正のみでアイコン画像等を挿入したい場面があります。 その際、擬似要素 :before, :after でコーディングを行いますが、画像を直接挿入した場合サイズ変更ができません。 今回は上記ケースで画... -
CSS3: flex でマージンが設定された行のカラム数を調整する
CSS の flex レイアウトでレイアウトを組むのが当たり前になりました。 今回は flex コンテナ内のマージンが設定されたボックスの1行カラム数を、好みのレイアウトに調整する説明をしたいと思います。 【目次】 flex でマージンが設定された行のカラム数を... -
CSS3: Bootstrap 特定のリンクボタンの hover 効果を無効化する
Bootstrap をはじめとする CSS フレームワークや、自身で作成したボタンクラスを利用した際、後日、特定のボタンに対し見た目はそのままに、hover 効果はなくしたいケースがあります。 今回は CSS のボタンクラスに割り当てられた hover 効果を無効化する... -
CSS3: テーブルセルの背景色を1行ごと交互に定義する
今回は、擬似クラス :nth-child(even) を使って、table のセルの背景色を交互に定義する方法をメモしておきます。 【目次】 テーブルセルの背景色を1行ごと交互に定義する まとめ 【テーブルセルの背景色を1行ごと交互に定義する】 以下は bg-alternate ク... -
CSS3: Bootstrap4 グリッドシステムで横並びの col の順番を入れ替える
Bootstrap のグリッドシステムでレスポンシブデザインを行う際、画面サイズに応じて col の順番を入れ替えたいケースがあります。 そういった場合、従来は col-push, col-pull といったクラスを使用していましたが、Bootstrap4 ではクラス名が order へ... -
CSS3: 最後の要素、もしくは要素が一つの場合の要素にスタイルを適用する
アプリケーションの仕様上、約20年ぶりに テーブルで HTML コーディングを行う必要がありました（笑） テーブルの最終行にのみ適用したいスタイルがあり、疑似クラスを使って簡単に実現できたのですが、少し手間取った場面がありました。 今回は、疑似クラ...
