【web演習Level.6】メインカラムをCSSで整えよう!

メインカラムをCSSで整えよう!

前回『簡単なCSSに触れてみよう!』では簡単なCSSについてご紹介しました。

これからから数回に渡り、サイト全体をCSSで整えていこうと思います!

今回は前回までで作成しているメインカラムを整えます。
使用するCSSの解説も挟みながら行いますが、細かい部分に関しては『HTMLクイックリファレンス』さんをご参照ください。
HTMLタグにid / classを定義付ける
CSSを有効的に使うため、HTMLタグにidやclassを定義付けます。

この際、全ての要素にidやclassを付けると余りにも煩雑になってしまいますので、定義付けは必要最低限に抑えるよう心がけましょう。

最初のうちは“何が必要で何が不要か”という判断が難しいかもしれませんが、コードもデザインと同じで「要らないものは削る」という意識を持っておけば次第に掴めてきます。

さて、下記が前回までのコードを元に、id / classを割り振ったものです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>web演習用テストページ</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="main">
<img src="image.jpg" width="690" height="370" alt="Welcome to my homepage!"><br>

<h2 id="title_main" class="align_center">Welcome to my homepage!</h2>
<p class="align_center">
このホームページはDesignCo+Laboのwebデザイン演習で使用する仮想のホームページです。<br>
ヘッダ・メインカラム・サイドカラム・フッタという一般的なwebサイトの構造のうちの一つです。
</p>

<ul id="list_marker">
<li>ロゴ素材は「<a href="http://www.logoinstant.com/" target="_blank">Logo Instant</a>」のものを使用しています。</li>
<li>トップページとバナーの写真素材は「<a href="http://www.stockvault.net/" target="_blank">stockvault</a>」のものを使用しています。</li>
</ul>
</div>
</body>
</html>
CSSの記述が多くなってきますので、前回head内に記述していた形から、外部ファイル『main.css』から読み込むという形に変更しております。

id / class名に“こう名付けなければならない”という絶対的なルールはありません。

ですが、後々CSSファイルを編集する際、id / class名を見て、どの要素に使われているものかということが判別できる名前にはしておきましょう。

特にひとつのWebサイトを複数人で管理する場合などは、他の人が見ても分かる名前にすることを、より意識しておきたいですね。

これでindex.html内のタグへの、id / classの定義付けが完了しました。
次はCSSファイルと、サイト内で使用する画像用フォルダの用意を行います。
画像用フォルダを用意する
画像ファイルは『img』や『image』等の専用フォルダを用意して、そこに収納します。
フォルダ分けする目的は、パッと見でどこに何があるかを把握しやすくためです。

今回メインカラムで使用する画像は下記の2点がありますので、写真画像を『image.jpg』、アイコン画像を『marker.gif』と名づけて『imgフォルダ』に保存します。
画像を切り分けるのが面倒な方は、下記リンクから圧縮ファイルをダウンロードし、フォルダ名を『img』に変更してご利用ください。
これにより写真画像の参照先が変わりますので、HTMLの該当部分のパスを変更します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>web演習用テストページ</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="main">
<img src="img/image.jpg" width="690" height="370" alt="Welcome to my homepage!"><br>

<h2 id="title_main" class="align_center">Welcome to my homepage!</h2>
<p class="align_center">
このホームページはDesignCo+Laboのwebデザイン演習で使用する仮想のホームページです。<br>
ヘッダ・メインカラム・サイドカラム・フッタという一般的なwebサイトの構造のうちの一つです。
</p>

<ul id="list_marker">
<li>ロゴ素材は「<a href="http://www.logoinstant.com/" target="_blank">Logo Instant</a>」のものを使用しています。</li>
<li>トップページとバナーの写真素材は「<a href="http://www.stockvault.net/" target="_blank">stockvault</a>」のものを使用しています。</li>
</ul>
</div>
</body>
</html>
ディレクトリの階層が変わる場合は『/』を用います。

ここでは『img/』でimgというディレクトリを指定しています。

例えば『imgフォルダの中にあるindexフォルダの中のmain.jpg』をパスで書く場合は、『img/index/main.jpg』となります。

これで画像用フォルダの用意は完了しました。
CSSファイルを用意する
CSSファイルの作成手順は、HTMLファイルの作成と同じ要領で行います。

新規テキストファイルを作成し、半角英数字で適当な名前を付けて拡張子を『.css』にするだけです。
今回は『main.css』という名前のCSSファイルを用意します。

『main.css』を作成したらファイルを開いて、前回記述したCSSを移し、更にHTMLで定義付けしたidそれぞれにスタイルを記述します。

まずはいつも通り全体を見せた後に、解説に移りたいと思います。
【main.css】
/* ベース設定 //////////////////////////////////////////////////// */
* {
margin:0;
padding:0;
}

body {
color:#333333;
font:13px/1.6em "メイリオ";
}

