実際にHTMLでサイトを作ってみます。といっても、まずは大枠だけ。でも、これが分かれば、あとは使うタグを増やして、そのタグをどう使うのかを覚えるだけなので、ここだけ抑えれば、けっこうどんなサイトでも作っていけると思います。
上の図をそのままそっくり作ってみます。
テキストエディタを用意します。Windowsにくっついているメモ帳は使いません。Windowsの場合だと、TeraPadとかサクラエディタあたりのフリーテキストエディタで十分で、私はTeraPadを使っています。
1行目は、HTML5である事の宣言です。
次からは、開始タグを記述したら、すぐに終了タグを記述します。
2行目に<html>を記述したら、少し行を空けて</html>を記述します。ここでは17行目。
更に、<html>の部分に、このサイトの言語は日本語だと記述します。それが、lang=”ja”の部分。
3行目に<head>と、ここでは6行目に終了タグ</head>を記述します。
4行目が、ブラウザのタブ部分に表示されるタイトルで、開始タグ<title>と終了タグ</title>の間に記述します。
5行目はスタイルシートのリンク先です。
head部分はここまで。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>ワイヤーフレームを組む</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen,tv">
</head>
<body>
<div id="Wrapper">
<header></header>
<div id="First"></div>
<div id="Second"></div>
<div id="Third"></div>
<footer></footer>
<!--/Wrapper-->
</div>
</body>
</html>
</head>の下にbody部分を記述します。ここからが、実際にサイトで見ている部分です。
<body>（7行目）から始まって、</html>のすぐ上</body>（16行目）で終わりです。
実際にHTMLを組んでいくためには、上の画像をもう少し具体的にします。
赤枠を現しているのが、8行目のdivタグから15行目の/divタグまでで、Wrapperという名前がついています。14行目には、Wrapperはここまでだよという記述がされています。<!--と-->ではさまれている部分はサイトには表示されません。
9行目のheaderタグと13行目のfooterタグの間にある3つのdivタグが、3カラムを現しています。ここでもidを使って、それぞれに名前が付けられています。
上記のHTMLの記述にはテキストや画像がありません。こういった記述を空タグと言って、SEO的には決して良いものではありませんが、今回は大枠を把握するためなのであえてテキストや画像は入れていません。
記述が終わったらindex.htmlという名前で保存します。ブラウザにChromeを使っている場合、アイコンがChromeマークになるので、そのアイコンをダブルクリックしてみます。タグだけでテキストや画像がないので、ブラウザは立ち上がりますが、何の表示もありません。アドレス部分にファイルのある場所が表示されているのと、タブにtitleに入れたタイトルが表示さていれば成功です。
色などを入れるためには、CSSと言うファイルを作ります。ほとんどの場合、CSSファイルでデザイン的な事を記述していきます。
body, header, footer, div {
margin: 0;
padding: 0;
}
#Wrapper {
margin: 0 auto;
width: 980px;
}
header {
height: 150px;
background: #e968a0;
}
#First {
width: 315px;
height: 500px;
background: #ffcdb8;
}
#Second {
width: 350px;
height: 500px;
background: #9befb1;
}
#Third {
width: 315px;
height: 500px;
background: #d6acff;
}
footer {
height: 120px;
background: #5780e9;
}
CSSは、タグ名・id名・class名｛ プロパティ ：（コロン) 値；（セミコロン） ｝で記述していきます。タグ名・id名・class名が二つ以上ある場合は、カンマで区切って記述します。header, footer { width: 980px; }みたいな感じです。
最初に利用するタグをすべてカンマで区切りながら記述します。今回の場合は、body, header, footer, divの四つです。この四つをどうするかを｛と｝で囲んだ中に書いていきます。この最初の部分では、それぞれのタグが持っている空間をすべてゼロにしてね・・という指示です。marginとpaddingについては、別の機会に。
#Wrapperという記述は、idに名前を付けた時の書き方で、名前の前に#を記述します。id名は、一ページにつき、一回しか使えません。何度も同じ名前で支持をしたい場合は、idの代わりにclassを使います。この場合、CSSに記述する場合は、名前の前は#ではなく、.(ピリオド)です。
Wrapperは、全体を囲む赤枠の部分でした。この赤枠全体をブラウザの中央に配置するための記述が、margin: 0 auto;です。最初のゼロは上下に空間は無しという意味で、autoで左右の中心を取ってくれます。次に、全体の幅widthを指定するので、width: 980px;となります。
ここでCSSの一つの決まりの説明。marginとpaddingの記述方法です。
header {
margin: 10px 20px;
} 上下が10PXで、左右20pxの空間をとってね。
header {
margin: 10px 30px 20px;
} 上が10PX、左右30px、下が20pxの空間をとってね。
header {
margin: 10px 30px 20px 50px;
} 上が10PX、右30px、下が20px、左が50pxの空間をとってね。
では続いて、headerとfooterは、幅はもう#Wrapperで決まっているので、高さ（height）と色の指定だけです。
この場合の色は、backgroundで指定します。色はRBG値で3色を16進法で現しています。指定する時は、番号やアルファベットの前に必ず#が必要です。
#First、#Second、#Thirdの場合は、高さ（height）が決まっているので、幅と高さと色を記述します。
ここでファイルを保存して、ブラウザで見てみます。恐らくこうなっています。⇒こちらをクリック
真中の三列が縦に一列に並んでしまっています。これをfloatというプロパティを使って、横並びにします。
floatは、見た目平面ですが、浮かんでいる状態にすることです。まず、#Firstの部分にfloat: left;を付け足します。浮いて左に行きなさいと言う意味です。#Wrapperで幅は決まっていますから、この幅の左側に配置されます。
続いて、#Secondにも同じようにfloat: left;を付け足します。先ほどと同じように浮いて左に行きなさいと言う意味ですが、すでに#Firstの部分があるので、そのすぐ右側に配置されます。
最後に#Thirdですが、この場合はfloat: right;を付け足します。#Wrapperで決められている幅980pxの一番右側に浮いて行きなさいと言う意味です。
ここでまたファイルを保存して、ブラウザで見てみます。恐らくこうなっています。⇒こちらをクリック
これは、floatで、真中の三つの部分が浮いてしまっているので、footerがその下に入り込んでしまった状態です。floatはもう終わっているのだと、記述が必要です。
footerの部分にclear:both;を付け足します。
body, header, footer, div {
margin: 0;
padding: 0;
}
#Wrapper {
margin: 0 auto;
width: 980px;
}
header {
height: 150px;
background: #e968a0;
}
#First {
float: left;
width: 315px;
height: 500px;
background: #ffcdb8;
}
#Second {
float: left;
width: 350px;
height: 500px;
background: #9befb1;
}
#Third {
float: right;
width: 315px;
height: 500px;
background: #d6acff;
}
footer {
clear: both;
height: 120px;
background: #5780e9;
}
ここまでが分かれば、あとはこれの応用だけです。
注意するのは、開始タグと終了タグを必ず一緒に書く事。
floatさせたら、clear: both; でfloatを解除する事。
後は、marginとpaddingの関係を把握すればＯＫです。
それと私は、HTMLを組んでいて、どうなっているのか分からなくなったら、とにかくbackgroundに色を入れて確認をするようにしています。
—Comments—