たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個

 

 

モダンなCSSレイアウトでは、ほんのわずかなコードを書くだけで、実用的なスタイリングを実現できます。

 

この記事では、たった1行でよく見かけるWebレイアウトを表現できるテクニック10個をご紹介します。

 

 

上下中央揃え: place-items: center

 

まずCSSでもっとも頭を悩ませる、上下中央揃えを詳しくみてみましょう。ここでは、plae-items: centerを使えば、思ったよりに簡単に実現できます。

 

まず、display: gridを記述したら、一緒にplace-items: centerを同じ要素に追加します。place-itemsは、align-itemsとjustify-itemsを同時にスタイリングできる簡略化表記、ショートハンドです。centerに設定することで、align-itemsとjustify-itemsの両方がcenterとして設定されます。

 

.parent {
  display: grid;
  place-items: center;
}

 

これによって、コンテンツはサイズに関係なく、親要素の完全に中央に配置することができます。

 

 

02. パンケーキ解体レイアウト: flex: grow | shrink | baseWidth

 

マーケティングサイトなどでよく見られるレイアウトで、3つの項目が並んでいます。モバイル端末では、これらのアイテムをきれいに重なり、画面サイズを大きくすると拡張されます。

 

このレイアウトにはFlexboxプロパティを使用することで、画面サイズが変更されたときに要素の配置を調整するためにメディアクエリと使用する必要がなくなります。

 

flexは、flex-grow、flex-shrink、flex-basisを組み合わせたショートハンドとなります。

 

このため、ボックスをflex-basisサイズに合わせて拡大し、小さいサイズでは縮小します。追加のスペースを埋めるために伸縮しないようにするには、flex: 0 2 flex-basisと表記しましょう。ここでは、flex-basisを150pxとしています。

 

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

 

ボックスを伸縮させ、次の行に折り返して表示したいときは、以下のようにflex-growを1としましょう。

 

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

 

 

これで画面サイズの変更に応じて、ボックスサイズを拡大縮小することができます。

 

 

03. サイドバー付きレイアウト: grid-template-columns: minmax(, ) …)

 

このテクニックでは、gridレイアウトのminmax機能を利用します。ここでは、サイドバーの最小サイズを150pxに設定していますが、大きな画面では全体の25%まで引き伸ばしています。

 

サイドバーは、その25%が150pxよりも小さくなるまで、親要素の25%を占有します。

 

これにgrid-template-columnsの値として、minmax(150px, 25%) 1frを加えてみましょう。最初の列のアイテム（ここではサイドバー）は、25%で150pxのminmaxを取得し、2番目のアイテム（ここではメインセクション）は1frとして残りのスペースを占有します。

 

.parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

 

 

04. パンケーキ重ねレイアウト: grid-template-rows: auto 1fr auto

 

パンケーキ解体レイアウトとは異なり、上記デモでは画面サイズが変化しても子要素のサイズは変わりません。一般的に固定フッター（英: Sticky Footer）と呼ばれるこのレイアウトは、モバイルアプリケーションやウェブサイトの両方でよく使用されています。

 

コンポーネントにdisplay: gridを追加すると、1列のグリッドが表示されますが、メインセクションの高さは、その下のフッターと同じ高さにしかありません。

 

フッターを下部に固定するには、以下のように追記しましょう。

 

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

 

こうすることでヘッダーとフッターは自動的に子要素のサイズに設定され、残りのスペース（1fr）をメインセクションとして適用されます。

 

 

05. 聖杯レイアウト: grid-template: auto 1 fr auto / auto 1fr auto

 

この聖杯（英：Holy Grail）レイアウトでは、ヘッダーとフッター、左右サイドバー、そして名コンテンツがあります。

 

このレイアウトをたった一行のコードで記述するには、grid-templateプロパティを利用しましょう。こうすることで行と列を同時にスタイリングすることができます。

 

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

 

 

06. 12カラムグリッド: grid-template-columns: repeat(12, 1fr)

 

ウェブサイトで広く使われている12グリッドレイアアウトは、repeat()を使ってみましょう。repeat(12, 1fr)とすることで、1frずつの12カラムのグリッドレイアウトを実現できます。

 

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}

 

こうすることでグリッド上に子要素を自由に配置することができます。たとえば、上記サンプルのようにgrid-column: 1 / 13と記述すれば、最初の行から最後の行（13番目）まで１２カラム、すべての列となります。1 / 5とすれば、最初の4カラムとなります。

 

 

もうひとつの方法としては、spanをつかった記述方法です。まず始点となる行からいくつかの列にまたがるか設定します。たとえばgrid-column: 1 / span 12はgrid-column: 1/ 13となり、grid-column: 2 / span 6は、grid-column: 2 / 8と同じ意味となります。

 

