キタックCGソリューションセンター

自分で触りたいWeb担のためのTips集

Webページブロック集【レイアウト編】

2021年02月26日(金)

PV 35

Webページブロック集、今回はレイアウト編です。
レイアウトによく使うブロック(Web表現)を紹介していきます。

ちなみに前回のコア編はこちらから。

2カラム

ここは1カラム目です。

ここは2カラム目です。

「カラム」です。「列」という意味ですね。

3カラム

1カラム目です。

2カラム目です。

3カラム目です。

3カラムのパターンも多く見られますね。

メディアと文章

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

こんな感じで、メディア(画像とか動画とか図表とか)と文章を並べるレイアウトもよくあります。

グリッド

青いパネル
黒いパネル
黄色いパネル
紫のパネル

「グリッド」と言ったりするんですが、タイル状に要素(ここではパネルと呼んでます)を並べるレイアウトも目を引きますね。いろんな選択肢を一覧しやすい、というメリットがあります。

カバー

青い空、美しい地平線

呼び方はいろいろですが、ブロックいっぱいに背景色を引いて、その上に文字を載せるレイアウトもありますよね。キービジュアルとか。ここでは「カバー」と呼んでおきます。

カバー(メディア背景)

僕のこと、見ててね

背景を画像にすると、よりいい雰囲気を醸し出せそうです。動画を背景にすることもできます。

いったんここまでです!
また思いついたら更新します。

Share プリーズ

よろしければどうかご感想を!

※コメントは、サイト管理者による承認後、ページに表示されます。

この記事は、感想を受け付けていません

書き手は私

キタックCGSCコアメンバー

  • 樋口大輔
  • 小林将太
  • ちゃんまき
  • 高橋どらみ
  • 高橋皓一
  • 笠井
  • 石本
  • 佐藤サバ美
  • こめ
  • 佐久間尭