ホームページ作成
- 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; }