PHPstep

トップページ > PHPを始めよう > CSSを簡単に知っておこう

第一章 PHPを始めよう

CSSを簡単に知っておこう

HTMLで情報の意味付けをしたウェブページは、 CSSという言語で色・サイズ・レイアウトなどのスタイルを指定します。 このページでは、CSSについて簡単に解説します。

スタイリングはCSSで指定する

HTMLだけで作成したウェブページは、 特にスタイルを指定しない状態では、 一般的なブラウザで白い背景に黒い文字で表示されるようなシンプルで飾り気の無い見栄えになります。

例えば、「HTMLを簡単に知っておこう」で作成したHTMLファイル test.html を Internet Explorerで表示すると、以下のような白い背景に黒い文字のシンプルな画面となります。

【図】

サンプルページを別画面で開く

上記のようなシンプルなウェブページに色や壁紙を付けたり、サイズやレイアウトを変更した場合には、 CSS(Cascading Style Sheets)という言語でスタイルを指定します。 ウェブページは、基本的にはHTMLとCSSを組み合わせることで作成するのです。

CSSファイルを作成しよう

CSSを理解するために、CSSファイルを作成してみましょう。 CSSファイルはテキストエディタで作成します。 使用されているテキストエディタを立ち上げてください。

テキストエディタのメニューからファイルを新規作成して、以下の内容を記述してください。 HTMLソースを記述した時と同様に、全角文字は使用せずスペースも含めてすべて半角で入力します。

style.css
@charset "utf-8"; p {color:blue;}

記述できたらファイル名を「style.css」として保存します。 保存する場所は test.html と同じフォルダの中です。 ファイル名の「style」は筆者が付けたものですが、特に意味はありません。スタイルを指定するファイルなので「style」としました。 拡張子は必ず「.css」とします。拡張子「.css」は、そのファイルがCSSファイルであることを表します。

test.htmlと同じフォルダ内に style.css という名前のファイルが作成できたら、CSSファイルの新規作成は成功です。

【図】

まだ、HTMLファイルとCSSファイルが関連付けられていないので、この時点で test.html をブラウザで表示しても特に変化はありません。

HTMLファイルからCSSファイルを呼び出そう

ウェブページにスタイルを適用する場合には、htmlファイルからcssファイルを呼び出します。 前の節で作成したHTMLファイル test.html に、以下の赤い一行を追加してください。

test.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>ウェブページを作ろう</title> </head> <body> <p> ウェブページを作りました!</p> </body> </html>

追加できたら上書き保存してください。 追加したのは、HTMLファイルから外部CSSファイルを呼び出す指定です。 外部CSSファイルを呼び出す際には、<link>タグでCSSファイルの場所を指定します。

ブラウザで表示確認してみよう

いま上書保存した test.html をブラウザで表示確認してみましょう。 標準的なパソコンなら test.html をダブルクリックするとブラウザが自動的に起動するはずです。

【図】

サンプルページを別画面で開く

上記の画面ように「ウェブページを作りました!」の文字色が青くなっていれば成功です。

CSSの書き方

いま作成した style.css のCSSソースを確認していきましょう。

style.css
@charset "utf-8"; p {color:blue;}
CSSファイルの文字コード

上記CSSソースの先頭行の @charset "utf-8"; は、文字コードを指定しています。 このCSSファイルの文字コードがUTF-8であることを宣言しています。

セレクタ {プロパティ名:値;}

2行目の p {color:blue;} の部分は、 段落を表すp要素を青くするスタイルを指定しています。

CSSでスタイルを指定する際には、どの部分に対してどのスタイルをどのように適用するかを指定します。 それぞれの名称は、 セレクタ {プロパティ名:値;}となります。

セレクタ(selector)とはスタイルシートを適用する対象のことですが、上記の例ではp要素が指定されています。 プロパティ(property)とは適用するスタイルの種類のことですが、上記の例では色を指定するcolorプロパティの値(value)にblueを指定しています。 CSSではcolorプロパティの他にも様々なプロパティが用意されているので、指定するスタイルに応じて使い分けます。

こうしたCSSの記述ルールに従って p {color:blue;} とスタイル指定したため、 このCSSソースが適用されたウェブページではp要素の色が青くなって表示されたのです。

以上、CSSについて簡単に紹介しました。 CSSのすべてを解説できたわけではありませんが、 ウェブページのスタイルを指定するというCSSの基本的な役割と、 セレクタ {プロパティ名:値;}というスタイルの指定方法を知っておいてください。