日本語のレイアウト
html / CSS

段落に文字と背景画像を グリッドレイアウトで 美しく配置する

First

文字の配置をグリッドレイアウトでデザインする

グリッドレイアウトで作るアイキャッチ

グリッドレイアウト
風
来
坊

グリッドレイアウトのサイズはコンテナで定義される。上の「風来坊」という文字はフォントサイズが 2rem（32px）、padding が 1px 、グリッドの1マスの高さと幅が各々 34px、文字と文字の間隔に gap: 2px; 、つまり文字を包括するコンテナの高さと幅が 70px のように定義される。

グリッドレイアウトで文字を配置して「flort: left」で文字を回り込ませてみよう。これまでの慣習でこのような使い方は思いつかなかった。このミニマリズムは使える。

<div id="grid-container-standard-5">
  <div id="itemA-5">風</div>
  <div id="itemB-5">来</div>
  <div id="itemC-5">坊</div>
</div>
#grid-container-standard-5 {
  display: grid;
  grid-template-rows: 34px 34px;
  grid-template-columns: 34px 34px;
  /*grip-auto-rows: 34px; */
  height: 70px;
  width: 70px;
  gap: 2px;
  margin-right: 1rem;
  marin-bottom: 1rem;
  padding: 0;
  place-content: start;
  background-color: #fff;
  font-family: "Shippori Mincho", serif;
  font-weight: 800;
  font-style: normal;
  float: left;
}
#itemA-5 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  color: #fff;
  writing-mode: horizontal-tb;
  box-sizing: border-box;
  background-color: #eb4034;
  font-size: 2rem;
  font-weight: 900;
  padding: 0;
  z-index: 2;
  line-height: 1;
}
#itemB-5 {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  color: #fefefe;
  font-weight: 900;
  writing-mode: horizontal-tb;
  box-sizing: border-box;
  background-color: #0d8011;
  font-size: 2rem;
  padding: 0;
  z-index: 2;
  line-height: 1;
}
#itemC-5 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  color: #fefefe;
  font-weight: 900;
  writing-mode: horizontal-tb;
  box-sizing: border-box;
  background-color: #0d8011;
  font-size: 2rem;
  padding: 0;
  z-index: 2;
  line-height: 1;
}

グリッドコンテナとアイテムのサイズに慣れる

気
炎
万
丈

全体サイズを縮小してみた。こういう凡例をいくつか熟せば、複雑なグリッドレイアウトも可能になる。例えば、CSSのグリッドレイアウト内でさらにグリッドレイアウトを作成するには、ネストされたグリッドを使用する。親グリッドの子要素として別のグリッドコンテナを配置することで、入れ子構造を実現できる。

Second

コンパクトなグリッドレイアウトを考える

単純なグリッドレイアウトから始める

複雑なレイアウトや大規模なレイアウトに適していると言われるグリッドレイアウトであるが、皆が皆そこから入るとなると、それは中途半端で何も習得できずに終わりそうである。小から大へと着実に舵を取るのも逆もまた真なりである。このセクションで行うグリッドレイアウトはまさに「小」であり、グリッドレイアウトを体現するものだ。

グリッドレイアウト

ここでは背景画像を使ったものを考えてみよう。制作の順番は、文字の配置をグリッドレイアウトで考慮してからグリッドコンテナに背景画像を充てるという流れが分かり易くて良い。

<div id="grid-container-standard-7">
  <div id="itemA-7"></div>
  <div id="itemB-7">Grid ayout</div>
</div>

「rid-template-rows: 36px 62px;」は36px の行は余白、62px の行に文字列の入る部分を想定したもの。

#grid-container-standard-7 {
  display: grid;
  grid-template-rows: 36px 62px;
  grid-template-columns: 1fr;
  background-image: url(images/fusen.png);
  background-size: 100%;
  background-repeat: no-repeat;
  height: 98px;
  width: 300px;
  padding: 0;
  place-content: start;
  font-family: "Shippori Mincho",serif;
  font-weight: 800;
  font-style: normal;
}
Grid layout

付箋を背景イメージとして使ったものだが、以前は画像単独で行っていたものだ。こういう具合に使えるとは喜ばしい限りだ。画像の背景色を変えてやってみよう。

ケーススタディ 2

文字の配置と画像の配置について完全に掌握したとするならば、ほぼグリッドレイアウトは制覇したことになる。グリッドレイアウトをフルスクリーンから部分的な段落に挿入する局部的な配置まで、熟せばこなすほど出番が増えてくる筈だ。そうだ、もっと文字と背景画像の関係を探らなければならない。

グリッドレイアウトを
モノにするには
文字と背景画像の配置を
完全に掌握することだ。
Third

単純なグリッドレイアウトをもう少し

グリッドレイアウトの優位性

Flexbox との比較

Flexboxは、1次元のレイアウトを管理し、柔軟なアイテム配置を実現できるため、グリッドレイアウトに比べて使いやすいという声も多く聞かれるが、慣れてくれば使いやすさは逆転すると感じる。設計通りに配置してくれる安心感は大きい。