.child-span-12 {
  grid-column: 1 / span 12;
}

 

 

07. RAM(Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(, 1fr))

 

これまでに学んだコンセプトを組み合わせることで、自動的に配置された柔軟性のある子要素をもつレスポンシブレイアウトを作成できます。ここで覚えておきたい重要な用語は、repeat、auto-(fit|fill)、minmax()で、すべての頭文字をとって、「RAM」と覚えておくと良いでしょう。

 

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

 

ここでもrepeatを使っていますが、ここでは数字ではなくauto-fitを使用しています。こうすることで、これらの子要素を自動的に配置することができます。

 

これらの子要素の最小値は150px、最大値は1frで、小さい画面では1frの幅いっぱいとなり、それぞれの幅が150pxとなると同じ行に並んで表示されます。

 

auto-fitでは、横幅が150pxを超えるとボックスが伸び、残りのスペースを埋めるように表示されます。ただし、auto-fillに変更すれば、minmax関数の基準サイズを超えてもボックスは引き伸ばされません。

 

 

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

 

 

08. 要素の整列: justify-content: space-between

 

justify-content: space-betweenを使うことで、最初と最後の子要素ボックスいっぱいに配置し、残りのスペースを要素間で均等に配置することができます。

 

上記サンプル例では、flexboxを使って表示されており、flex-direction: columnによって水平方向の列として表示されます。

 

こうすることで、カード内の見出しタイトルや説明テキスト、画像ファイルを縦列に配置することができます。最初の要素（見出しタイトル）と最後の要素（画像ファイル）の間にある説明文が、それぞれの要素の端から等間隔で配置されます。

 

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

 

 

09. clamp(最小, 実サイズ, 最大)

 

このスタイリングは、すべてのブラウザ対応ではありませんが、レイアウトやレスポンシブUIデザインをより魅力的にみせるテクニックです。

 

以下のようにclamp(min, actual, max)をとすることで、絶対的な最小サイズと最大サイズ、および実際のサイズをまとめて設定できます。

 

.parent {
  width: clamp(23ch, 50%, 46ch);
}

 

上記サンプル例では、最小サイズは23ch、23文字単位で、最大サイズは46ch、46文字となります。文字幅の単位は要素のフォントサイズに基づいています。実際のサイズは50%で、親要素の50%を表しています。

 

文字数を設定できるので、テキストの幅広がりすぎたり（46ch以上)、狭すぎたり（23ch未満)となるのを防ぐことがえき、より読みやすいレイアウトを実現できます。

 

同様にこのテクニックは、レスポンシブ対応のフォント設定にも最適な方法です。たとえば、font-size: clamp(1.5rem, 20vw, 3rem)とすることで、見出しタイトルのフォントサイズは常に1.5remから3remの間で固定されますが、ビューポートの幅に合わせて20vwという実際の値に基づいて、大きくなったり小さくなったりします。

 

文字テキストの読みやすさを確保できる素晴らしいテクニックですが、すべての最新ブラウザに対応しているわけではないので、利用には注意が必要です。

 

 

10. 画像などのアスペクト比を維持: aspect-ratio: 幅 / 高さ

 

最後のテクニックは、もっとも実験的なレイアウトです。最近Chromium 84でChrome Canaryに導入されたばかりで、Firefoxでは今のところ安定版のブラウザには導入されていません。

 

しかし、頻繁に遭遇するCSSスタイリングの問題なので、このテクニックについても触れておきたいと思います。画像のアスペクト比を維持するテクニックです。

 

上記サンプル例のようにaspect-ratioプロパティでは、カードのサイズを変更すると、緑色のブロックが16:9のアスペクト比を維持します。

 

.video {
  aspect-ratio: 16 / 9;
}

 

このプロパティを使用せずに16:9のアスペクト比を維持するには、padding-top: 56.25%と記述し、アスペクト比を設定する必要があります。しかしaspect-raitoプロパティを利用すれば、面倒なパーセンテージを計算をする必要がなくなります。

 

aspect-ratio: 1 / 1で正方形にしたり、2 /1などお好みのサイズ比率で拡大縮小させることが可能となります。

 

.square {
  aspect-ratio: 1 / 1;
}

 

このテクニックはまだまだ始まったばかりですが、著者自身が何度も直面した問題を解決してくれる有効なテクニックとして覚えておきましょう。

 

 

さいごに、、。

 

この記事では、たった1行のコードでよく見かけるレイアウトを表現できるテクニック10個をまとめて紹介しました。

 

より詳しく解説した動画チュートリアル、自分で試すことができるデモページも公開されているので、参考にしてみると良いでしょう。

 

 

参照元リンク : Ten modern layouts in one line of CSS by Una Kravets – Web.dev