HTMLテンプレート Layout Gallery - ホームページガイド

ホームページ作成

HTML/CSSの基本スタイルは構造化（ブロック書式）です。
ボックスレイアウト
構文は <div> というブロック要素で構成し、<div> を入れ子にしてレイアウトを組む場合は、<div> の親、つまりID属性に必ずwidthを指定します。
複雑なレイアウトを組む場合は、さらにheightの指定も必要になります。
これは、ブラウザの互換性や文字の拡大・縮小を行ったときに、レイアウトが崩れるのを未然に防ぐためです。
ただし、バナーやメニュー画像を縦に並べるなど単純に入れ子でない場合は、幅の指定を省いたほうが、作りやすいでしょう。

--- HTML ---
<div id="container">
    <div class="box1">
    ヘッダ
    </div>

    <div class="box2">
    レフトサイド
    </div>

    <div class="box3">
    ライトサイド
    </div>

    <div class="box4">
    フッタ
    </div>
</div>

手順）
1. ブロック要素を明確にし、ホームページのワイヤーフレーム作成

上の図では、ページ全体を制御するコンテナ（ID属性）にボックスを挿入しています。
ヘッダはBOX1、段組となるコンテンツの左側はBOX2、右側がBOX3、フッタがBOX4です。

※幅500pxに指定した場合、border:1pxで囲むと幅502px、padding:5pxを入れると幅512pxになります

2. ワイヤフレームを参考に、そのサイズに適合する素材（画像）を用意します

3. 余白は気にしなくていいので、素材を埋め込みながらHTMLをマークアップします

4. マークアップしたHTMLをCSSでデザインして完成

※テンプレートがあればCSSを知らなくてもOKです
また、ブロック書式ではタグの構成も重要です。
タグの主な役割は以下の通り。
<div> ‥ボックスを定義し、ブロック書式の基本

<h1> ‥ページの見出しを意味し、h1～h6まである

※SEOではh1がもっとも重視されますが、1ページに1ヶ所しか指定できません

<p> ‥テキストを記述したり、段落を構成できる

<ul><ol> ‥長文や段組、それに付随したボックスを作成できる

<dl> ‥定義リスト（用語とその説明文）を作成できる

※応用次第でいろいろなレイアウトを組めます
余談ですが、背景画像を有効に活用すれば、複雑なHTMLを簡略することができます。
文字の折り返しに注意し、縦長の背景画像にすると文字サイズの変更にも対応できます。
例）
このレイアウトを簡単に説明します。
#boxというブロック要素で全体の大きさ、文字の大きさ、行間を指定。
#boxの中にある<ul><li>で余白、幅、高さなどを指定しています。
ここで気をつけなくてはならないのが、HTMLに<ul>が2つあるということです。
2つの<ul>はそれぞれスタイルが違うので、CSSを区別する必要があります。
そこでst1、st2という名前を付け、st1に背景画像と位置、st2には右寄せを指定しました。
カクテルの背景画像はボックスの下まで続いているため、文字のサイズを拡大したり、文字を追加してボックスの高さが変化しても大丈夫です。

--- HTML ---
<div id="box">
    <ul class="st1">
    <li>テキスト</li>
    <li>テキスト</li>
    </ul>
    <ul class="st2">
    <li>テキスト</li>
    <li>テキスト</li>
    </ul>
</div>

--- CSS ---
#box {
 width:420px;
 height:auto;
 line-height:1em;
 font-size:80%;
}

#box ul {
 margin:0;
 padding:0;
 width:200px;
 height:auto;
 border:1px solid #ccc;
}

#box li {
 list-style-type:none;
 padding:5px;
}

#box ul.st1 {
 float:left;
 background:url(img/sample.jpg) no-repeat #edefe5;
 background-position:135px 5px;
}

#box ul.st2 {
 float:right;
}