CSSを勉強するに当たり
スタイルシートの入れ方が分かったところで、具体的にCSSコマンドを勉強しましょう。CSSコマンドを駆使して、背景や隙間、文字の書体や大きさなどを、自由自在に変更することができます。
お勧めのCSSリファレンス
CSSリファレンスとは、CSSコマンドの用途を説明してある辞書のことを言います。私がCSSリファレンスを作るよりも、世の中には、すばらしいCSSリファレンスがたくさんございますので、そちらに、お任せしたいと思います。
私がお勧めするCSSリファレンスは
基本は本で覚える
スタイルシートを覚えていく上で、必ず何か本を何冊かはもっておいてください。スタイルシートのコマンドは、忘れやすいものです。そういったときに、本だとすぐに見ることができて便利です。
プログラミング関連で本を買う場合は、次のような種類の本を持っておくと便利です。
- 基本的な使い方
- リファレンス
- サンプル集
私もスタイルシートの本を何冊も持っていますが、本の中に気づいたことや、本には書いていないことを、書き込むなどして、ノートのように使っています。いろいろなプログラミング言語を使っていると、記述方法をド忘れすることがあるので、そういったときは、落書きだらけの本を読み返します。すると、あたかも、もう一度勉強したかのように、スタイルシートの技をスラスラと思い出します。
CSSの書き方
HTMLのタグを覚えた後は、CSSが一つの山場になると思います。CSSの書き方は、HTMLタグによるマークアップとの組み合わせが、面倒なので、難しいように感じる人も多いと思いますが、実はとても簡単です。
HTMLタグに設定
例えば、pタグがあり、このpタグ全体の文字サイズを設定したい場合は、次に示すように、pと書いた後に、半角スペースを入れて、「{」と「}」を書いて、その中にCSSコマンドを書きます。
p {font-size: 0.9em;}
font-sizeコマンドは、文字サイズを設定するコマンドです。この設定では、pタグ内の文字は、すべて0.9emの大きさで表示されます。emは、文字の大きさの単位です。単位については、32.スタイルシートで使う単位をご覧ください。
ちなみに、「{」と「}」の括弧の呼び方をご存じでしょうか？。詳しくは、15番外編.HTMLやCSSで用いられる括弧をご覧ください。
id属性に設定
22.divタグで領域確保でid属性について、詳しく説明しました。このid属性に、CSSの設定をすることができます。例えば
<div id="header">
<div id="top-logo">ロゴ</div>
<div id="top-navi">ナビゲータ</div>
<div id="top-search">サイト内検索</div>
</div>
このheader IDに、CSSコマンドを適用する場合は
#header {font-size: 0.9em;}
このように、「#（シャープ）」を付けてID名、この例では「#header」と入れます。すると、header IDで挟まれた領域の文字列「ロゴ」や「ナビゲータ」、「サイト内検索」は、文字サイズが0.9emになります。
class属性に設定
18.html、title、divの説明でclass属性について、簡単に説明しました。このclass属性に、CSSの設定をすることができます。
<div class="honbun">
<h3>綿布団について</h3>
<p>綿布団とは、どうのこうの・・・</p>
</div>
このhonbun CLASSに、CSSコマンドを適用する場合は
.honbun {font-size: 0.9em;}
このように、headerの前に「.（ドット）」を入れます。すると、honbun CLASSで挟まれた領域の文字サイズは、すべて0.9emの大きさで表示されます。
これらの組み合わせも可能
例えば、class属性での例を借りて、honbun CLASS内の文字サイズは、すべて0.9emにしたいけど、h3タグの文字は、1.2emにしたい場合は
.honbun {font-size: 0.9em;}
.honbun h3 {font-size: 1.2em;}
このように「.honbun」の後に、半角スペースを開けて、「h3」と書きます。この場合の設定の優先順位は、「.honbun」よりも、「.honbun h3」の方が優先されます。
次の例は、おふとんの人で、実際に設定しているスタイルシートです。
#body #main-contents .element .com p {font: 90%/150% sans-serif;}
body IDの中の、main-contents IDの中の、element CLASSの中の、com CLASSの中のpタグに、fontコマンドを設定しています。この場合も同様に、それぞれのID、CLASS、タグを、半角スペースで区切ります。
CSSコマンドの簡単リファレンス
CSSの書き方がわかったところで、あとは、どのようなコマンドがあるかを知るだけです。皆様には、詳しくは、本や「とほほのＷＷＷ入門」を参考にして頂くことにします。ここでは、たくさん存在するコマンドの中で、よく使って、しかも重要なコマンドを並べてみました。そして、「とほほのスタイルシート入門」の説明では、足りない部分を、述べていきたいと思います。
background
背景色や背景画像を設定するコマンド
border
罫線を設定するコマンド
clear
ブロック要素の流れ込みをキャンセルするコマンド
color
文字色を設定するコマンド
display
ブロック要素やインライン要素を入れ替えたり、非表示にしたりするコマンド
float
ブロックの流れ込みを設定するコマンド
font
文字のサイズ、段落の行間、フォントスタイル、装飾を設定するコマンド
height
ブロック要素の高さを設定するコマンド
line-height
段落の行間を設定するコマンド
list-style-type
liタグのスタイルを設定するコマンド
margin
罫線の外側の余白を設定するコマンド
padding
罫線の内側の余白を設定するコマンド
text-align
文字の左揃え、センターリング、右揃えを設定するコマンド
text-indent
段落のインデントを設定するコマンド
width
ブロックの横幅を設定するコマンド
定義済みクラスの簡単リファレンス
まとめ
ここで覚えることは、コマンドの詳細な使い方ではなく、「このコマンドは、どういった機能を持っているのか」程度で、かまいません。なぜなら、わからなければ、その都度、例を見れば良いからです。
- ← 前のページ 「28.スタイルシートの制作と設置」
- 「30.backgroundコマンド（CSS）」 次のページ →