12日目 グループ化 float と hederの画像埋め込み
グループ化とfloat
★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">ここに＃headerの内容が入る</div>
<div id="nav">ここに＃navの内容が入る</div>
<div id="wrapper">
<div id="content">ここに＃contentの内容が入る</div>
<div id="sidebar">ここに＃sidebarの内容が入る</div>
</div><!--#wrapper-->
<div id="footer">ここに＃footerの内容が入る</div>
</div><!--#container-->
</body>
</html>
★stylesheet★
@charset "utf-8";
/* CSS Document */
html, body /*divは入れなくてもok*/ {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
body {
background: #CCC;
font-size: 16px;
}
div#container {
width: 780px;
margin: 0 auto;
background: #FFF;
padding: 10px; /*paddingをつけると幅が広がるからその分widthをひく*/
}
div#header {
margin-bottom: 10px;
height: 100px;
background: #9CF;
}
div#nav {
margin-bottom: 10px;
height: 60px;
background: #FCF;}
div#wrapper {
margin-bottom: 10px;
overflow: hidden; /*回り込みじゃない浮かせているだけの場合はこれだけで解除になる・中のcontentの高さを適用させてくれる・heightは使わない（浮いてるから）*/
background: #FFF;
}
div#content {
float: right; /*wrapperの中のタグには全部floatをつけないとだめ*/
width: 570px;
height: 300px;
background: #F3F;
}
div#sidebar {
float: left; /*wrapperの中のタグには全部floatをつけないとだめ*/
width: 200px;
height: 300px;
background: #939;
}
div#footer {
height: 60px;
background: #999;
} /*回り込みのときはclear: bothが必要・今回は回りこみじゃなくて浮かせてるだけ*/
画像の埋め込み
★HTML★
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="CSS/style2.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>石垣島観光ガイド</h1>
</div><!--#header-->
</div><!--#container-->
</body>
</html>
★stylesheet★
@charset "utf-8";
/* CSS Document */
html, body, h1 {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
body {
font-size: 16px;
background: #6FF;
}
div#container {
width: 760px;
height: 400px;
margin: 0 auto;
padding: 20px;
background: #FFF;
}
div#header {
height: 200px;
background: url(../img/h1_bg.png) no-repeat center top;
}
h1 {
padding: 160px 0px 20px 490px;
color: #FFF;
}
画像のつくり方（トリミング）
画像をphotoshop上で開く
長方形選択ツールを使う
上のスタイルを標準→固定へ変更
ほしいサイズの幅・高さを変更して画面上でドラッグ
切り抜きたい範囲が決まったら
ツールバーのイメージから切り抜きを選択
