また手抜きですか。
HTMLにも書き方の決まりがあったように、CSSにも幾つか覚えなければならない書き方や用語が存在します。ここからは少しスピードが上がりますが、実際の記述と共に説明して行きたいと思います。用語については出現したその都度説明を行うつもりですが、わからない場合は自分で調べるか適当に飛ばして下さい。
また手抜きですか。
違います。もうこれくらいの時期になったら自分で必要な情報を探し出して選別できるぐらいの技術を身に付けて貰わないと困るのです。
CSSはHTML文書に付属させて効力を発揮しますが、その基本部分の書き方は同じで、セレクタとプロパティというものから成り立っています。基本的にセレクタには適用させたい要素名を、プロパティには装飾を施したい箇所を記入します。言葉での説明は難しいですが、実際に記述してみれば簡単です。
見比べて頂ければわかりますが、セレクタにはCSSを適用させたい要素を、プロパティには設定したい項目を、そしてその値には設定値を記述します。例はp要素（p）の文字色（color）を赤く（#ff0000）したいという記述です。この規則を覚えれば後は適用させたいセレクタを替えたり、プロパティの種類をと値を覚えるだけで多くの表現が可能になります。
CSSを用いる時は多くの場合で<head>〜</head>間に<meta http-equiv="Content-Style-Type" content="text/css">という記述が必要になります。殆ど必須なのでCSSを用いる場合は記述すると覚えておいて下さい。意味としてはデフォルトのスタイルシートの種類がCSSであると設定するものです。
CSSはstyle属性で各要素に直接適用させる事が出来ます。
<p style="color:#ff0000;">赤色の文字列になる</p>
赤色の文字列になる
<p style="font-size:18px;">18pxの大きさの文字列になる</p>
18pxの大きさの文字列になる
<p style="font-weight:bold;">文字列が太文字になる</p>
文字列が太文字になる
各要素に直接、属性として付加する場合にはどの要素にスタイルを指定したいのかが明白なのでセレクタや{}は必要なくなります。
「色を⇒赤く」「フォントサイズを⇒18pxに」「文字の太さを⇒太く」ってそのままですね。色の種類とか大きさの単位とかはどんな物があるのですか？
それは別途説明しますが、たくさんありますので実際に使用しながら少しずつ覚えて下さい。
上記の様に各要素にstyle属性としてCSSを適用させていたのではとてもではありませんが便利とは言えません。そこで<head>〜</head>間にCSSを記述する事でそのページの見栄えをまとめて指定する事が可能になります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style> </style> <title>ページタイトル</title> </head> <body> <p>段落</p> </body> </html>
これから先の記述例では該当部分しか表示しません。<head>〜</head>間ならば大抵どこでも平気ですが、心配ならば</head>の直前に置くと良いと思います。
<style type="text/css"> </style>
<style type="text/css">
p {color:#ff0000;}
</style>
<style type="text/css">
<!--
p {color:#ff0000;}
-->
</style>
style要素に対応していないUAがどの程度存在するのか分かりませんが、もう必要無い、無視しても構わない数だという話もあります。逆にXHTMLなどの場合はこのような方法でコメントアウトしてしまうと本当にコメントとして扱われてしまい、CSSが適用されないという事もあります。また、CSSに対応したブラウザではコメントとして扱わないような仕様になっているので問題ありません。ここから先はコメントアウトをしない形で説明して行きます。
それでは本当にstyle要素内にコメントを挿入したい場合はどうするかと言うと、/* と */ で挟むとその間の文字列がコメントとして扱われます。空白や改行が置ける場所ならばどこでも記述できますが、無用な誤動作を防ぐ為にあまりおかしな所には記述しない方が無難です。
<body> <p>ここが赤色</p> <p>ここも赤色</p> <p>全部赤色になります</p> </body>
ここが赤色
ここも赤色
全部赤色になります
これを一つ書くだけで全部のp要素が同じスタイルになるのですか？10個でも100個でも？
はい。そうなります。
でも例外的に同じスタイルを指定したくないp要素も出てきたりしますよね？
そうですね。それはセレクタの書き方を工夫する事によって任意のp要素に違うスタイルを適用させる事も可能なのですが、それはまた後で説明します。それよりも気になる事はありませんか？
気になること？んーと、あっ！p要素に文字色だけじゃなくて他にも文字の大きさとか太さとかを指定したい場合はどうなるのですか？style要素からまた全部繰り返して書くのですか？
なかなか息が合うようになってきましたね。そうです。複数のスタイルを指定する場合の説明に移りたいと思います。
上記ではp要素に対して文字色を赤くという指定だけをしましたが、それでは同時に複数のスタイルを指定したい場合にはどのように記述すれば良いのでしょうか。また、違う要素も同時に指定する場合はどうすれば良いのか。その記述の仕方を説明します。
<style type="text/css">
p {color:#ff0000;}
p {font-size:18px;}
p {font-weight:bold;}
</style>
上記の様な指定を下記のようにまとめられます。
<style type="text/css">
p {
color:#ff0000;
font-size:18px;
font-weight:bold;
}
</style>
セレクタの後のスペースや{の後の改行、インデントなど、特に決まりはありませんが、自分の見易い様に書くのが宜しいでしょう。特殊な状況下においてはこの書き方がバグを誘発したりしますが、通常は問題ありません。良くわからない人は誰かの真似をするかCSSの書き方諸々などを参考にしてみて下さい。
<style type="text/css">
p {
color:#ff0000;
font-size:18px;
font-weight:bold;
}
</style>
<style type="text/css">
strong {
color:#0000ff;
font-size:20px;
font-weight:bold;
}
</style>
上記の様にstyle要素をセレクタ毎に登場させる必要はなく、一つのstyle要素内にまとめて書くことが許されています。
<style type="text/css">
p {
color:#ff0000;
font-size:18px;
font-weight:bold;
}
strong {
color:#0000ff;
font-size:20px;
font-weight:bold;
}
</style>
へぇー。これならスッキリして良い感じですね。同一セレクタを一つにまとめられるなら同じプロパティの場合もまとめられるのですか？
はい。複数の要素に同じプロパティとその値を指定したい場合には p,strong{color:#ff0000;} のようにセレクタをカンマで区切ればまとめる事が、こういったセレクタの書き方については後ほど説明します。
ところでこうやって<head>〜</head>間に書いて行くとどんどんソースが縦長になるし、ページの容量もそれ程変わらないような気がするのですが。
そうですね。でもその問題もこのCSSの記述を外部ファイル化することで解決できるのです。その方法は以下で説明します。
CSSには任意の要素に属性としてピンポイントに指定する方法と、ページ全体に指定する方法を学びましたが、次は複数のページに同時に指定する方法を説明します。
@charset "Shift_JIS";
HTMLファイルで文字コードを指定した様に、CSSファイルでも文字コードの指定をした方が無難です。文字コードの種類はShift_JISでなくとも構いませんがHTMLファイルと同じにしましょう。
@charset "Shift_JIS";
p {
color:#ff0000;
font-size:18px;
font-weight:bold;
}
スタイル要素を記述する訳ではないので<style type="text/css"></style>やコメントアウトは必要ありません。CSSの中身だけを直接記入して下さい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./common.css" type="text/css"> <title>ページタイトル</title> </head> <body> <p>段落</p> </body> </html>
href属性の値でcommon.cssを呼び出しています。今回は適用させたいHTMLファイルとCSSファイルを同一階層のフォルダ内に置きましたので ./common.css という記述になりましたが、それ以外の場合は相対パスで説明した通りで、ハイパーリンクの場合や画像の表示と同じです。例えばcssというフォルダに入っていた場合は ./css/common.css になりますし、上の階層にある場合は ../common.css の様になります。
このようにして呼び出せば一つのCSSファイルの指定を、複数のHTMLファイルに反映させる事が出来ます。また、同じようにして一つのHTMLファイルに複数のCSSファイルを適用させる事も可能です。
そう言えばstyle要素の所でもさらりと流されましたが type="text/css" ってどういう意味なんですか？それから rel="stylesheet" なんていうのも出てきましたけど。
type="text/css" というのはtype属性でスタイルシートの種類というか内容のMIMEタイプを表わしています。要するにCSSですよと明示している訳です。rel="stylesheet"もrel属性という事で意味は似ていて、そのHTMLファイルとどのような関係なのかを示しています。今回の場合はcommon.cssはスタイルシートなのでstylesheetという値になっています。他にも色々ありますが、ここでは解説の範囲外なので割愛します。
なんだか色々と面倒なんですね。@charsetはどんな意味なんですか？
@規則というものがありまして他にも色々あるのですが少し難しくなりますのでここでの説明は遠慮させて頂きます。
実は説明できないとか？
そういう訳ではないのですが…。
CSSには書き方が三通りあることを説明しました。HTMLの時と比べると実行例を多く挙げたりせずにかなり簡単な説明になっていますが、この辺りまで読み進めてきている人はもうかなりの事を自分で予測して出来るようになっているのではないかと推測しています。少ない情報からでも正しいと思われる操作をいかに学べるかもこの先は重要になりますし、応用も必要になります。しっかりと自分の中で反芻して情報を整理して吸収しましょう。このページで説明した内容を大雑把に列挙すると以下のようになります。
<p style="color:#ff0000;">赤色の文字列になる</p>
<style type="text/css">
p {color:#ff0000;}
</style>
@charset "Shift_JIS";
p
{
color:#ff0000;
font-size:18px;
font-weight:bold;
}
<link rel="stylesheet" href="./common.css" type="text/css">
さて、これまでCSSをHTMLに適用させる方法として三つ紹介してきましたが、中でも一番推奨されているのがCSSを外部ファイル化して参照する方法なのです。これは利用する場合のも機能的にも推奨されていますので、なるべくこの方法を取るようにして下さい。特にstyle属性で各要素に個別に指定する方法はCSSの利点が殆ど活かされないので避けた方が無難です。また、XHTMLではstyle要素をHTMLに埋め込む事も推奨されていません。
それじゃあ前の二つは無視して外部ファイルにする方法だけ覚えれば良いのですか？
そういう事ではなく、全ての方法を知っておいた方が何かと良いと思います。
もう覚える事がたくさんあり過ぎて頭がパンクしそうです。
大丈夫です。CSSで覚えていなければならないのはこのHTMLに適用させる方法くらいですから。これから先はセレクタの書き方やプロパティの種類やその値について勉強して行くだけで、特に覚えなければならない項目はそれほど存在しません。実践で使いながら慣れて行くのです。という訳でここで補講を少し行います。補講は実際にHTMLファイルを二つ用いて外部CSSを適用させてみます。
[ トップページ ]
[ 目次 ]
[ ページの先頭 ]
[ 前項目 ]
[ 次項目 ]
