前回からかなり間が空いてますが、HTMLとCSSの関係は「あくまで文章の構造を意味づけしたもの(HTML)」と、「HTMLに見栄えに関するところ、レイアウトなどを付加するもの(CSS)」ということなんです。
でも、CSSの記述がHTML文書に直接書かれていると、全然「文書の構造」と「レイアウト定義」が分離できていませんよね。
というわけで、今回はCSSの記述を別なファイルに書いてみることにします。
前回までは、HTML文書のHEAD部分にCSSの記述をしていましたよね？例を出しますと…
こういった風に書いておけば、そのHTML文書内では同じレイアウト定義を使うことができますね。
しかし、他の文書も同じレイアウトにしたい！という場合などの場合、レイアウト定義を一カ所にまとめてしまうと、管理が非常に簡単になります。
仮に、CSSの記述のみを記した、「basic.css」というファイルを作成しておきます。
上のCSSの例の中の、「(ここにCSSを記述します)」の部分だけをbasic.cssに書くことにしましょう。
具体的には、下のような内容のものを作ってください。
ここで、「別なファイルにCSSの内容を書いたって、”元のHTML文書のレイアウト定義だよ”っていうのはどこに書けばいいの？」と言われてしまうでしょう(^^;
悩んでもはじまりません。元のHTML文書のHEAD部分に、以下の記述を追加しましょう。
新しくLINKという要素が出てきていますが、これはHTML文書と他のファイルや文書の関係を示すのに使われる要素です。
具体的に解説すると、「このHTML文書のレイアウト定義(stylesheet)をリンク先(basic.css)のファイルで示しますよ」ということを言っているのです。
[補足]
このbasic.cssの記述を沢山のHTML文書内に書けば、basic.cssの中のCSSを一つ変更するだけですべての文書のレイアウト定義を変更することが可能になり、とても便利です。 [補足]
CSSについては要素名と、プロパティ、プロパティの取る値が分かっていれば何でも指定することができます。
そういったものは検索等で探してもらった方がこちらとしても有り難いのですが…(^^;
できれば次回はワタシのよく使うプロパティなどを紹介したいと思います。