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

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

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

2021年02月26日(金)

樋口大輔

0

4

PV 23

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

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

2カラム

ここは1カラム目です。

ここは2カラム目です。

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

3カラム

1カラム目です。

2カラム目です。

3カラム目です。

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

メディアと文章

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

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

グリッド

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

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

カバー

青い空、美しい地平線

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

カバー(メディア背景)

僕のこと、見ててね

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

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

Share プリーズ
書き手は私 樋口大輔

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

この記事のタイトル
Webページブロック集【レイアウト編】
感想を送るノート
お名前必須
メールアドレス必須
ご意見・ご感想必須

ご入力いただいた内容は、当社プライバシーポリシーに基づき厳重に管理いたします。メールの返信以外には使用しません。プライバシーポリシーに同意の上、お進みください。


表示された5文字の英数字を入力してください。

確認画面はありません。
いったんページの上部に戻りますが、問題なく送信されます。

キタックCGSCコアメンバー

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