CSSの文法とホームページに適用させる3つの方法

CSSの文法

HTMLに文法があったように、CSSにも文法があります。
例えばp要素にCSSでデザインをしたい場合、まずは下のように書きます。

このように装飾したい要素を指定して、「{}」(波括弧)の内側に装飾する内容を書き込んでいきます。
ちなみに、装飾を適用させる対象となる要素を「セレクタ」、波括弧の部分を「宣言ブロック」と呼びます。

試しに文字を20px、太字にする場合は宣言ブロックへ以下のように書きます。

宣言ブロックの中は、「プロパティ」「値」の順に書き込みます。
上記の例だと、プロパティは「font-size」「font-weight」、値は「20px」「bold」という事です。
これでp要素で囲んだ中の文字はすべて「20px・太字」の文字に変化します。

CSSを書くとき、プロパティの後ろには「:（コロン）」、値の後ろには「;（セミコロン）」を必ず書きこんでください。

CSSを書いているのに、要素に変化がない時に注意深くチェックすると、「コロンとセミコロンを間違えている」だとか、「抜けている」ということが時々あります・・・
:（コロン）；（セミコロン）は間違えたり忘れたりしやすい要素ですので、注意してください。

CSSは要素を指定して、プロパティ、値を入力する

先ほど説明したように、CSSを使って装飾したい要素を指定して、それからどのような装飾を加えるのかを書き込んできます。
「どこに？」を指定してあげて、次に「何を？」を教え、最後に「具体的な内容」を伝える。と覚えておいてください。

事例では「p」を指定しましたが、「h1」に書き換えてあげれば、h1要素の文字が20px、太字の文字に装飾されます。

ホームページに適応させるには

基本的な文法は先ほど説明したとおりです。
続いてはどこに書き込んだらホームページにデザインが反映されるのかを解説しましょう。
CSSをホームページに適用させるには3つの方法があります。

1.HTMLファイルに直接書き込む方法

この方法はhead要素内にstyle要素を使って書き込みます。
では実際に書いてみましょう。HTMLには以下のように書き込みます。

このように複数の指定をstyle要素の中に書き込んでいく事ができます。
これをhead要素の内側に書き込んでいけば、上記の例であればそのページ内のh1要素とp要素がそれぞれ装飾できます。

2.専用のCSSファイルを作成してホームページに読み込ませる方法

この方法は、先ほど説明したstyle要素の中身を「.css」の拡張子で作成されたファイルに記述して、ページに読み込ませる方法です。
HTMLファイルに直接書き込む場合だと、h1要素のデザインを変えたい。となった場合、全てのファイルを編集する必要があるため、間違えや抜けが発生しやすくなってしまいます。
ですが、ファイルを1箇所にしてまとめ、HTMLファイルに読み込ませれば、編集するファイルが1箇所で済むのでとてもお手軽で、オススメです。

作成する方法は、テキストファイルを「.css」の拡張子に変更して、そのファイルへCSSを書き込むだけ。これで外部CSSファイルの完成です。
CSSのファイル名はHTMLファイルと同じで日本語は使わず、半角英数字を使う様にしましょう。
記号も「_（アンダーバー）」や「-（ハイフン）」程度にとどめる様にしておいた方が無難です。

続いて、ホームページへ読み込ませるには、head要素内へlink要素を使って書き込みます。
例として、CSSのファイル名は「style.css」とします。

赤字で示した箇所は、そのHTMLファイルから見たCSSファイルがある場所です。
フォルダの中にCSSファイルを入れてあるなら、「フォルダ名/style.css」となります。

※フォルダ名も半角英数字を使いましょう。

3.HTMLタグに直接書き込む方法

この方法はWebサイトの中でも1回しか使わないような、スポット的にCSSを適用させる時に使われる方法です。

一部だけCSSが適用されるので、デザインする時には重宝しそうに見えますが、ホームページのデザイン変更や調整を行う際には非常に厄介な方法です。
CSSをひとまとめにする方法でも、ちゃんと個別にCSSを適用させる方法がありますので、あまり多用しないようにしましょう。
個別にCSSを適用させる方法については次の機会にご紹介します。

まとめ

・CSSで装飾したい「要素」を指定して、「{}」(波括弧)
・波括弧の内側には「プロパティ」「値」の順に書き込む
・プロパティの後ろには「:（コロン）」
・値の後ろには「;（セミコロン）」
・CSSの適用は「HTMLファイルに直接書き込む」「専用のCSSファイルを作成して読み込ませる」「HTMLタグに直接書き込む」と3つの方法がある
・「専用のCSSファイルを作成して読み込ませる」方法を主に使うと変更にかかる手間が省ける