ga-04-15

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

15.破綻しないための設計手法

目   次

1.初心者が陥りやすい落とし穴

2.破綻しないための設計手法の必要性

3.共通CSSの設置

4.骨組みHTMLファイルによる展開

      

  1.初心者が陥りやすい落とし穴

初心者が陥りやすい落とし穴としては以下のようなことがあげられます。

ページの頭からCSS(class・id)を記述すると並び方の規則性がなくなり、修正箇所を探すのに苦労をする。また、デザインが同じという理由で様々な箇所で活用すると1箇所だけ修正したかったのに多方面に影響を与える。

ホームページの1ページを作成し、コピー&ペーストで どんどん作成していく中で、全ページに共通する新しいデザインを思いついたが、これまで作成した全てのページを1ページずつ変えなければならない。度重なると変更を諦めざるを得なくなる。

これまでに作成した機能(例えば、タイトル、目次、吹き出し、ボタン、箇条書き、囲み枠等)を活用したいが、再利用する形になっていない。

  
  2.破綻しないための設計手法の必要性

当講座は、個人のホームページ作成支援を目的としていますが、何十ページにわたるホームページを作成した場合、修正箇所を見つけることができない、思ったように変更ができない、全ページに共通したデザインを変更ができない、手間暇が掛かり過ぎる等の事態が発生し、ホームページ作成を断念することが懸念されます。
このような状態を起こさないためにホームページ作成のための設計手法が必要です。共通CSSの設置と骨組みHTMLファイルによる展開を提案します。

  
  3.共通CSSの設置

ホームページの1ページ(1HTMLファイル)毎にCSSファイルを作ってゆくと整合性、統一性を取ることができなくなります。対策は、全てのページを共通CSSでカバーすることと、CSSを管理するためにCSSを以下の3つに分類してCSSファイルを作成することです。

画像

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

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

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

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

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

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

  
  4.骨組みHTMLファイルによる展開

ホームページをコピー&ペーストで追加してゆくとき、元になるホームページを決めておかないと統一性が取れなくなります。対策は、ホームページの骨組み(メインタイトル、メインナビゲーション、ページタイトル、ページ目次、項目タイトル、項目表示枠、画像表示枠、トップページ移動ボタン、最下段のページ移動ボタン、フッター)を骨組みHTMLファイル「skeleton.html」として用意します。すべてのページは、この骨組みHTMLファイルを加工・追加することによってホームページを作成します。
 骨組みHTMLファイルを利用することによって省力化が図れ、本題に集中できます。また、ホームページの統一性を保つことができます。演習1では、この骨組みHTMLファイル「skeleton.html」を作成することから始めます。

 back
pagetop
 next

レスポンシブ
WEBデザイン

破綻しないための
設計手法

ミスを少なくする
コーディングルール

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