【随時更新】とにかく色んなメニューのレイアウトを作ってみるページ
はじめに
自分のレイアウトの引出とコーディング方法の確認のために、とにかく「色々なメニューレイアウトを作るページ」を作ってみました。
「こういうレイアウトもあるな。」と分かれば順次追加していく予定です。
ソースも紹介していくとページが物凄い長さになりそうなので、現状公開は考えていません。
目次
画像、見出し、テキスト、（リンクボタン）の縦並びレイアウト
仕上がりイメージ01_01
画像、見出し、テキストの並びのシンプルなレイアウト
見出し
テキストテキストテキストテキストテキストテキストテキスト
見出し
テキストテキストテキストテキストテキストテキストテキスト
仕上がりイメージ01_02
画像下の見出しに背景色を入れたレイアウト
見出し
テキストテキストテキストテキストテキストテキストテキスト
見出し
テキストテキストテキストテキストテキストテキストテキスト
仕上がりイメージ01_03
テキストの下部にリンクボタンを配置したレイアウト
仕上がりイメージ01_04
見出し、テキストの左側に縦線を入れたレイアウト
見出し
テキストテキストテキストテキストテキストテキストテキスト
見出し
テキストテキストテキストテキストテキストテキストテキスト
仕上がりイメージ01_05
画像の上から半透明の見出しを置いたレイアウト（画像の下部に配置）
見出し
テキストテキストテキストテキストテキストテキストテキスト
見出し
テキストテキストテキストテキストテキストテキストテキスト
仕上がりイメージ01_06
見出しにワンポイントを追加したレイアウト
見出し
テキストテキストテキストテキストテキストテキストテキスト
見出し
テキストテキストテキストテキストテキストテキストテキスト
仕上がりイメージ01_07
画像の上から半透明の見出しを置いたレイアウト（画像の上部に配置）
見出し
テキストテキストテキストテキストテキストテキストテキスト
見出し
テキストテキストテキストテキストテキストテキストテキスト
仕上がりイメージ01_08
画像を正円にトリミングしたレイアウト
見出し
テキストテキストテキストテキストテキストテキストテキスト
見出し
テキストテキストテキストテキストテキストテキストテキスト
仕上がりイメージ01_09
見出しに英語表記を追加したレイアウト
見出しtitletext
テキストテキストテキストテキストテキストテキストテキスト
見出しtitletext
テキストテキストテキストテキストテキストテキストテキスト
仕上がりイメージ01_10
テキストの下にリンクをリスト形式で追加したレイアウト
画像の中に見出し、テキストを入れるレイアウト
仕上がりイメージ02_01
見出し
見出し
仕上がりイメージ02_02
見出し
テキストテキストテキストテキストテキストテキストテキスト
見出し
テキストテキストテキストテキストテキストテキストテキスト
