Web制作のアレコレ

cssとは?

CSS(Cascading style sheets)

HTMLの装飾・レイアウトするために用いられる言語。「Cascading」とは、「上流から下流へ流れる」、あるいは「階段状の滝」を意味しており、上から順番に記述していく特性を表す。Styleは、見た目・装飾を示すので、CSSは「上から下に流れるように記述される、見た目を整えるためのシート」と訳すことができる。

CSSの記述ルール

CSSにも、HTML同様記述のルールや用語ある。
CSSは、基本的に以下のように記述し、どの部分の何をどう変更するかをそれぞれ記述する事で、ページの見栄えを変更できる。

同じ場所に複数の記述を指定することもできる。

CSSの用語

セレクタ

どの部分を変更するかの記述。例えば「h1」や「p」など、どのタグに対して適応させるかを指定できる。

プロパティ

セレクタで指定した部分の「何」を「どんな風に」変更させるのかを指定する。「何を」に該当する部分を「プロパティ名」、「どんな風に」に該当する部分を「プロパティ値」と呼び、それぞれを:(コロン)で区切り、行の終わり毎に;(セミコロン)を記述することで、実際に見た目を変更させる。例えば、「color:red;」と書けば、指定したセレクタの文字色を赤色に変更する命令になる。

半角スペース・改行・tab

HTMLと同様、CSSでも半角スペース・改行・tabは、基本的に意味のあるものとして認識されない。そのため、こちらも見やすいようにインデントを入れることができる。自分でわかりやすいコードを書くことを心がけよう。逆に言えば、CSSには、余計なものが入れられない。全角スペース一つでも、正常に動かなくなってしまうので注意しましょう。

コメント

HTMLと同様、CSSでもコメントを使うことができる。
こちらでは「/*ここにコメント*/」という形で「/」と「*(アスタリスク)」で囲むことで、その部分をコメントにすることができる。メモ書きや、一時的に機能を外したい時などに利用しよう。

CSS


body{
    background-color : #F00;
    /*background-image : url(images/dog.jpg);*/
}

cssファイルの読み込み方

cssの記述方法はいくつかありますが、基本的にはHTMLと別にcssファイルを作り、読み込むのが一般的です。
HTMLにcssファイルを読み込むにはlinkタグを使って読み込んでいきます。

linkタグ

linkタグは、リンクする外部リソースを指定する際に使用します。 外部リソースとは、例えば、HTMLファイル、CSSファイル、RSSファイルなど、現在の文書ファイルに関連している外部ファイルのこと。
linkタグは、~の中に記述します。閉じタグはありません。

HTML


<link href="cssファイルまでのパス" rel="stylesheet" media="all">