デザインが邪魔しないように、ページの見出しや段落が目的別に認識し易くなるデザインを加えてみよう

---

次は見出し要素を装飾したいときの例だ。 見出しのテキストサイズや長さによってデザインを再考する必要が生じる。

見出しに使うデザインは、他のページでも常時お目見えするものだから、飽きの来ない統一性のあるカラーのデザインが求められる。

以前、グリッドレイアウトは何度も練習を重ねてコツを習得することが必要だというようなことを書いた。自由自在に操ることが出来るようになれば、各段に差がつくデザイン・レイアウトが完成するのは間違いない。

「バックイメージとテキストをピタッとはめる」でトップページのデザインを練習した。振り返ると、まだまだ未熟である。今回はもっと奥深く切り込んでいこう。

ポスターデザインとタイポグラフィを脳裏に浮かべながら、正確に下を作ってみた。今のところ全画面の一部に於いて使っているが、何れ全ページに展開できたらと思う。

レスポンシブには vw を使う

今回のグリッドレイアウトのレスポンシブのポイントは幅である。幅から全てが始まる。どういうことかというと、本ページのPC向けレイアウトは2columnである。幅は「vw」の単位で作る。フォントサイズも「vw」で行う。

---

ここでおさらい。「vw」はviewport widthのことでビューポートの幅に対する割合を指す。本PCのビューポートをピクセルで表すと1280pxで100vw。

本ページのPC向けレイアウトは「body: 70%;」で組んであるから、「70vw」でコンテンツを表示している。2column だから35vw。「column-gap: 2rem;」の分を差し引いて、グリッドレイアウトの幅を二等分より少しだけ短く「32vw」に設定し、水平方向に中央寄せで表示させた。

---

そして、表示させたいテキストを順に位置指定しながらフォントサイズを「vw」で設定していく。完璧に配置されたPC向けグリッドをまず完成させる。このグリッドレイアウトの幅の「32vw」が全ての基準値となる。

レスポンシブに展開するには、幅が32vw 、#itemAのフォントサイズが 8.6vwであれば、幅63vwの場合の#itemAのフォントサイズは何vw？、マージンは何vw？、というようなことをブレイクポイント毎に全て算出していけば出来上がる。

より理解を深めたのは、グリッドレイアウトのアイテムの配置についてだった。

次のページでグリッドレイアウトのアイテムを個々に配置するプロパティについて纏めた。習得することに因って、スピーディーにアイテムを配置することが可能だ。