レスポンシブ対応のレイアウトやコンポーネントだけを実装するCSSのシンプルなコードのまとめ -SmolCSS
Post on:2021年7月16日
sponsors
Webサイトでよく使用するレスポンシブ対応のシンプルなグリッドやサイドバー、フレキシブルなパディングの実装、ギャラリーやカード型レイアウトなど、レイアウトやコンポーネントを実装するCSSのコードを紹介します。
CSSの実装は年々進化しており、さまざまなプロジェクトで使用できるシンプルで最小限のコードをまとめたスニペットをアップデートしておくと便利です。
SmolCSSでは、レイアウトやコンポーネントを実装するCSSの最小限のコードがまとめられています。
まずは、レスポンシブ対応のグリッドレイアウト。
上部の「CSS」をクリックすると、実装するCSSが表示されます。
また、「Open in CodePen」をクリックすると、デモを編集できます。
「CSS」をクリックすると、実装するCSSが表示
CSS Gridで実装するレスポンシブ対応のグリッドです。オプションで、CSS変数を使用して可変に拡張できます。各列は同じ量でサイズ変更され、幅が--min値に達すると、アイテムは新しい行に分割されます。
|
1 2 3 4 5 6 7 8 9 10 |
.smol-css-grid { --min: 15ch; --gap: 1rem; display: grid; grid-gap: var(--gap); /* min() with 100% prevents overflow in extra narrow spaces */ grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr)); } |
上記と同様に、レスポンシブ対応のグリッドレイアウトをFlexboxで実装します。オプションで、CSS変数を使用して可変に拡張できます。各列は同じ量でサイズ変更され、幅が--min値に達すると、アイテムは新しい行に分割されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.smol-flexbox-grid { --min: 10ch; --gap: 1rem; display: flex; flex-wrap: wrap; gap: var(--gap); } .smol-flexbox-grid > * { flex: 1 1 var(--min); } |
参考: Flexboxで実装する定番レイアウトのコードのまとめ
上下左右の中央に配置するもっともシンプルなCSSです。
|
1 2 3 4 |
.smol-centering { display: grid; place-content: center; } |
CSSの中央揃えのいろいろな方法は、以前の記事をご覧ください。
現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価しています。
Smol Responsive Sidebar Layout
レスポンシブ対応のサイドバーを実装するCSSです。サイドバーのサイズを設定するためにfit-contentが使用されており、サイドバーは定義された値まで拡大でき、それ以外の場合はmin-contentの値に縮小されます。
|
1 2 3 4 |
.smol-sidebar { display: grid; grid-template-columns: fit-content(20ch) minmax(min(50vw, 30ch), 1fr); } |
参考: fit-content, min-content, max-contentの便利な使い方、CSSでコンテンツに依存してサイズを決める
レスポンシブ対応のパディングを実装するCSSです。ビューポートのサイズが変更されると、パディングは拡大および縮小します。実装にはCSSのclamp()が使用されており、常に1remから3remの範囲内の値が適用されます。
|
1 2 3 |
.smol-responsive-padding { padding: 1.5rem clamp(1rem, 5%, 3rem); } |
参考: CSSの比較関数が便利すぎる！min(), max(), clamp()の使い方を詳しく解説
aspect-ratioプロパティはすべての主要ブラウザでサポートにされ、object-fitやflexboxと組み合わせることで、レスポンシブ対応のギャラリーを簡単に実装できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.smol-aspect-ratio-gallery { --min: 15rem; --aspect-ratio: 4/3; --gap: 0; } .smol-aspect-ratio-gallery li { aspect-ratio: var(--aspect-ratio); } @supports not (aspect-ratio: 1/1) { .smol-aspect-ratio-gallery li { height: max(25vh, 15rem); } } .smol-aspect-ratio-gallery img { display: block; object-fit: cover; width: 100%; height: 100%; } |
参考: CSS aspect-ratioプロパティの使い方、レスポンシブやレイアウトシフトで大活躍
参考: レスポンシブ用に画像を配置するスタイルシートの5つのテクニック
Smol Composable Card Component
レスポンシブ対応のカードコンポーネントを実装するCSSです。aspect-ratioプロパティをはじめ、:not()や:first-childや:last-childを使用して実装されており、目的のセマンティック内部コンテンツでのみ機能する構成可能なカードコンポーネントが作成されます。aspect-ratioをサポートしていないブラウザ用にフォールバックも用意されています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
.smol-card-component { --img-ratio: 3/2; display: flex; flex-direction: column; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.35); border-radius: 0.5rem; } /* Soon we can replace this with: gap: 1rem; */ .smol-card-component > * + * { margin-top: 1rem; } .smol-card-component > img { /* Fallback for `aspect-ratio` of defining a height */ height: max(18vh, 12rem); object-fit: cover; width: 100%; } /* When supported, use `aspect-ratio` */ @supports (aspect-ratio: 1) { .smol-card-component > img { aspect-ratio: var(--img-ratio); height: auto; } } .smol-card-component > img:first-child { border-radius: 0.5rem 0.5rem 0 0; } .smol-card-component > img:last-child { border-radius: 0 0 0.5rem 0.5rem; margin-top: auto; } .smol-card-component > :not(img) { margin-left: 1rem; margin-right: 1rem; } .smol-card-component > :not(img):first-child { margin-top: 1rem; } /* Enhanced `:not()` accepts a selector list, but as a fallback you can chain `:not()` instead */ .smol-card-component > :last-of-type:not(img, h2, h3, h4) { margin-bottom: 1rem; } .smol-card-component > :not(h2, h3, h4) { font-size: 0.9rem; } .smol-card-component > a { align-self: start; } |
CSSのスクロールスナップは現在ではほぼすべてのブラウザにサポートされ、採用しているWebサイトやスマホアプリも増えてきました。スクロールを開始すると、中央のアイテムがスクロール可能な領域の中央にスナップします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.smol-scroll-snap { /* Set up container positioning */ display: grid; grid-auto-flow: column; grid-gap: 1.5rem; /* Enable overflow along our scroll axis */ overflow-x: auto; /* Define axis and scroll type, where `mandatory` means any scroll attempt will cause a scroll to the next item */ scroll-snap-type: x mandatory; padding: 0 0 1.5rem; -webkit-overflow-scrolling: touch; } .smol-scroll-snap > * { width: min(45ch, 60vw); /* Choose how to align children on scroll */ scroll-snap-align: center; /* Prevents scrolling past more than one child */ scroll-snap-stop: always; } |
参考: CSSのスクロールスナップの便利な使い方、実装の注意点を徹底解説
アンカーリンクもここ数年で大きく進化しました。CSS GridやFlexboxを使用して視覚的な順序とDOMの順序を変更する場合は、視覚的なフォーカスの順序で期待を破ることに常に注意してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
.smol-article-anchor { display: grid; grid-template-columns: min-content auto; position: relative; margin-top: 2em; /* You could pull this property out and generalize it under the selector `[id]` as it won't affect flow layout or regular margins */ scroll-margin-top: 2em; } .smol-article-anchor:target::before { content: "Is it me you're looking for?"; position: absolute; font-size: .9rem; top: -1.25rem; left: 0; font-style: italic; color: currentColor; } .smol-article-anchor a { grid-row-start: 1; align-self: start; font-size: 1rem; line-height: 1; /* We're using `transform` vs. margins */ transform: translateX(-50%) translateY(25%); text-decoration: none; /* Be sure to check that your own colors still meet or exceed 4.5:1 contrast when using lowering opacity */ opacity: 0.75; } .smol-article-anchor a:hover { text-decoration: underline; text-underline-offset: 0.25em; opacity: 1; } .smol-article-anchor a:focus { outline: 2px solid currentColor; outline-offset: 0.15em; } /* Visually hidden while remaining accessible to assistive tech like screen readers */ .smol-article-anchor-hidden { width: 0; height: 0; overflow: hidden; position: absolute; } |
Smol Flexible Unbreakable Boxes
CSSは素晴らしく、古いCSSと最新のCSSを組み合わせて使用することで、フレキシブルで壊れにくいボックスをすばやく実装できます。前述のレスポンシブ対応のパディングを再利用して、ボックスがさまざまなサイズのときにちょうどいい感じのパディングを可能にします。 ボックスのサイズは、min()関数で幅を設定することで制御されます。min()の値は、大きなビューポートの場合は最大幅、小さなビューポートの場合は最小幅のボックスになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.smol-unbreakable-box { --color-light: #E0D4F6; --color-dark: #675883; margin: 2rem auto; color: var(--color-dark); background-color: var(--color-light); font-size: 1.15rem; /* Smol Responsive Padding FTW! */ padding: clamp(.75rem, 3%, 2rem); /* Provide a max-width and prevent overflow */ width: min(50ch, 90%); /* Help prevent overflow of long words/names/URLs */ word-break: break-word; /* Optional, not supported for all languages */ hyphens: auto; } .smol-unbreakable-box footer { padding: 0.25em 0.5em; margin-top: 1rem; color: var(--color-light); background-color: var(--color-dark); font-size: 0.9rem; /* Creates a visual box shrunk to `max-content` */ width: fit-content; } |
参考: CSSの比較関数が便利すぎる！min(), max(), clamp()の使い方を詳しく解説
サイトでは、他にもたくさんのレイアウト・コンポーネントを実装するCSSが掲載されています。
sponsors
