Paragraph design and layout using CSS

2021年4月25日

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

例えば、上の例は序論として「説明だから少し長めのテキストをページの頭に配置したい」というときに必要なデザインである。複数行に跨る場合を想定しているのでこういうデザインが有効である。

また、前ページからの流れをこのページで変更したいときに使いたい。全ページに必須ではない。時折現れるから訴求力がある。

このテキストの左に現れているのは段落のセクションの区切りのようなものだ。段落の内容の区切れで先頭に使う。

アイコンには「Fontawesome」を使う。連続で使いたい場合はこんな具合である。

他にもメモしておきたいものも挙げておこう。


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

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

グリッドレイアウト極める

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

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

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

レスポンシブには 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?、というようなことをブレイクポイント毎に全て算出していけば出来上がる。

ROCK
2030
MUSIC
FESTIVAL
TOKYO BIG APPLE
JULY 7 - 8 / PM 19:00

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

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

グリッドレイアウトのアイテムを個々に配置するプロパティ

2021年4月28日

グリッドアイテムの個別配置は水平方向と垂直方向の二つを組み合わせて使う

A
B
C
D
E
F
G
  • (A) 左+下 詰め
    justify-self: start; align-self: end;
  • (B) 左+上 詰め
    justify-self: start; align-self: start;
  • (C) 左+中 詰め
    justify-self: start; align-self: center;
  • (D) 右+上 詰め
    justify-self: end; align-self: start;
  • (E) 右+下 詰め
    justify-self: end; align-self: end;
  • (F) 右+中 詰め
    justify-self: end; align-self: center;
  • (G) 中+中 詰め
    justify-self: center; align-self: center;

グリッドレイアウトで配置した文字列をjQueryを使って作られたスクリプト Arctext.js でアーチ状に配置する

更にグレードアップさせるためにはどんな方法があるだろう?ここではふたつの方法を追加してみた。

フォントを追加、文字列を曲線で配置してみた。

ポスター
グリッド アイテム
メニュー