2/17 [HTML] class と id
- class と id
class と id
原理原則では、汎用性(class)と個別性(id)
現実的には必ずしもその通りではない
横並びの時 divが必要
縦並びの時 divが不要
【演習】floatを使ったレイアウト
問題：以下のように表示されるように記述しなさい
- 各空き（白色部）は「10px」
- 各ブロックの背景色は、文字の可読性を考えて指定をすること
- conatiner幅「800px」
- paddingを利用する場合、conatiner幅は「800px-(padding左右を足した値)」になる
- headerとfooterの高さは「50px」、contentとsidebarの高さは「300px」
- content幅は「550px」
- navの高さは「3em」
- 優先順位は、content→sidebarの順
- navは、headerの下部
- liにborderを設定した場合の計算もすること（2px）
- liの最後は、「class」で設定すること（last-child疑似クラスは使用しない）
- borderではなく、marginの設定でもOKとします
- navの擬似クラスは、適宜設定する
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>floatを使ったレイアウト：テスト</title> <link rel="stylesheet" href="css/style1.css"> </head> <body> <div id="container"> <div id="header">ここにheaderの内容が入る</div> <div id="nav"> <ul> <li><a href="#">カテゴリ1</a></li> <li><a href="#">カテゴリ2</a></li> <li><a href="#">カテゴリ3</a></li> <li><a href="#">カテゴリ4</a></li> <li class="last"><a href="#">カテゴリ5</a></li> <!--<div class="last"><li><a href="#">カテゴリ5</a></li> </div> --> </ul> </div><!--/#nav --> <div id="wrapper"> <div id="content">ここにcontentの内容が入る</div> <div id="sidebar">ここにsidebarの内容が入る</div> </div><!--/#wrapper --> <div id="footer">ここにfooterの内容が入る</div> </div><!--/#container --> </body> </html>
[実行結果]
【演習】1カラムレイアウト
見本
HTML
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>石垣島観光ガイド</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div id="header"> <h1>石垣島観光ガイド</h1> </div><!-- header --> <div id="content"> <p class="lead">石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。亜熱帯気候のため、マングローブの森や色とりどりの南国の花が咲き、赤瓦屋根の民家、そして何よりも、鮮やかなコバルトブルーの海岸は、多くの観光客をひきつけ、特にダイバーやシュノーケリングを楽しむ人にとっては格好の場所になっています。</p> <h2>観光スポット</h2> <h3>「 川平（かびら）湾」</h3> <h4>石垣港から車で約20分</h4> <p>石垣を代表する景勝地で、エメラルド色のサンゴ礁と黒真珠の養殖でよく知られています。 潮の流れが早いため、遊泳は禁止されています。</p> <h3>「宮良川（みやらがわ）のヒルギ林」</h3> <h4>石垣港からバスで30分宮良橋で下車</h4> <p>巨大なマングローブ林（ヒルギ群落）があり、国の天然記念物に指定されているほど壮大です。</p> <h3>「底地（すくじ）ビーチ 」</h3> <h4>川平湾から車で約10分</h4> <p>マリンスポーツが楽しめ、マンタが見られることから、ダイバーに人気があります。</p> <h3>「フサキビーチ」</h3> <h4>石垣港からバスで30分、宮良橋下車</h4> <p>島の西側にあるビーチで、西表（いりおもて）島に沈む美しいサンセットが見られるビーチとして有名です。</p> <h3>「米原海岸」</h3> <h4>石垣空港より車で約30分</h4> <p>米原キャンプ場が隣接していて、ビーチパーティが楽しめます。潮の流れが早いため、遊泳は禁止されています。</p> <h3>「マエザトビーチ」</h3> <h4>石垣空港より車で約5分</h4> <p>ホテル内にあるリゾートビーチですが、宿泊者以外でも利用可能です。ファミリー向けリゾート地で、 シュノーケルのレンタルもあります。</p> </div><!-- content --> <div id ="footer">©石垣島観光ガイド</div> </div><!-- container--> </body> </html>
@charset "utf-8";
/* リセット */
html, body, div, h1, h2, h3, h4, p {
margin: 0;
padding: 0;
line-height: 1.0em;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
font-size: 16px;
}
body {
/* margin: 10px auto;;
padding: 10px;
width: 800px;
line-height: 1.2em;*/
font-size:16px;
background:#D8EAFF;
}
/* 全体 */
#container {
margin: 10px auto;
padding: 10px;
width: 780px;
background-color: #FFF;
height: auto;
}
#header {
width: 750px;
height: 250px;
margin: 15px auto;
/*padding: 10px;*/
background:url(../img/sea.jpg) no-repeat left top;
}
#header img {
width:50%;
}
#content {
width: 750px;
margin: 10px auto;
padding: 10px;
}
h1 {
padding: 180px 0px 0px 510px;
font-size: 26px;
color:#FFF;
}
h2 {
margin: 15px auto;
padding: 0 15px;
font-size: 20px;
line-height:1.5em;
/* line-height: inherit;*/
color: #000066;
border-left: 10px solid #0066FF;
border-bottom: 15px;
}
h3 {
padding: 12px 0 10 10px;
/*margin: 20px auto;*/
font-size: 16px;
color:#000099;
background:#EEEEF8;
line-height: 2.0em;
border-top: thin dotted #000099;
border-bottom: thin dotted #000099;
}
h4 {
margin: 10px auto;
font-size: 15px;
color: #0099CC;
}
.lead {
font-size: 14px;
text-indent: 1em;
margin-bottom: 24px;
}
p {
font-size: 14px;
line-height: 1.5em;
margin-bottom: 18px;
}
#footer {
margin: 30px 0 0 0;
padding: 30px auto;
line-height: 3.5em;
text-align: center;
font-size: 12px;
border-top: thin dotted #999;
}
[習作]
