gisi_spicaのHTML講座第四回「HTMLの骨組み（デザイン編）」

記事upが遅れてすみません

今回はデザインを考えます。

◆webページの枠組み

　フレームから作っていくつもりです。

　今回目標にする形は四つのところからできてます。

1. タイトル
2. メニュー
3. 本文
4. フッタ

　以上です。

　これから書いてく方法で書けば、パン屑メニューも簡単にできると思います。使いやすいページの形の一つです。（少なくとも筆者はそう思っています）

◆フレームマップを作る。

　さらーっと書いてきましたが、もっと細かいところを考えていきましょう。

こういう感じでリストアップしてみました

*テキスト版：
• 全体：
  • 横800px
  • 中央寄せ


• ヘッダ部：
  • 横800px
  • 縦80px


• メニュー：
  • 横150px
  • 縦任意
  • 左付け


• 本文：
  • 横650px
  • 右付け


• フッタ:
  • 横800px
  • 中央寄せ

完成予想枠はこんな感じです

◆HTMLソースの枠

では、枠組みを作って行きましょう。
HTML+CSSで作るつもりなので、表の知識はいらないです。

DIVについて

HTMLにはDIVというブロックレベル要素があります。この記事もDIVばかりで直すのが大変です･･････。

ブロックレベル要素は第三回で教えましたよね？

DIVは汎用ブロックレベル要素と言って、ブロックレベル要素としてこれがひとくくりだよと伝える要素です。
id属性を利用して、CSSでデザインしやすいようにします。

枠を書く

さっきも書いたようにid属性を使います。一つのHTML文書内では一回しか使えない名前を属性値に指定します。（一つのHTML文書内で何度も使える名前を指定するには、class属性の属性値に名前を指定します。）

まずくくる場所の名前を決めます。

• 全体:wrapper
• ヘッダ部：header
• メニュー：navigation
• 本文：contents
• フッタ：footer

これで行きます。
body要素内のみソースコードを書きますよ。

<div id="wrapper">

<div id="header">(ヘッダの内容)</div></div>

<div id="navigation">（メニューの内容）</div>

<div id="contents">(本文)</div>

<div id="footer">（フッタ）</div>

</div>

パン屑リストを入れたりしたければ、Wrapper内にDIV要素で作ってください。
<div id="(名前）"></div>で作成してください。

装飾はCSS

CSSを使う目的は、構造とデザインの分離です。
HTMLに対してスタイルシートを記述する場所は三つあります。

• 外部スタイルシート

  　別ファイルに書いて、HTML文書から読み込ませる方法。サイト全体の見栄えを変えたい、というときも、使う構造が同じであれば、CSSファイルの編集だけでOKというメリットがある。




• 内部スタイルシート

  　HTML内の一か所にまとめて記述する方法。練習には向いているが、サイト全体の見栄えを変えることは無理。そのファイルで試すとき、こうしてああして、と試行錯誤するには向いている。HTMLの論理構造の考え方にはあまり合わない。




• インラインスタイル

  　それぞれのタグに直接記述する方法。しかしHTMLの論理構造を崩す上に改変が面倒くさいという書き方。その場所だけ特別に変えたいときのみに使用し、それ以外のときには使わない方がよいだろう。

CSSの文法の考え方

どの場所を（セレクタ）、どの見た目について（プロパティ）、どう変化させるか(値)、が大切になります。
かき方は、「セレクタ{プロパティ:値;プロパティ:値；}」が基本となります。
基本文法を実際に使うのは後になります。まず目標HTML文書を完成させましょう。