段組みレイアウト

段組みレイアウトの仕様では、新聞に見られるような、コンテンツを段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。

前提知識: HTML の基本(HTML 入門を学ぶ)、および CSS の機能の考え方(CSS 入門を学ぶ)。
学習目標: ウェブページ上で、新聞に見られるような、段組みレイアウトを作成する方法を学ぶこと。

基本的な例

ここでは、しばしば multicol と呼ばれる、段組みレイアウトの使用方法を探ります。 あなたは、multicol の出発点ファイルをダウンロードして、適切な場所に CSS を追加することによって、従うことができます。 このセクションの一番下には、最終的なコードがどのようになっているかの実例があります。

出発点にはいくつかの非常に単純な HTML を含んでいます。 container のクラスを持つラッパーに見出しといくつかの段落が入っています 。

container のクラスを持つ <div> を、 multicol コンテナとします。 2 つのプロパティ column-count または column-width のいずれかを使用して、multicol をオンにします。 column-count プロパティは与えた値と同じ数の段(column)を作成するので、スタイルシートに次の CSS を加えて、ページをリロードすれば、あなたは 3 つの段を得るでしょう。

css
.container {
  column-count: 3;
}

作成した段の幅は可変です — ブラウザーは各段に割り当てるためのスペースを計算します。

html
<div class="container">
  <h1>Simple multicol example</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
    eget fermentum sapien.
  </p>

  <p>
    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </p>
</div>
css
.container {
  column-count: 3;
}

次のように CSS を変更して column-width を使用します。

css
.container {
  column-width: 200px;
}

ブラウザーは指定したサイズでできる数の段を与えます。 残りのスペースは既存の段間で共有されます。 これは、コンテナがその幅で正確に割り切れない限り、指定した幅と正確には一致しないことを意味します。

css
.container {
  column-width: 200px;
}

段をスタイリングする

multicol によって作成された段を個別にスタイリングすることはできません。 1 つの段を他の段より大きくしたり、単一の段の背景色やテキストの色を変更したりする方法はありません。 段の表示方法を変更する機会は次の 2 つがあります。

  • column-gap を使用して段間のギャップのサイズを変更します。
  • column-rule を使用して段間に線を追加します。

上記の例を使用して、次のように column-gap プロパティを追加してギャップのサイズを変更します。

css
.container {
  column-width: 200px;
  column-gap: 20px;
}

さまざまな値で遊ぶことができます — このプロパティは任意の長さの単位を受け入れます。 今度は column-rule で、段の間に線(rule、罫線)を追加します。 前のレッスンで遭遇した border プロパティと同様に、column-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-width の一括指定で、border と同じ値を受け入れます。

css
.container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 4px dotted rgb(79, 185, 227);
}

さまざまなスタイルや色の線を追加してみてください。

注意すべきことは、線がそれ自体の幅を占めることはないということです。 それは column-gap で作ったギャップの向こう側にあります。 線の両側にスペースを増やすには、column-gap のサイズを増やす必要があります。

段と断片化

段組みレイアウトのコンテンツは断片化されています。 ウェブページを印刷するときなど、ページ付きメディアでコンテンツがふるまうのと基本的に同じようにふるまいます。 コンテンツを multicol コンテナに入れるとき、それは段に断片化されます。 そして、コンテンツはこれを可能にするために分割されます。

時々、この分割は良くない読書体験をもたらす場所で起こるでしょう。 以下の実例では、multicol を使用して一連のボックスをレイアウトしました。 各ボックスの中には見出しとテキストがあります。 段がその 2 つの間で断片化すると、見出しはテキストから分離されます。

html
<div class="container">
  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>
  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>
</div>
css
.container {
  column-width: 250px;
  column-gap: 20px;
}

.card {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 0 0 1em 0;
}

このふるまいを制御するために、CSS 断片化の仕様のプロパティを使用できます。 この仕様は、multicol とページ付きメディアでのコンテンツの分割を制御するためのプロパティを提供します。 例えば、.card の規則には、プロパティ break-insideavoid の値で追加します。 これは見出しとテキストのコンテナなので、このボックスを断片化したくありません。

現時点では、ブラウザーを最大限にサポートするために、古いプロパティ page-break-inside: avoid を追加することも価値があります。

css
.card {
  break-inside: avoid;
  page-break-inside: avoid;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 0 0 1em 0;
}

ページをリロードすると、ボックスは一体になっているはずです。

css
.container {
  column-width: 250px;
  column-gap: 20px;
}

.card {
  break-inside: avoid;
  page-break-inside: avoid;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 0 0 1em 0;
}

まとめ

これで、構築中のデザインのレイアウト方法を選択するときに、意のままにできるもう一つのツールである段組みレイアウトの基本機能の使用方法がわかりました。

関連情報