スタイルシートも使ってみよう

HTMLのタグ以外にも、CSS(カスケーディングスタイルシート)、通称スタイルシートっていうのも最近では一般的になってきています。これは、HTMLのタグと組み合わせて使う事になります。

基本的に、HTMLタグというのはhtmlファイルの外枠を作る為の言語なんですよ。テキストの設定や、行間やら色とかで装飾するのはスタイルシートを使いましょうという感じになってます。

スタイルシートの設定は、ヘッドタグの中で行います。

1. <head> 2. <style type="text/css"> 3. b {color:red; } 4. </style> 5. </head>

こんな感じになります。 1行目と5行目はヘッダタグなのでよいとして、
2行目と4行目でスタイルシートの設定を行うスペースを作っています。
3行目がスタイルシートの設定です。
この場合は、<b>タグを使うとその中の文字は赤くなるよという設定になっています。これ以外にも、列挙して設定を増やす事が可能です。

スタイルシートの設定のルールは、
要素名　{ 属性:値; }
↑という形になっています。属性の後のコロン（:）と値の後のセミコロン(;)は必須ですので注意してください。どちらも半角です（カッコもね）。

要素名の所に今回のようにbとだけ書くと、そのファイルの中の全部のbに設定した装飾が施されます。逆に、このような事も可能です。

1. <head> 2. <style type="text/css"> 3. .tored {color:red; font-weight:bold; } 4. #test { font-size:15px; color:blue; } 5. </style> 6. </head>

3行目と4行目に注目してみてください。
まず、どちらも複数の設定をしていますよね。このように複数の項目をいっぺんに設定する事が可能です。

ちなみに、3行目はテキストを赤くし、太文字にするという設定です。 4行目はテキストのサイズを15ピクセルで固定し、色を蒼くするという設定です。

次に、3行目の「.tored」という形がありますね。これはクラスの設定です。
んで、4行目の「#test」はIDの設定です。
それぞれ、こんな感じで使う事ができます。

<b class="tored">tored</b> <b id="test">test</b>

クラスもIDもこのように適用したタグだけに装飾が適用される指定方法です。クラスもIDも同じような使い方ができますが、同じIDは1ページ内に1回だけしか使う事ができません。クラスは何度でも使う事ができます。

使い分けは、その人の好みで大丈夫です。慣れて来ると、この場所のテーブルにはこーいう名前を付けてっとって感じで名前を付けて、解り易くする為にもIDを使ったりします。

最後に表示例を出しておきますね。

設定 <head> <style type="text/css"> b {color:red; } .togreen {color:green; font-weight:bold; } #test { font-size:15px; color:blue; } </style> </head> <body> <b>Hello, World</b><br> <b class="tored">Hello, World</b><br> <b id="test">Hello, World</b><br> </body>

表示
Hello, World
Hello, World
Hello, World

このように、bで設定はされていても、その後にクラスやIDを適用すると、クラスやIDの方の設定が最終的に適用される事になります。

さて、もう1つの方法。上記のはページの最初に全部設定しておく方法でしたが、 htmlのタグの属性と同じように、1つ1つその場で適用する事も可能です。

上記の書き方でspanタグで囲まれた部分が赤色になる設定です。 styleの中は上記のように複数設定する事が可能です。このように、styleの中でその場その場で設定する事もできるよ、という例でした。

上記の表示例：
赤色文字

これも、HTMLのタグと一緒で、基本はこんな感じで説明は終わります。この後は、どれだけスタイルシートの属性を知っているか？使いこなせるか？にかかって来ます。 HTMLのタグの辞典とCSSの辞典がセットになってる本もありますので、一緒に探してみてくださいね♪

■実際に作ってみよう

・タグ打ちのススメ
・ホームページの作り方
・スタイルシートも使ってみよう
・リンクのパス
・著作権とコピーライト