レイアウト基本練習③
ホテルニューオオニタ
サムネイル(画像)・タイトル・説明の3つの要素をひとつの要素として扱います。li要素やp要素を使ってアークアップしているサイトも多くありますが、それぞれを
dl要素でグルーピング
を推奨したいと思います。レスポンシブに対応する場合、スマホはdl要素をそのまま縦に整列し、PCデバイスの場合は横に整列するようにします。
【テキスト素材】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<header> <h1>ロゴマーク</h1> <ul> <li>なんちゃってホテルズ</li> <li>会員情報</li> </ul> </header> <nav> <ul> <li><a href="#">宿泊</a></li> <li><a href="#">レストラン＆バー</a></li> <li><a href="#">ウエディング</a></li> <li><a href="#">会議＆宴会</a></li> <li><a href="#">イベント</a></li> <li><a href="#">ホテル施設</a></li> </ul> </nav> <h2>日本料理</h2> <h3>鉄板焼</h3> <dl> <dt>イメージ画像</dt> <dd><a href="#">やきやき</a></dd> <dd>大阪城の雄姿をご覧いただける絶景のロケーションで、 シェフのあざやかな手さばきと厳選素材の美味しさを存分に お楽しみください。</dd> </dl> <h3>割烹</h3> <dl> <dt>イメージ画像</dt> <dd><a href="#">季処 まごころ</a></dd> <dd>春夏秋冬、芳醇な旬のよろこびを皆さまのお席に。 各地の銘酒とともに、お召し上がりください。</dd> </dl> <h3>寿司</h3> <dl> <dt>イメージ画像</dt> <dd><a href="#">なかた寿司</a></dd> <dd>全国各地から、その日の朝にとれた 天然の魚貝類を多く取り入れたなかた寿司。</dd> </dl> <h3>うどん・そば・季節ごはん</h3> <dl> <dt>イメージ画像</dt> <dd><a href="#">御そば処 なかむら</a></dd> <dd>伝統ある麺類と季節御飯の店。</dd> </dl> <h3>焼肉</h3> <dl> <dt>イメージ画像</dt> <dd><a href="#">叙々苑 もりもり</a></dd> <dd>高級であるより、一流でありたい。 大阪初舞台</dd> </dl> <h3>日本料理</h3> <dl> <dt>イメージ画像</dt> <dd><a href="#">てんやわんや店</a></dd> <dd>伝統と粋、匠の技</dd> </dl> <footer> このサイトは、サンプルです。実在しません。<br /> Copyright © ホテルなんちゃって All Rights Reserved. </footer> |
▶ サンプルを見る