スタイルシートを使え・その1
｢スタイルシート｣？何それ？と思った方もいるでしょう。
｢HTML｣とは文章の構成や重要度を表すためのものですが、
ページの構成やデザイン、色などを表すのがスタイルシートです。
スタイルシートにはいくつか種類がありますが ( 気になった人は探してみて下さい ) 、
ここでは一般的に使用されているCSSの解説をしていきたいと思います。
書き方
実は書き方もいくつか存在します。
ここでは < h1 > タグ内の文字を赤色で表示するという例で解説していきます。
まず、タグの中で個別に指定する方法です。
< h1 style="color:red" > < /h1 >
次に、 < head > 内でスタイルシートの設定を行う方法です。
< head >
< style type="text/css" >
< !--
< /style >
< /head >< !--
h1 { color:red; }
-- >< /style >
最後に別のファイルを作ってそれを読み込ませる方法です。
例) -- xxx.html ファイル< html >
< head >
< body >
< /html >
< link rel="stylesheet" href="style.css" type="text/css" >
< /head >< body >
< h1 > 見出し < /h1 >
< div id="name" >
< /body >< div id="name" >
< p class="two" > 本文1 < /p >
< span class="two" > 本文2 < /span >
< /div >< span class="two" > 本文2 < /span >
-- style.css ファイル
body { background-color:#ff00ff; }
#name { color:red;}
.two { font-size:15px; }
よく使われているのは最後の方法です。
なぜかと言えば、すべてのページで共通の設定を使うことができ、
内容を変更したい時も楽に変更することができます。
ここでもこれ以後最後の方法で解説していきます。
ちなみに、 href="style.css" の部分は｢ HTMLのファイルと同じ場所にあるstyle.cssというファイルを使用します｣
というような感じの意味だと思ってください。
それでは次のページから、スタイルシートの解説をしていきます。