CSSで画像に文字を重ねる：グリッドデザインでアイテムのスペースを合わせて表示する

サイト作成で画像に文字を重ねる場合にそれぞれの位置取りが難しい。加えてレスポンシブでデバイスの画面幅によってデザインが伸縮されると画像と文字のバランスが崩れ易い。二つの悩みを同時に解決するために最も相応しい方法はグリッドデザイン：displayのgridで、画像と文字のスペースを合わせて表示できるから正確だ。

グリッドデザインで画像に文字を重ねるソースコード
画像の中央に文字を重ねる
画像の右上に文字を重ねる
画像の左上寄りに文字を重ねる
文字の位置取りを余白で調節する
区分けしたレイアウトで画像に重なる文字を整序させる
画像の中央の下のスペースの中央に文字を重ねる
文字を整序して位置取りを余白で調節する
文字の幅を確保しながら画像に重ねる

グリッドデザインで画像に文字を重ねるソースコード

画像に文字を配置するスペースの割合を計算する

計算されたスペースの中に文字を実際に配置する

CSSのdisplayのgridはコンテンツを縦横に配置して個々に調節できるし、それぞれを重ねるのも配置するスペースを同じに指定すれば良いだけだから簡単なんだ。サンプルに一枚の画像を使ってスペースに文字を重ねて表示するグリッドデザインのソースコードを色々な仕方で考えてみたい。画像の中央に文字を重ねる

重なる文字

HTML

<div class="grid-pile">
<img src="画像URL">
<span>重なる文字</span>
</div>

CSS