マイナス面としては、要素が不確定に増えるレイアウトの場合、グリッドレイアウトは記述が増えすぎてしまうということだ。これには設計面で効率化することが求められる。

これはイイ

関連ページ：Grid Layout Library

ケーススタディ
※ココ再点検
Fourth

文字の塊りを装飾する

インパクトを狙う

ここまで、ヘッダーにあたる文字列についてグリッドレイアウトを使って、アイキャッチなる効果を求めてレイアウトを探ってきた。次のものはグリッドレイアウトから離れて、文字の塊りを強調したり、::first-letter のような効果を狙ったものだ。

約60兆個の細胞は常に新陳代謝を繰り返し
皮膚は約1ヶ月、血液は約4ヶ月で入れ替わる。

My heading

グリッドレイアウト の CSS モジュールは、ページを主要な領域に分割したり、HTML プリミティブから構築されたコントロールの各部分間のサイズ、位置、レイヤー化に関する関係を定義するのに優れている。

Fifth

inline-block で文字配置を調整する

ラベルに於ける商品名は「まる」に納まる

ポ
イ
ン
ト

このセクションの例題は、三列の文字列と背景画像で構成される。文字列は 高さと幅、上下左右の余白である margin と padding が自由に設定できるinline-block にして絶妙に文字列を配置する。

背景画像の配置には以下ポイントがある。以下 ※1 についてはいくつかの試行錯誤が必要になる。文字サイズと背景画像サイズの兼ね合いでいくつかのサイズを試してみてから決定する。(グリッドレイアウトを使ってサイズ指定した方が早いかもしれない。)

  • 指定する背景画像を全範囲表示…background-size: contain;
  • 指定する背景画像をひとつ表示…background-repeat: no-repeat;
  • コンテナの表示サイズを指定…width: 250px; height: 250px; (※1)
  • background-position: center;…背景画像の初期位置を設定
繊細に グリッド 大胆に 
<div class="background-container">
  <div class="background-text">
    <span class="text-color-2">繊細に</span>
    <span class="text-color-1">グリッド</span>
    <span class="text-color-3">大胆に</span>
  </div>
</div>
.background-container {
  width: 250px;
  text-align: center;
  /* 文字中央寄せ */
  background-image: url(images/en.png);
  background-repeat: no-repeat;
  margin: 0 auto;
  height: 250px;
  background-size: contain;
  background-position: center;
}

.background-text {
  display: inline-block;
  /* インラインブロックにする */
  padding: 20px;
  /* 余白指定 */
  margin-top: -40px;
  writing-mode: vertical-rl;
}
.text-color-1 {
  display: inline-block;
  font-family: "Shippori Mincho", serif;
  font-weight: 800;
  font-size: 3rem;
  height: 300px;
  color: #4682B4;
  text-shadow: 3px 3px 1px #d3d3d3;
}
.text-color-3 {
  display: inline-block;
  font-family: "Shippori Mincho", serif;
  font-weight: 800;
  font-size: 2rem;
  height: 300px;
  margin-right: 0.2rem;
  transform: rotate(-6deg);
  color: #FF8C00;
  text-shadow: 3px 3px 1px #d3d3d3;
}

.text-color-2 {
  display: inline-block;
  font-family: "Shippori Mincho", serif;
  font-weight: 800;
  font-size: 2rem;
  height: 300px;
  margin-left: 0.2rem;
  transform: rotate(6deg);
  color: #EE82EE;
  text-shadow: 3px 3px 1px #d3d3d3;
}
Sixth

aspect-ratio

背景画像に aspect-ratio を使ったレスポンシブ

グリッドコンテナを固定サイズにしないで width: 100% にする場合について触れておこう。

ギ
タ
ー
を
弾
こ
う

背景画像に aspect-ratio を使ったレスポンシブ

#grid-container-guitar {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 34px 34px 34px 34px 34px 34px 34px;
  width: 100%;
  background-image: url(images/guitar.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  aspect-ratio: 10/6 auto;
  padding: 0;
  gap: 2px;
  place-content: center;
  place-items: center;
  font-family: "Shippori Mincho", serif;
  font-size: 2rem;
  font-weight: 800;
  font-style: normal;
}

このグリッドのポイント

grid-template-columns の設定は文字が入るコマ数分を確保する。grid-template-rows に於ける文字列は一行だけなので「1fr」を設定。

aspect-ratio: 10/6 auto; は、CSSで要素のアスペクト比（縦横比）を制御するプロパティだ。「10/6」は横幅と縦幅の比率を表し、この場合、横幅と縦幅の比率が10対6になる。「auto」は、要素のサイズが自動的に調整されることを意味する。

具体的に、aspect-ratio: 10/6 auto; は、要素の横幅を指定した場合、縦幅を自動的に計算し、10:6のアスペクト比を保つようにする。逆に、縦幅を指定した場合、横幅を自動的に計算し、10:6のアスペクト比を保つようにする。

背景画像に aspect-ratio を使うことで、レスポンシブデザインをより効率的に実現し、レイアウトシフトを防止できる。特に、レスポンシブデザインを意識している場合は、aspect-ratio を積極的に活用することをおすすめする。