しなやか暮らし研究所実践パソコンホームページの自作各ページの構造 CSS スタイルシートで段組を作る

各ページの構造

ページは次の3つのブロックを順に記述して構成します。

XML宣言(省略可）
文書型宣言
html要素

このうち1、2の宣言はそれぞれ重要な意味を持っていますが、ホームページとしてブラウザが表示するものではないので、一つの決まりとしてホームページビルダーがページを新規作成する時に最初に自動生成する記述をそのまま使えば良いでしょう。
3番目のhtml要素がホームページとして表示する実体ですから、html要素については良く理解しましょう。

フォームページビルダーが生成するWebページの初期情報

html要素にはページのタイトルやページの説明文を入力するhead要素とページの内容を具体的に入力するbody要素が順に入り、body要素の中に文章の要素（文章タイトル、文章、図や表など）を要素ごとに決まった“タグ”と“／(スラッシュ)＋タグ”で囲んで記述します。
たとえば、

	<html>
	<body>
	これが一番小さなホームページです。
	</body>
	</html>

と記述したファイルをインターネットエクスプローラなどのブラウザで開くと、

と表示されます。

CSS

文章の内容とは別に文章の体裁を記述するのがCSSですが、
これは「セレクタ」、「属性」、「値」を
セレクタ［属性：値］
と記述し、
どこの（修飾対象）、何を（属性）、どうする（値）
という形で文章の体裁を定義します。

例えば、
body { font_size : medium; }
は「文章本体の文字のサイズは普通サイズ」という定義です。

CSSの記述では体裁の定義をどの範囲のセレクタに限定するか、3つの記述法が利用できます。

特定の親要素を持つ特定の要素の体裁だけ修飾したい場合
親要素を空白で区切り、セレクタの前に加え、
　　h1 strong { color: green }
と記述。h1要素に含まれているstrong要素部分だけ修飾します。
特定クラスの要素の体裁だけ修飾したい場合
クラス名をピリオドで区切り、セレクタの前に加え、
　　strong.A { color: red; }
と記述。クラス名Aのstrong要素だけ
　　<strong class="A">特定のclassだけに体裁を与える。</strong>
を修飾します。
特定の要素の体裁だけ修飾したい場合
id名をシャープ記号で区切り、セレクタの前に加え、
　　strong#teisai_A { color: purple }
と記述。teisai_AというId名を持った要素だけ
　　<strong id="teisai_A">特定の要素だけに体裁を与える</strong>
を修飾します。

さらに、CSSを記述する場所の違いにより体裁のhtmlに対する適用範囲を選択する事ができます。

１ページ内の特定のタグにだけに体裁を適用したい場合
タグの中にstyle属性として記述します
```
	タグ style="～"
```
指定する体裁が希望通りか一時的に試す場合にも有効です。
特定のページ内だけに適用したい場合
スタイルシートを記述するためのstyle要素としてhead部内に記述します
```
	<style>～</style>
```
ホームページ全体に適用したい場合
html中にスタイルシートの実体を記述しないで、スタイルシートを独立したファイルとしてhtml外に記述。link要素を使ってhtml内に読み込みます。

なお、3つの記述を重ねた場合1番目、2番目の順で指定が優先されます。
さらにCSSの記述法と記述場所も組み合わせができるので、より細かな体裁の指定が可能です。しかし、体裁の記述は正しくても、体裁の適用範囲の記述とCSSの記述場所を誤ると、思い通りの体裁は設定でき出来ないので、定義は一つ一つ確認しながら行う必要があります。
そのためには、ホームページビルダーのスタイル設定機能やスタイルマネージャ機能を使って、画面で体裁の定義結果を確認しながら作業するのが良いでしょう。

1 2 3