ga-06-02

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

<演習1>
2.ホームページ構築の手法

目   次

1.共通CSSの設置

2.骨組HTMLの設置


1.共通CSSの設置

ページ数が何十ページになっても、1つのホームページは下段の「共通CSS」で対応します。

画像

a1.枠組みCSS(frame-style-sheet.css)
メインタイトル、メインナビゲーション、ページタイトル、ページ目次、項目タイトル、項目表示枠、画像表示枠、トップページ移動ボタン、最下段のページ移動ボタン、フッターを担うCSSを一塊にして「frame-style-sheet.css」として管理します。

※CSS名の頭2桁を[f-]とします。

a2.部品CSS(module-style-sheet.css)
各種目次、各種見出し、各種箇条書き、コメントボックス、吹き出し、大きな矢印、他を使いやすい形に加工し、部品を「module-style-sheet.css」 として管理します。部品(Module)を活用することで省力化が図れます。

※CSS名の頭2桁を[m-]とします。

a3. 装飾CSS(decoration-style-sheet.css)
使いやすい背景色36色と覚えておくと便利なカラーネーム22色、他に頻繁に使う文字関係の装飾を 「decoration-style-sheet.css」として管理します。色合わせ他に便利に使うことができます。

※CSS名の頭2桁を[d-]とします。

  
2.骨組HTMLの設置

ホームページの骨組み(メインタイトル、メインナビゲーション、ページタイトル、ページ目次、サブタイトル、サブコンテンツ(文章)、サブコンテンツ(画像)、トップページ移動ボタン、フッターナビゲーション、フッター)を骨組みHTMLファイル「skeleton.html」として用意します。すべてのページは、この骨組みHTMLファイルおよび枠組みCSSを加工・追加することによって作成します。

画像

 back
pagetop
 next

演習1を始める
ための準備

ホームページ構築
の手法

演習1のレイアウトと
ファイルの準備

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken