レイアウト

CSS ポッドキャスト - 009: レイアウト

たとえばデベロッパーとして デザイナーの同僚から新しいウェブサイトのデザインを渡されました。 このデザインには、さまざまな種類の興味深いレイアウトと構成があります。 ビューポートの幅と高さを考慮した 2 次元レイアウト 滑らかで柔軟性が求められるレイアウトです CSS でスタイルを設定する最適な方法はどのように決めていますか？

CSS には、レイアウトの問題を解決するさまざまな方法が用意されています。 横軸、縦軸、またはその両方に配置できます。 状況に応じて適切なレイアウト メソッドを選択するのは難しいため、 問題を解決するために複数のレイアウト メソッドが必要になることがよくあります。 そのために、以降のモジュールでは その判断に役立つ、各 CSS レイアウト メカニズムの特長について学びます。

レイアウト: 簡単な経歴

ウェブの黎明期には 単純なドキュメントよりも複雑なデザインについては、<table> 要素を使用してレイアウトしました。 90 年代後半に CSS が広く普及したとき、HTML と視覚的なスタイルを分離するのが容易になりました。 CSS のおかげで、開発者は HTML にまったく触れることなくウェブサイトのデザインを完全に変更できるようになりました。 この新機能は、The CSS Zen Garden、 は、より多くのデベロッパーに CSS を学ぶよう促す CSS の力を示すために作成されたものです。

CSS は、ウェブデザインとブラウザ技術に対するニーズの進化に合わせて進化してきました。 CSS レイアウトとレイアウトに対する Google のアプローチの経時的な進化については、 こちらの記事（Rachel Andrew）。

レイアウト: 現在と未来

最新の CSS は非常に強力なレイアウト ツールです。 レイアウト専用のシステムがあるので 次のモジュールで Flexbox と Grid について詳しく説明します。

display プロパティについて

display プロパティは 2 つのことを行います。 まず、適用先のボックスがインラインとして動作するか、ブロックとして動作するかを決定します。

.my-element {
  display: inline;
}

インライン要素は文中の単語と同じように動作します。 インラインで並べて配置されています。 <span> や <strong> などの要素。 これは通常、<p>（段落）などの要素内のテキストのスタイルを設定するために使用されます。 デフォルトでインライン化されます。 また、周囲の空白も保持されます。

インライン要素に明示的な幅と高さを設定することはできません。 ブロックレベルの余白やパディングは、周囲の要素によって無視されます。

.my-element {
    display: block;
}

ブロック要素は並んで配置されません。 新しい行を作成します。他の CSS コードで変更されない限り ブロック要素はインライン ディメンションのサイズに展開され、 横書きモードでは全幅が使用されます。 ブロック要素の上下左右の余白が適用されます。

.my-element {
    display: flex;
}

display プロパティは、要素の子がどのように動作するかも決定します。 たとえば display プロパティを display: flex に設定すると、ボックスがブロックレベルのボックスになります。 その子を Flex アイテムに変換します これにより、配置、順序、フローを制御する Flex プロパティが有効になります。

Flexbox と Grid

複数の要素のレイアウト ルールを作成する主要なレイアウト メカニズムは、flexbox と grid の 2 つです。 2 つのモデルには類似点がありますが、レイアウトに関する異なる問題を解決するように設計されています。

フレックスボックス

.my-element {
    display: flex;
}

Flexbox は、1 次元レイアウト用のレイアウト メカニズムです。 単一軸のレイアウト（水平方向または垂直方向）。 デフォルトでは、Flexbox は要素の子を隣り合わせに配置し、 行と列を すべて同じ高さになるようにします

スペースを使い切っても、アイテムは同じ軸上に維持され、折り返されません。 代わりに、2 人は互いに同じ線上に押しつぶされようとします。 この動作は、align-items、justify-content、flex-wrap プロパティを使用して変更できます。

また、子要素は Flex の項目に変換されます。 Flex コンテナ内での動作に関するルールを作成できます。 個々のアイテムの配置、順序、理由を変更できます。 flex プロパティを使用して、縮小または拡大の方法を変更することもできます。

.my-element div {
    flex: 1 0 auto;
}

flex プロパティは、flex-grow、flex-shrink、flex-basis の省略形です。 上記の例を次のように展開できます。

.my-element div {
 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: auto;
}

デベロッパーはこれらの下位レベルのルールを提供し、レイアウトがどのように動作するかをブラウザにヒントを与えます。 コンテンツサイズやビューポートのサイズが 異なる場合などです そのため、レスポンシブ ウェブ デザインでは非常に便利です。

グリッド

.my-element {
    display: grid;
}

グリッドは多くの点でフレックスボックスと類似していますが、 これは、単一軸のレイアウト（垂直または水平のスペース）ではなく、多軸レイアウトを制御するように設計されています。

