グリッドレイアウト(2カラム + 3カラム + 4カラム)
【パス会員限定】CSSグリッドを使用した2カラム、3カラム、4カラムの縦積みグリッドレイアウト。
16 件中 1〜16件目 を表示
【パス会員限定】CSSグリッドを使用した2カラム、3カラム、4カラムの縦積みグリッドレイアウト。
コンテンツが少ない場合にフッターを画面の最下部に固定する方法を紹介。
【パス会員限定】PC時は横並びで左に「画像」、右に「見出し → テキスト → リンク」の順番に配置する。一方、SP時は縦積みで「見出し → 画像 → テキスト → リンク」の順番に配置する。
【パス会員限定】PC時は横並びで左に「画像」、右に「見出し → テキスト」の順番に配置する。一方、SP時は縦積みで「見出し → 画像 → テキスト」の順番に配置する。
【パス会員限定】PC時に左もしくは右に大きいグリッドアイテムを1つ配置したグリッドレイアウト。SP時は2カラムになり、一番上に大きいグリッドアイテムが配置される。
FlexboxやGridレイアウトで横並びに要素を配置しており、画面幅に応じてカラム数が変更する場合に使用できる便利なCSSのカスタムプロパティ(変数)の使い方を紹介。
【パス会員限定】左上に大きいグリッドアイテムを配置したグリッドレイアウト。画面幅に応じてカラム数が4、3、2と変化する。
【パス会員限定】左上と右下に大きいグリッドアイテムを配置したグリッドレイアウト。画面幅に応じてカラム数が3、2と変化する。