CSS入門まとめ
CSS入門（29）
CSS入門のまとめです。今までやってきたことを整理しておきます。軽くチェックして、復習してみてください。
お話は、次の順番で進みます。
CSSの基本的なこと
1：CSSの基本文法
CSSの基本となる書き方です。「適用先」→「何を？」→「どうする？」
自信がない人は、記事「CSSの書き方：CSS入門」をご覧ください。
2：複数の適用先
複数の適用先（セレクタ）を、書きたい場合は、「,（カンマ）」で区切ります。同じ指定を何度も書かなくて済みます。
何のことやら忘れてしまった人は、記事「適用先の複数指定」をご覧ください。
3：子孫セレクタ
子孫関係にある場合、したい場合に使います。適用先（セレクタ）を、半角スペースで区切ります。
例えば、「A」の中の「C」という書き方をすれば、「B」の中の「C」には適用されません。グループ分けをした使い方ができます。
自信がない人は、記事「継承と子孫セレクタとは？：CSS入門」をご覧ください。
4：idセレクタ、classセレクタ
特定のタグにCSSを適用したい場合は、idセレクタ、もしくは classセレクタを使います。
idセレクタは、次のように書きます。適用先は、「#（いげた）＋idセレクタ名」です。
#idセレクタ名 { 何を？:どうする？; }
classセレクタは、次のように書きます。適用先は、「.（ピリオド）＋classセレクタ名」です。
.classセレクタ名 { 何を？:どうする？; }
忘れた人は、記事「idセレクタ、classセレクタとは？：CSS入門」をご覧ください。
5：CSSファイルの外部読み込みの方法
CSSファイルを外部から読み込んで、HTMLへ適用するための方法です。
例えば、hoge.cssを使いたいときは、次のように指定します。（CSSファイルは、http://myblog.com/style/下にあるとします）
自信がない人は、記事「CSSファイルの外部読み込み：CSS入門」をご覧ください。
文字
1：文字色の変更【color】
文字の色を変更したいときは、「color」を使います。
例えば、<p>タグの文字の色を白色にするときは、次のように指定します。
自信がない人は、記事「文字色の変更【color】：CSS入門」をご覧ください。
2：フォントの変更【font-family】
フォント・タイプを変更したいときは、「font-family」を使います。
例えば、<p>タグのフォントを、「sans-self」にしたいときは、次のように指定します。
自信がない人は、記事「フォントの指定【font-family】：CSS入門」をご覧ください。
どのようなフォントが良いか分からないときは、記事「日本人が好きなフォントは？：CSS入門」をご覧ください。
3：文字サイズの変更【font-size】
文字サイズを変更したいときは、「font-size」を使います。
（1）キーワード指定
例えば、<p>タグの文字サイズを、「small」に設定したいときは、次のように指定します。
自信がない人は、記事「文字サイズの変更【font-size】（1）：CSS入門」をご覧ください。
（2）数値指定
例えば、<p>タグの文字サイズを、「95%」に設定したいときは、次のように指定します。
自信がない人は、記事「文字サイズの変更【font-size】（2）：CSS入門」をご覧ください。
文章
1：段落のインデント【text-indent】
文章をインデント（字下げ）させたいときは、「text-indent」を使います。
例えば、<p>タグをインデントさせるときは、次のように指定します。
自信がない人は、記事「段落のインデント【text-indent】：CSS入門」をご覧ください。
2：行の間隔【line-height】
行の間隔を調整したいときは、「line-height」を使います。
例えば、<p>タグの行間を半文字分だけあけたいときは、次のように指定します。
自信がない人は、記事「行の間隔【line-height】：CSS入門」をご覧ください。
3：文字の間隔【letter-spacing】
文字の間隔を調整したいときは、「letter-spacing」を使います。
例えば、<p>タグの文字の間を、1/10文字分だけあけたいときは、次のように指定します。
自信がない人は、記事「文字の間隔【letter-spacing】」をご覧ください。
箇条書き（リスト）
1：リストマークの変更【list-style-type】
リストマークを変更したいときは、「list-style-type」を使います。
例えば、「数字」にしたいときは、次のように指定します。
自信がない人は、記事「箇条書きの装飾【list-style-type】：CSS入門」をご覧ください。
2：リストに画像を使う【list-style-image】
リストマークに画像を使いたいときは、「list-style-image」を使います。
例えば、画像（hoge.gif）を使いたいときは、次のように指定します。（画像は、http://myblog.com/image/下に置いてあるとします）
自信がない人は、記事「箇条書きに画像【list-style-image】：CSS入門」をご覧ください。
背景
1：背景色の変更【background-color】
背景色を変更したいときは、「background-color」を使います。
例えば、<h1>タグの背景の色を白色にするときは、次のように指定します。
自信がない人は、記事「背景色の変更【background-color】：CSS入門」をご覧ください。
2：背景に画像【background-image】
背景に画像を使いたいときは、「background-image」を使います。
例えば、<body>タグの背景に画像（hoge.gif）を使いたいときは、次のように指定します。（画像は、http://myblog.com/image/下に置いてあるとします）
自信がない人は、記事「背景に画像【background-image】：CSS入門」をご覧ください。
罫線
1：罫線を描く【border】
罫線を描くときは、「border」を使います。
例えば、<img>タグの回りを罫線で囲みたいときは、次のように指定します。（罫線は、太さ1px、実線、黒色）
自信がない人は、記事「罫線を描く【border】：CSS入門」をご覧ください。
レイアウト
1：間隔（余白）をあける【margin、padding】
間隔（余白）をあけたいときは、「margin（罫線の外側）」か「padding（罫線の内側）」を使います。
例えば、<h1>タグの回りに間隔（余白）を入れたいときは、次のように指定します。（間隔は、全方向5px）
自信がない人は、記事「margin、paddingとは？：CSS入門」をご覧ください。
2：文字の中央揃え【text-align】
文字を中央揃え（センタリング）したいときは、「text-align」を使います。
例えば、<h1>タグを中央揃えするときは、次のように指定します。
自信がない人は、記事「文字の左右・中央揃え【text-align】：CSS入門」をご覧ください。
3：表（table）の中央揃え
表（table）を中央揃え（センタリング）したいときは、「margin」を使います。次のように指定します。
IEブラウザのバグ対応については、記事「表（table）の中央揃え：CSS入門」で確認してください、
自信がない人も、記事「表（table）の中央揃え：CSS入門」をご覧ください。
4：幅と高さを決める【width、height】
幅や高さを指定したいときは、「width」、「height」を使います。
例えば、<h1>タグの幅を500px、高さを400pxに指定したいときは、次のように指定します。
自信がない人も、記事「幅と高さを決める【width、height】：CSS入門」をご覧ください。
5：段組みレイアウト【float】
段組みレイアウト（カラム レイアウト）にしたいときは、「float」を使うと簡便です。
話がややこしいので、方法は、記事「段組みレイアウト【float】：CSS入門」をご覧ください。
リンク
1：リンクを装飾する
リンクを装飾したいときは、適用先を「a」、「a:link」、「a:visited」、「a:hover」、「a:active」にして、それぞれ指定ます。
例えば、マウスのカーソルがリンクの上に乗ったときに、文字サイズを変更する場合は、次のように指定します。
自信がない人は、記事「CSSでリンクを装飾する：CSS入門」をご覧ください。
次回予告
次回は、HTMLとCSSにコメントを入れる方法について書いています。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
15：まとめ
作成日：2008/05/19 更新日：2008/05/19
« 「最後にIEでチェック＋CSSハック」｜「HTMLとCSSにコメントを入れる方法」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/299-580423f0
