HTML:h1の扱い
★h1とpについては、必ず文章を入力すること!
★画像にしてはいけない。大企業だけが、画像をいれることをしてよい。
★検索するひとは、会社名でなく、地域やサービス内容で検索する。
※サイトについて、画像と文章が一致していませんが、練習のため。
観光ガイド_復習:完成版にリンク
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>観光ガイド_復習</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <header> <h1>浅草観光ガイド</h1> <p class="lead">石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。亜熱帯気候のため、マングローブの森や色とりどりの南国の花が咲き、赤瓦屋根の民家、そして何よりも、鮮やかなコバルトブルーの海岸は、多くの観光客をひきつけ、特にダイバーやシュノーケリングを楽しむ人にとっては格好の場所になっています。</p> </header> </div><!-- /#conteiner --> </body> </html>
@charset "UTF-8"; /* CSS Document */ /*reset*/ html,body,h1,p,header { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } body { font-size: 16px; background: #FFF url(img/back.jpg); } img { border: none; vertical-align: bottom; } /*----------------------------------*/ /*どのような画面でも見やすい文字に自動調整する機能(モバイル対応)*/ /* font-size */ html { font-size: 62.5%; } /* =10px */ body { font-size: 16px; font-size: 1.6rem; } /* =16px */ h1 { font-size: 32px; font-size: 3.2rem; } h2 { font-size: 24px; font-size: 2.4rem; } h3 { font-size: 20px; font-size: 2.0rem; } h4 { font-size: 18px; font-size: 1.8rem; } p { font-size: 16px; font-size: 1.6rem } /*body*/ body { background: #9BB9AB; } /*---------------------------*/ #container { width: 760px; margin: 0 auto; padding: 20px; background: #FFF; } h1 { width: 730px; height: 170px; /*最初は画像の高さで指定して、padding後にいらない高さを削る*/ color: #FFF; text-align: right; padding: 150px 100px 0 0; background: url(img/skytree_trim.jpg) no-repeat; } .lead { line-height: 1.5; }