ブログデザイン備忘録～フルブリードレイアウト

1. フルブリードレイアウト
2. レイアウト用のサンプル
3. フルブリーフレイアウトのテスト表示
4. まとめ

　文字（記事）の部分を中央に固定幅で表示し、画像などのコンテンツをページ幅いっぱいに表示するフルブリードレイアウトをCSSで記述する方法につて紹介したい。

1. フルブリードレイアウト

　記事をページ幅いっぱいに記述してしまうと1行当たりの文字数が多く、特に段落の折り返しなどを見落としてしまいやすい。そこで記事の部分は65文字程度で改行して、画像は幅いっぱいに表示する(これをフルブリード;Full bleedと呼ぶ)レイアウトをCSSのコードで記述する。基本的なCSSコードと解説はシンプルなCSSで実装できる！記事は中央に固定幅、画像は幅いっぱいに、フルブリードレイアウトを実装するテクニック | コリスに掲載されている。

2. レイアウト用のサンプル

　レイアウトのテストを行うため、以下のようなHTML構造を用意する。

<main class="wrapper">
  <h1>サンプルエントリー</h1>
  <p>本文（66文字以上)</p>
  <img class="full-bleed" alt="test" src="" />
 <p>本文2（66文字以上)</p>
</main>

mainを"wrapper", imgを"full-bleed"というクラス名に設定して、記事の部分はpタグに記述し、折り返しがわかるように66文字以上の適当な文章を入れる。

次にCSSは、記事の部分65文字で折り返すためのレイアウトを指定するためにグリッドを用いる。

.wrapper {
  display: grid;
  grid-template-columns:
    1fr
    min(65ch, 100%)
    1fr;
}

グリッドの構造は余白-記事-余白とするため1fr min(65ch,100%) 1frとする。min(65ch,100%)は65chか100%を比較して小さい方の幅を採用するという意味で、ページ幅が広い場合は65文字で改行されページ幅が65文字以下になるとページ幅で改行される。なおchは文字幅をあらわす単位。次に2番目('min(65ch,100%)`)を中央カラムに設定するには

.wrapper > * {
  grid-column: 2;
}

さらに幅広ディスプレイの場合に画像がいっぱいに広がることを防ぐにはmax-widthを設定し左右のmarginをautoにすればmax-widthまで広がった画像が表示される。

.full-bleed {
  width: 100%;
  grid-column: 1 / 4;
  /* 幅を制限 */
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

3. フルブリーフレイアウトのテスト表示

以上のHTML/CSSを実装したテスト表示を以下に示す。表示倍率を1x,0.5x,0.25xで切り替えることでレイアウトが機能していることが確認できると思う。

See the Pen full-bleed by ATATAT (@atatat) on CodePen.

4. まとめ

　今回は文字（記事）の部分を中央に固定幅で表示し、画像などのコンテンツをページ幅いっぱいに表示するフルブリードレイアウトについて紹介した。

つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録～フルブリードレイアウト

1. フルブリードレイアウト

2. レイアウト用のサンプル

3. フルブリーフレイアウトのテスト表示

4. まとめ