■ Webデザインを学ぶ【初級/後編】,  ◎ レイアウトを学ぶ

レイアウト基本練習②

Webサイトは、「画像」と「テキスト」がペア組みとなり、一つの要素となっているものが非常に多くあります。そのペアの仕様も画像の横にテキストが配置されていたり下に配置されていたり大きさも様々です。要は、画像に対する説明や情報が紐付けされているというわけですね。ショッピングサイトなら、そこに値段や簡単な説明や仕様が紐付いていたりします。

サムネイルと呼ばれる、少し小さめな写真が並んでいるのを誰しも見たことがあるでしょう。


【参考】無印良品:https://www.muji.net/store/

このような配置は、Webサイトでは、切っても切り離せない要素です。

ヤフーのトップページを見ても画像とテキストのペアで溢れています。要は、画像とテキストとの組み合わせのペアを繰り返し、そのペアをフロート(横並び)にさせます。このパターンを習得しないとコーディーングは網羅できませんので、何度も練習して習得しましょう。