-shirohana-
-HTML-
<body> <div id="wrap"> <header> <h1><img src="images/Shirohana_02.png" alt="shirohana"></h1> </header> <main> <p><img src="images/Shirohana_07.png" alt="メッセージ"></p> </main> <nav> <ul class="clearfix"> <li>ホーム</li> <li>メニュー</li> <li>インフォメーション</li> <li>アクセス</li> </ul> </nav> </div> </body>
-CSS-
@charset "UTF-8"; *{ margin: 0; padding: 0; } .clearfix:after { content: ""; display: block; clear: both; } img { vertical-align: bottom; } #wrap { width: 800px; margin: 0 auto; background: #231815; color: white; } header { line-height: 69px; } main { width: 100%; height: 450px; background: url(images/Shirohana_06.jpg) no-repeat center center / cover; position: relative; } main p { position: absolute; top: 25px; right: 100px; } nav { line-height: 80px; } ul { width: 560px; margin: 0 auto; list-style: none; } li { padding: 0 10px; float: left; font-family: 'UD デジタル 教科書体 N-B'; font-size: 24px; }