ブログ作成 その２
ブログ作成その２ではコンテンツを<div>でグループ分けし、CSS（スタイルシート）を設定していきます。
2-1.<div>でグループ分けをする
<div>は特定の意味を持ちませんが、コンテンツをグループ化することができます。ここでは、先ほど作成したHTMLコードの各コンテンツをグループ分けしていきたいと思います。グループ分けしたHTMLの例は下のようになります。青い文字の部分が追加で入力したコードです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>とものブログ</title>
</head>
<body>
<div class="pagebody">
<div class="header">
<h1>とものブログ</h1>
</div>
<div class="nav">
<ul>
<li>ホーム</li>
<li>最新記事</li>
<li>お役立ち情報</li>
<li>おすすめ商品</li>
<li>お問い合わせ</li>
</ul>
</div>
<div class="section">
<h2>日記</h2>
<p>その日の出来事を掲載しています。</p>
<div class="article">
<h3>7月18日</h3>
<p>今日は友達と軽井沢へサイクリングに行きました。とても風が気持ちよく、一日中自転車で、いろいろな場所を観光しました。途中でたまたま見つけたレストランが気になったので昼食をそこで取りました。そこで食べたオムライスがとてもおいしかったです。</p>
</div>
<div class="article">
<h3>7月19日</h3>
<p>今日は仕事の帰りに、彼女と花火を見に行きました。車で行くと渋滞していたり、駐車場が空いていなかったりと不便になるだろうと思い、電車で行きました。</p>
<p>人の込み具合がすごくて、座って見られる場所がなく、住宅街をウロウロしていたら、そこに住んでいる近所の方々に誘ってもらい、絶好の穴場スポットで花火を見ることができました！</p>
</div>
</div>
<div class="footer">
<address>Copyright 2014 とものブログ All Rights Reserved.</address>
</div>
</div>
</body>
</html>2-2.<div>の解説
<div>にclassコンテンツ属性を使用し、任意の名前をつけることで他の<div>と区別することができます。ここではpagebody,header,nav,section,article,footerという名前をつけてグループ分けしてあります。画像で説明すると下のようになります。
なぜグループ分けする必要があるのか？それは次の項でも説明しますが、各<div>をCSS(スタイルシート)を使用してそれぞれをデザインしていくためです。
2-3.CSS(スタイルシート)を設定する
ブログの作り方を解説する上で、とても重要になってくるCSS（スタイルシート）についてです。HTMLを文字を入力する機能とするならば、CSSはデザインをする機能といえます。いろいろな設定をすることで多様なデザインをすることができます。
まずはHTMLコード内にCSSを反映させる記述をしていきましょう。<head>内に下の青文字部分を追加入力します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/sample.css" rel="stylesheet" type="text/css">
<title>とものブログ</title>
</head>
<body>
～省略～
</body>
</html>入力できたら上書き保存して完了です。
2-4.CSSにテキストを入力する
ではCSSファイルを作成していきましょう。まずはメモ帳を開き下のテキストを入力していきます。
@charset "utf-8";
body {
margin:0;
padding:0;
}
div.pagebody {
width: 900px;
margin: 30px auto;
border: solid 1px #666666;
}
入力し終わったら最初に作成したcssフォルダ内に名前をつけて保存します。拡張子を.css、文字コードをUTF-8にすることを忘れないようにしましょう。ここでは名前をsample.cssとして保存していきます。
保存できたら
のように表示されたと思います。
(大アイコンで見た場合。)
| margin | 外側の余白を設定します。 |
| padding | 内側の余白を設定します。 |
| width | 横幅を設定します。 |
| margin: 30px auto; | 上下の余白を30px離し、横の余白をautoとすることで中央に表示されます。 |
| border | 枠線を設定します。ここでは線の種類をsolid、太さを1px、色を#666666に設定しています。 |
入力できたら上書き保存し閉じます。tomoblog.htmlを見てみましょう。下のサンプルのようになったと思います。
サンプルはこちら↓
<div class="pagebody">が枠線、幅を固定、中央で表示されるようになりました。