/* リンク設定 */
a 	{ color:#333333; text-decoration:underline; }
a:hover { text-decoration:none; }

/* 共通設定 ////////////////////////////////////////////////////// */
.align_center { text-align:center; }

/* メインカラム設定 ////////////////////////////////////////////// */
/* メインカラムの横幅 */
#main { width:690px; }

/* index設定 ///////////////////////////////////////////////////// */
/* メインカラムタイトル */
#title_main {
font-size:35px;
margin:30px 0;
}

/* マーカー付きのリスト */
#list_marker { margin-top:30px; }

#list_marker li {
padding-left:15px;
background:url(img/marker.gif) 0 1px no-repeat;
margin-bottom:5px;
font-size:11px;
line-height:1.2em;
}

#list_marker li, #list_marker a	{
color:#666666;
}
今後、回が進むごとに添削を行っていくことになると思いますが、現段階でのCSSはこんな感じになります。

では次に、これらが何をどうしているのかをパパッと解説。
【main.css】
/* ベース設定 //////////////////////////////////////////////////// */
* {		/*『*』は全ての要素を指定するタグ */
margin:0;	/* 全要素の外側の余白を0に */
padding:0;	/* 全要素の内側の余白を0に */
}

body {			/* body(サイト全体)の指定 */
color:#333333;		/* サイト内の文字色を#333333に */
font:13px/1.6em "メイリオ";
/* ↑サイト内の文字のサイズを13px、行間を1.6文字分でメイリオに */
}

/* リンク設定 */
a {				/* サイト全体のリンクの指定 */
color:#333333;			/* リンク文字色を#333333に */
text-decoration:underline;	/* リンク文字に下線を付ける */
}
a:hover {		/* サイト全体のリンクのマウスオーバー時 */
text-decoration:none;	/* マウスが乗るとtext-decorationの値無効 */
}

/* 共通設定 ////////////////////////////////////////////////////// */
.align_center {		/* class="align_center"の指定 */
text-align:center;	/* 文字の横位置を真ん中に */
}

/* メインカラム設定 ////////////////////////////////////////////// */
/* メインカラムの横幅 */
#main {		/* id="main"の指定 */
width:690px;	/* 横幅を680pxに */
}

/* index設定 ///////////////////////////////////////////////////// */
/* メインカラムタイトル */
#title_main {	/* id="title_main"の指定 */
font-size:35px;	/* フォントサイズを35pxに */
margin:30px 0;	/* 要素外側の上下余白を30px、左右余白を0pxに */
}

/* マーカー付きのリスト */
#list_marker {		/* id="list_marker"の指定 */
margin-top:30px;	/* 要素外側の上余白を30pxに */
}

#list_marker li {	/* id="list_maker"に含まれるliの指定 */
padding-left:20px;		/* 要素内側の左余白を30pxに */
background:url(img/marker.gif) 0 1px no-repeat;
/* ↑背景画像を右0px下1pxに移動して繰り返しなしで表示 */
margin-bottom:5px;		/* 要素外側の下余白を5pxに */
font-size:11px;			/* 文字サイズを11pxに */
line-height:1.2em;		/* 文字の行間を1.2文字分に */
}

#list_marker li, #list_marker a	{/* id="list_maker"に含まれるliとaの指定 */
color:#666666;			/* 文字色を#666666に */
}
こんな感じです。

『/*~*/』について…『/*』から『*/』で囲った範囲をコメントアウトします(CSS限定)
コメントアウトすることで、特定の範囲をプログラムに認識させないようにすることができます。

コメントアウトは一時的に効果を消したかったり、上記のようにメモに使ったりします。

ちなみに、HTMLでのコメントアウトは下記のように記述します。
<!-- この範囲がコメントアウトされます -->
さて、先ほどのコードを『main.css』に保存した状態で『index.html』をブラウザに表示してみましょう。

こんな感じになっていればOKです。

ちなみに、CSSにも文字コードが存在するので、HTMLと同じ文字コードに設定しましょう。
今回でいえば『main.css』の文字コードはUTF-8ですね。

少しあっさりしていますが、CSSファイルの設定はこれで完了です。
まとめ
今回から本格的に、CSS込みのコーディングに入っていきました。

CSSのプロパティを一つ一つ解説していると結構な量になってしまいますので、冒頭でも述べたように細かい部分に関しては『HTMLクイックリファレンス』さんをご参照ください。

こちらもHTMLタグと同じで、一気に覚える必要はありません。

どういったものが存在して、どのような場面でどう使うのか。
それを、この演習の中で触れて身につけてもらえれば幸いです。
次回は「HTMLでヘッダを構築する」
これまで構築してきたメインカラムは、これで一旦完成となります。

HTMLとCSSの基礎は今回で大体の部分をご紹介できたと思いますので、次回からは少しスピードアップをして進行していきたいと思います。

いまいち把握できていない部分があれば、調べたり聞いたりして飲み込めた上で、次回に臨んできましょう!