レスポンシブ対応のレイアウトやコンポーネントだけを実装するCSSのシンプルなコードのまとめ -SmolCSS

Webサイトでよく使用するレスポンシブ対応のシンプルなグリッドやサイドバー、フレキシブルなパディングの実装、ギャラリーやカード型レイアウトなど、レイアウトやコンポーネントを実装するCSSのコードを紹介します。

CSSの実装は年々進化しており、さまざまなプロジェクトで使用できるシンプルで最小限のコードをまとめたスニペットをアップデートしておくと便利です。

レスポンシブ対応のレイアウトやコンポーネントを実装するCSSのシンプルで最小限のコードのまとめ -SmolCSS

SmolCSS
SmolCSS -GitHub

SmolCSSでは、レイアウトやコンポーネントを実装するCSSの最小限のコードがまとめられています。

まずは、レスポンシブ対応のグリッドレイアウト。

サイトのキャプチャ

Smol Responsive CSS Grid

上部の「CSS」をクリックすると、実装するCSSが表示されます。
また、「Open in CodePen」をクリックすると、デモを編集できます。

サイトのキャプチャ

「CSS」をクリックすると、実装するCSSが表示

CSS Gridで実装するレスポンシブ対応のグリッドです。オプションで、CSS変数を使用して可変に拡張できます。各列は同じ量でサイズ変更され、幅が--min値に達すると、アイテムは新しい行に分割されます。

サイトのキャプチャ

Smol Responsive Flexbox Grid

上記と同様に、レスポンシブ対応のグリッドレイアウトをFlexboxで実装します。オプションで、CSS変数を使用して可変に拡張できます。各列は同じ量でサイズ変更され、幅が--min値に達すると、アイテムは新しい行に分割されます。

参考: Flexboxで実装する定番レイアウトのコードのまとめ

サイトのキャプチャ

Smol Modern Centering

上下左右の中央に配置するもっともシンプルなCSSです。

CSSの中央揃えのいろいろな方法は、以前の記事をご覧ください。
現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価しています。

CSS 中央揃えの実装テクニック

CSSの中央揃えで、最も万能で信頼できる実装テクニック

サイトのキャプチャ

Smol Responsive Sidebar Layout

レスポンシブ対応のサイドバーを実装するCSSです。サイドバーのサイズを設定するためにfit-contentが使用されており、サイドバーは定義された値まで拡大でき、それ以外の場合はmin-contentの値に縮小されます。

参考: fit-content, min-content, max-contentの便利な使い方、CSSでコンテンツに依存してサイズを決める

サイトのキャプチャ

Smol Responsive Padding

レスポンシブ対応のパディングを実装するCSSです。ビューポートのサイズが変更されると、パディングは拡大および縮小します。実装にはCSSのclamp()が使用されており、常に1remから3remの範囲内の値が適用されます。

参考: CSSの比較関数が便利すぎる!min(), max(), clamp()の使い方を詳しく解説

サイトのキャプチャ

Smol Aspect Ratio Gallery

aspect-ratioプロパティはすべての主要ブラウザでサポートにされ、object-fitflexboxと組み合わせることで、レスポンシブ対応のギャラリーを簡単に実装できます。

参考: CSS aspect-ratioプロパティの使い方、レスポンシブやレイアウトシフトで大活躍
参考: レスポンシブ用に画像を配置するスタイルシートの5つのテクニック

サイトのキャプチャ

Smol Composable Card Component

レスポンシブ対応のカードコンポーネントを実装するCSSです。aspect-ratioプロパティをはじめ、:not():first-child:last-childを使用して実装されており、目的のセマンティック内部コンテンツでのみ機能する構成可能なカードコンポーネントが作成されます。aspect-ratioをサポートしていないブラウザ用にフォールバックも用意されています。

サイトのキャプチャ

Smol Scroll Snap

CSSのスクロールスナップは現在ではほぼすべてのブラウザにサポートされ、採用しているWebサイトやスマホアプリも増えてきました。スクロールを開始すると、中央のアイテムがスクロール可能な領域の中央にスナップします。

参考: CSSのスクロールスナップの便利な使い方、実装の注意点を徹底解説

サイトのキャプチャ

Smol Article Anchors

アンカーリンクもここ数年で大きく進化しました。CSS GridやFlexboxを使用して視覚的な順序とDOMの順序を変更する場合は、視覚的なフォーカスの順序で期待を破ることに常に注意してください。

サイトのキャプチャ

Smol Flexible Unbreakable Boxes

CSSは素晴らしく、古いCSSと最新のCSSを組み合わせて使用することで、フレキシブルで壊れにくいボックスをすばやく実装できます。前述のレスポンシブ対応のパディングを再利用して、ボックスがさまざまなサイズのときにちょうどいい感じのパディングを可能にします。 ボックスのサイズは、min()関数で幅を設定することで制御されます。min()の値は、大きなビューポートの場合は最大幅、小さなビューポートの場合は最小幅のボックスになります。

参考: CSSの比較関数が便利すぎる!min(), max(), clamp()の使い方を詳しく解説

サイトでは、他にもたくさんのレイアウト・コンポーネントを実装するCSSが掲載されています。

サイトのキャプチャ

SmolCSS
SmolCSS -GitHub

sponsors

top of page

©2021 coliss