【随時更新】とにかく色んなメニューのレイアウトを作ってみるページ

はじめに

自分のレイアウトの引出とコーディング方法の確認のために、とにかく「色々なメニューレイアウトを作るページ」を作ってみました。

「こういうレイアウトもあるな。」と分かれば順次追加していく予定です。

ソースも紹介していくとページが物凄い長さになりそうなので、現状公開は考えていません。

目次

画像、見出し、テキスト、(リンクボタン)の縦並びレイアウト

仕上がりイメージ01_01

画像、見出し、テキストの並びのシンプルなレイアウト

dummy

見出し

テキストテキストテキストテキストテキストテキストテキスト

dummy

見出し

テキストテキストテキストテキストテキストテキストテキスト

仕上がりイメージ01_02

画像下の見出しに背景色を入れたレイアウト

dummy

見出し

テキストテキストテキストテキストテキストテキストテキスト

dummy

見出し

テキストテキストテキストテキストテキストテキストテキスト

仕上がりイメージ01_03

テキストの下部にリンクボタンを配置したレイアウト

dummy

テキストテキストテキストテキストテキストテキストテキスト

BUTTON
dummy

テキストテキストテキスト

BUTTON

仕上がりイメージ01_04

見出し、テキストの左側に縦線を入れたレイアウト

dummy

見出し

テキストテキストテキストテキストテキストテキストテキスト

dummy

見出し

テキストテキストテキストテキストテキストテキストテキスト

仕上がりイメージ01_05

画像の上から半透明の見出しを置いたレイアウト(画像の下部に配置)

dummy

見出し

テキストテキストテキストテキストテキストテキストテキスト

dummy

見出し

テキストテキストテキストテキストテキストテキストテキスト

仕上がりイメージ01_06

見出しにワンポイントを追加したレイアウト

dummy

見出し

テキストテキストテキストテキストテキストテキストテキスト

dummy

見出し

テキストテキストテキストテキストテキストテキストテキスト

仕上がりイメージ01_07

画像の上から半透明の見出しを置いたレイアウト(画像の上部に配置)

dummy

見出し

テキストテキストテキストテキストテキストテキストテキスト

dummy

見出し

テキストテキストテキストテキストテキストテキストテキスト

仕上がりイメージ01_08

画像を正円にトリミングしたレイアウト

dummy

見出し

テキストテキストテキストテキストテキストテキストテキスト

dummy

見出し

テキストテキストテキストテキストテキストテキストテキスト

仕上がりイメージ01_09

見出しに英語表記を追加したレイアウト

dummy

見出しtitletext

テキストテキストテキストテキストテキストテキストテキスト

dummy

見出しtitletext

テキストテキストテキストテキストテキストテキストテキスト

仕上がりイメージ01_10

テキストの下にリンクをリスト形式で追加したレイアウト

dummy

見出し

テキストテキストテキストテキストテキストテキストテキスト

dummy

見出し

テキストテキストテキストテキストテキストテキストテキスト

画像の中に見出し、テキストを入れるレイアウト

仕上がりイメージ02_01

見出し

見出し

仕上がりイメージ02_02

見出し

テキストテキストテキストテキストテキストテキストテキスト

見出し

テキストテキストテキストテキストテキストテキストテキスト