Webページブロック集、今回はレイアウト編です。
レイアウトによく使うブロック(Web表現)を紹介していきます。
ちなみに前回のコア編はこちらから。
2カラム
ここは1カラム目です。
ここは2カラム目です。
「カラム」です。「列」という意味ですね。
3カラム
1カラム目です。
2カラム目です。
3カラム目です。
3カラムのパターンも多く見られますね。
メディアと文章
![](https://cgsc.info/cgsc2020/wp-content/uploads/2021/01/godfather.png)
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
こんな感じで、メディア(画像とか動画とか図表とか)と文章を並べるレイアウトもよくあります。
グリッド
![](https://cgsc.info/cgsc2020/wp-content/uploads/2021/01/kuchibue_blue.png)
青いパネル
![](https://cgsc.info/cgsc2020/wp-content/uploads/2021/01/くちぶえ_blackblue.png)
黒いパネル
![](https://cgsc.info/cgsc2020/wp-content/uploads/2020/10/くちぶえコラム.png)
黄色いパネル
![](https://cgsc.info/cgsc2020/wp-content/uploads/2020/10/kuchibue.png)
紫のパネル
「グリッド」と言ったりするんですが、タイル状に要素(ここではパネルと呼んでます)を並べるレイアウトも目を引きますね。いろんな選択肢を一覧しやすい、というメリットがあります。
カバー
青い空、美しい地平線
呼び方はいろいろですが、ブロックいっぱいに背景色を引いて、その上に文字を載せるレイアウトもありますよね。キービジュアルとか。ここでは「カバー」と呼んでおきます。
カバー(メディア背景)
僕のこと、見ててね
背景を画像にすると、よりいい雰囲気を醸し出せそうです。動画を背景にすることもできます。
いったんここまでです!
また思いついたら更新します。
よろしければどうかご感想を!
※コメントは、サイト管理者による承認後、ページに表示されます。
この記事は、感想を受け付けていません