グリッドを使用すると、display: grid を含む要素にレイアウト ルールを記述できます。 レイアウト スタイル設定用の新しいプリミティブがいくつか導入されています。 たとえば repeat() 関数や minmax() 関数などです。 有用なグリッド ユニットの 1 つは、残りのスペースのごく一部である fr ユニットです。従来の 12 の列グリッドを構築できます。 各アイテムの間には、3 つの CSS プロパティがあります。

.my-element {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

上記の例は、単一軸のレイアウトを示しています。 Flexbox では 主にアイテムをグループとして扱います グリッドにより、2 次元の配置を正確に制御できます。 このグリッドの最初のアイテムが 2 行 3 列になるように定義できます。

.my-element :first-child {
  grid-row: 1/3;
  grid-column: 1/4;
}

grid-row プロパティと grid-column プロパティは、グリッド内の最初の要素に 4 列目の先頭まで拡張するよう指示します。 次に、最初の行から 3 番目の行へとスパンします。

フロー レイアウト

グリッドや Flexbox を使用しない場合は 要素は通常のフローで表示されます 通常のフローにおいて、いくつかのレイアウト メソッドを使用して、アイテムの動作と位置を調整できます。

インライン ブロック

周囲の要素がインライン要素のブロック マージンとパディングを無視していることを思い出してください。 inline-block を使用すると、そのようにトリガーできます。

p span {
    display: inline-block;
}

inline-block を使用すると、ブロックレベルの要素の特性を持つボックスが作成されます。 テキストに沿った流れになります

p span {
    margin-top: 0.5rem;
}

浮動小数点

テキストの段落内に画像がある場合 新聞のように画像をテキストで囲むと便利だと思いませんか？ これには浮動小数点数を使用します。

img {
    float: left;
    margin-right: 1em;
}

float プロパティは要素に「浮動小数点数」を指示します。移動します この例の画像は左にフローティング これにより、兄弟要素を「ラップ」できます。を囲みます。 left、right、または inherit を浮動小数点数にするように要素に指示できます。

複数列のレイアウト

要素のリストがとても長い場合は、 たとえば 世界のすべての国や地域、 ユーザーが何度もスクロールし、時間を無駄にする可能性があります。 また、ページ上に余分な空白が生じることもあります。 CSS マルチカラムでは これを複数の列に分割することで、両方の問題に対応できます。

<h1>All countries</h1>
<ul class="countries">
  <li>Argentina</li>
  <li>Aland Islands</li>
  <li>Albania</li>
  <li>Algeria</li>
  <li>American Samoa</li>
  <li>Andorra</li>
  …
</ul>

.countries {
    column-count: 2;
    column-gap: 1em;
}

これにより、長いリストが自動的に 2 つの列に分割され、2 つの列の間にギャップが追加されます。

.countries {
    width: 100%;
    column-width: 260px;
    column-gap: 1em;
}

コンテンツを分割する列数を設定するのではなく、 column-width を使用して、最小の幅を定義することもできます。 ビューポートのスペースが増えると 自動的により多くの列が作成され スペースが減ると 列も少なくなります これはレスポンシブ ウェブ デザインのコンテキストで非常に役立ちます。

位置付け

このレイアウト メカニズムの概要の最後では、ポジショニングについて説明します。 position プロパティは、ドキュメントの通常のフローにおける要素の動作を変更します。 他の要素とどのように関係しているかを示します。 使用できるオプションは relative、absolute、fixed、sticky で、デフォルト値は static です。

.my-element {
  position: relative;
  top: 10px;
}

この要素は、ドキュメント内の現在の位置に基づいて 10 ピクセル下に移動されます。 同じ位置に配置されます 要素に position: relative を追加すると、position: absolute を持つすべての子要素の包含ブロックにもなります。 つまり、子は特定の要素に再配置されます。 （絶対位置が適用されている場合）は、相対的に最上位の親ではなく

.my-element {
  position: relative;
  width: 100px;
  height: 100px;
}

.another-element {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
}

position を absolute に設定すると、 その要素が現在のドキュメント フローから外れます。 これには次の 2 つの意味があります。

1. この要素は、top、right、bottom、left を最も近い相対親で使用することで、任意の場所に配置できます。
2. 絶対的な要素を囲むコンテンツはすべてリフローして、その要素が残った残りのスペースを埋めます。

position の値が fixed の要素は、absolute と同様に動作します。 その親をルートの <html> 要素とします。 固定位置の要素は、設定した top、right、bottom、left の値に基づいて左上から固定されます。

固定された、 fixed の要素を修正しました。また、sticky を使用して、relative の予測しやすいドキュメントの流れを可視化します。 この値を指定すると、ビューポートが要素を超えてスクロールすると、 設定した top、right、bottom、left の値に固定されます。

まとめ

CSS レイアウトには多くの選択肢と柔軟性があります。 以降のモジュールでは、CSS の Flexbox と Grid の機能についてさらに詳しく見ていきます。

理解度をチェックする

レイアウトに関する知識をテストする