.grid-pile {display:grid;}
.grid-pile img {border:1px #000000 solid;box-sizing:border-box;grid-column:1/4;grid-row:1/4;}
.grid-pile span {font-size:large;padding:0.5em;color:#483d8b;background-color:#7fffd4;box-sizing:border-box;grid-column:2/3;grid-row:2/3;}

displayのgridはそれだけだとコンテンツは別々のスペースに表示される。コンテンツを重ねるには配置するスペースを全体的か部分的に揃えなくてはならない。サンプルは画像のimgと文字のpのそれぞれに列の「grid-column」と行の「grid-row」を指定している。画像の真ん中に文字を重ねる場合には少なくとも九つに分割して（上下左右から均等に配置するために）考える。前者は「1/4」と「1/4」で列と行の全てのスペースに、後者は「2/3」と「2/3」で真ん中の列と真ん中の行のスペースに表示している。grid-columnとgrid-rowはgridの開始線と終了線でコンテンツのスペースを区分けするけれども一つ隣ならば終了線は省略できるから文字の方は「2」と「2」で記述しても大丈夫だ。または開始線から等間隔で続く場合には列も行も終了線はspanで数えても構わないので、画像の方は「1/span 3」と「1/span 3」とも書き換えられる。画像の右上に文字を重ねる

重なる文字

HTML

<div class="grid-pile">
<img src="画像URL">
<span>重なる文字</span>
</div>

CSS

.grid-pile {display:grid;}
.grid-pile img {border:1px #000000 solid;box-sizing:border-box;grid-column:1/4;grid-row:1/4;}
.grid-pile span {font-size:large;padding:0.5em;color:#483d8b;background-color:#7fffd4;box-sizing:border-box;grid-column:3/4;grid-row:2/3;}

文字の位置取りが「3/4」と「2/3」で画像の「1/4」と「1/4」で九分割された右上のスペースに重ね合わせて指定されている。同じような仕方で画像を分割したスペースに対して文字の位置取りを指定すればどこにでも重ねて表示できる。画像の左上寄りに文字を重ねる

重なる文字

HTML

<div class="grid-pile">
<img src="画像URL">
<span>重なる文字</span>
</div>

CSS

.grid-pile {display:grid;}
.grid-pile img {border:1px #000000 solid;box-sizing:border-box;grid-column:1/7;grid-row:1/7;}
.grid-pile span {font-size:large;padding:0.5em;color:#483d8b;background-color:#7fffd4;box-sizing:border-box;grid-column:2/4;grid-row:2/3;}

画像を「1/7」と「1/7」で三十六分割したスペースの二列目から四列目までと三行目に文字を「2/4」と「2/3」で重ね合わせて配置している。画像を多く／細かく分割した場合、文字のスペースが一列分では入り切らず、改行されるかも知れないので、注意しなくてはならない。文字の位置取りを余白で調節する

重なる文字

HTML

<div class="grid-pile">
<img src="画像URL">
<span>重なる文字</span>
</div>

CSS

.grid-pile {display:grid;}
.grid-pile img {border:1px #000000 solid;box-sizing:border-box;grid-column:1/4;grid-row:1/4;}
.grid-pile span {font-size:large;padding:0.5em;color:#483d8b;background-color:#7fffd4;box-sizing:border-box;grid-column:3/4;grid-row:1/2;margin-top:1em;margin-right:1em;}

画像に重ねる文字を少し動かして位置取りを調節するには文字に余白を付ける。サンプルでは画像の右上に配置した文字に「margin-top」で上の外側の余白に、「margin-right」で右の外側の余白に「1em」を付けて各一文字分を引き離している。

margin

上下左右の外側の余白

margin:上下左右（値一つ）
margin:上下左右（値二つ）
margin:上左右下（値三つ）
margin:上下左右（値四つ）

margin-top

上の外側の余白

margin-bottle

下の外側の余白

margin-left

左の外側の余白

margin-right

右の外面の余白

※値は「8px」や「1em」などの大きさを入力する。CSSで上下左右の外側の余白をmarginで文字に付け加えると画像と重ね合わせたスペースを維持したまま、位置取りを調節できる。文字の位置取りを余白で調節する際には「box-sizing:border-box」も併せて指定しておくと枠線：borderと内側の余白：paddingが外側の余白に影響しなくなるからデザインを纏め易い。区分けしたレイアウトで画像に重なる文字を整序させるグリッドデザインは親ボックスにdisplayのgridをかけて子コンテンツのアイテムを行と列でどこにでも重ね合わせて配置できるけれどもアイテムの位置取りをスペースの中で整序させるにはレイアウトを区分けしなくてはならない。いい換えるとグリッドデザインのレイアウトを区分けしてスペースを確定すればアイテムを個別に扱って位置取りを細かく指定することができる。画像の中央の下のスペースの中央に文字を重ねる

重なる文字

HTML

<div class="grid-pile">
<img src="画像URL">
<span>重なる文字</span>
</div>

CSS

.grid-pile {display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;justify-items:center;align-items:center;}
.grid-pile img {border:1px #000000 solid;box-sizing:border-box;grid-column:1/4;grid-row:1/4;}
.grid-pile span {font-size:large;padding:0.5em;color:#483d8b;background-color:#7fffd4;box-sizing:border-box;grid-column:2/3;grid-row:3/4;}

レイアウトの区分けは列の「grid-template-columns」や行の「grid-template-rows」で行う。値は必要なスペースの数だけ半角スペースで区切って入力する。サンプルは列と行で三つずつに区分けするために値を「1fr 1fr 1fr」と三つずつ載せている。単位は通常の「px」や「em」や「%」などを使えるけど、gridで独特なのが「fr」で、全体の分数（fraction）を意味するけど、列や行で複数のスペースが互いに比率で指定し合える。例えば「1fr」と「1fr」と「1fr」のように同じならば三つのスペースが同じ大きさで、「1fr」と「2fr」だと二つ目が二倍（一つ目が半分）の大きさで取られる。レスポンシブでは画面幅に影響されないからとても役立つ。通常の「%」を使っても大丈夫だけれども「fr」は親ボックスに対する割合ではないところが違う。複数のスペースの大きさを互いに直感的に扱えるのがグリッドデザインには向いていると思う。そして区分けするスペースが同じならば値はrepeatで記述を短縮することもできる。サンプルの「1fr 1fr 1fr」は「repeat(3, 1fr)」に置き換えられる。repeatに半角括弧で、相等しく繰り返して表示するスペースの数を入れて半角コンマで区切ってそれぞれに共通する大きさを入れる。repeatは単独の値として使っても構わない。例えば「1fr 2fr 2fr」だと「1fr repeat(2, 2fr)」に置き換えられる。グリッドデザインでレイアウトにスペースを同じ大きさで数多く区分けする場合には特に便利な記法だ。displayのgridに加えてgrid-template-columnsやgrid-template-rowsでレイアウトを区分けするとスペースの中でアイテムを個別に整序されられる。アイテムの横の整序の要素

justify-self

主な値

center：中寄せ
left：左寄せ
right：右寄せ

アイテムの縦の整序の要素

align-self

主な値

center：中寄せ
flex-start：上寄せ
flex-end：下寄せ

レイアウト自体を整序させるならば「justify-content」（縦方向）と「align-content」（横方向）、複数のアイテムを纏めて整序させるならば「justify-items」（縦方向）と「align-items」（横方向）をdisplayのgridが記載された親ボックスのCSSに主な値の「center」や「left」や「right」や「flex-start」や「flex-end」などを使って追加する。何も指定しないと整序する値は列も行も「stretch」（伸縮）がデフォルトになっていてアイテムのサイズがスペースの大きさまで広がるからもっと小さく纏めたい場合には注意しなくてはならない。文字を整序して位置取りを余白で調節する

重なる文字

HTML

<div class="grid-pile">
<img src="画像URL">
<span>重なる文字</span>
</div>

CSS

.grid-pile {display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;justify-items:center;align-items:center;}
.grid-pile img {border:1px #000000 solid:box-sizing:border-box;grid-column:1/4;grid-row:1/4;}
.grid-pile span {font-size:large;padding:0.5em;color:#483d8b;background-color:#7fffd4;box-sizing:border-box;grid-column:1/2;grid-row:2/3;margin-left:3em;}

画像に重ねる文字を整序させる位置を基点にしてアイテムの位置取りを余白でさらに細かく調節することもできる。文字の位置取りを余白で調節する際には「box-sizing:border-box」も併せて指定しておくと枠線：borderと内側の余白：paddingが影響しなくなるからデザインを纏め易い。サンプルはスマホで閲覧すると文字のスペースが狭いために改行されて画面幅が広くてスペースが十分に取れるタブレットやパソコンと比べてデザインが変わってしまっている。グリッドデザインでレイアウトを区分けするとスペースの大きさにアイテムの余白が含まれるので、文字の余白を増やし過ぎると溢れ出すように画像に重ねるスペースに入り切らなくて改行されるしかないから注意しなくてはならない。文字の幅を確保しながら画像に重ねる

重なる文字

HTML

<div class="grid-pile">
<img src="画像URL">
<span>重なる文字</span>
</div>

CSS

.grid-pile {display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;justify-items:center;align-items:center;}
.grid-pile img {border:1px #000000 solid:box-sizing:border-box;grid-column:1/4;grid-row:1/4;}
.grid-pile span {font-size:large;padding:0.5em;color:#483d8b;background-color:#7fffd4;box-sizing:border-box;width:max-content;grid-column:1/2;grid-row:2/3;margin-left:3em;}

画像に重ねる文字のスペースが狭いと文字が入り切らずに改行されてデザインが変わってしまう。避けるためにはレイアウトを区分けしない場合と同様に文字のスペースを十分に大きく取れば（または文字を適切に小さくしても）大丈夫だけど、さらにスペースの文字に「width:max-content」を指定すると文字に合わせてスペースを自動的に広げられもする。レイアウトに想定されるスペースよりも文字自体のアイテムの大きさが優先されるので、画像に重ねる文字のスペースが文字よりも狭くならず、改行されずに表示されるようになる。レスポンシブだと画像に文字を重ねても画面幅によってデザインが伸縮して崩れ易いけど、しかしグリッドデザインを使って画像と文字の比率を踏まえながらそれぞれのスペースを合わせて配置するとバランスを保てる可能性は高い。.grid-pile {display:grid;}.grid-pile img {border:1px #000000 solid;box-sizing:border-box;}.grid-pile span {font-size:large;padding:0.5em;color:#483d8b;background-color:#7fffd4;box-sizing:border-box;}.grid-pile-1 img {grid-column:1/4;grid-row:1/4;} .grid-pile-1 span {grid-column:2/3;grid-row:2/3;}.grid-pile-2 img {grid-column:1/4;grid-row:1/4;}.grid-pile-2 span {grid-column:3/4;grid-row:1/2;}.grid-pile-3 img {grid-column:1/7;grid-row:1/7;}.grid-pile-3 span {grid-column:2/4;grid-row:2/3;}.grid-pile-4 img {grid-column:1/4;grid-row:1/4;}.grid-pile-4 span {grid-column:3/4;grid-row:1/2;margin-top:1em;margin-right:1em;}.grid-pile-layout {grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;justify-items:center;align-items:center;}.grid-pile-5 img {grid-column:1/4;grid-row:1/4;}.grid-pile-5 span {grid-column:2/3;grid-row:3/4;}.grid-pile-6 img, .grid-pile-7 img {grid-column:1/4;grid-row:1/4;}.grid-pile-6 span {grid-column:1/2;grid-row:2/3;margin-left:3em;}.grid-pile-7 span {grid-column:1/2;grid-row:2/3;margin-left:3em;width:max-content;}