CSSはHTMLのタグに様々な属性を与えることが出来る言語であります。

CascadingStyleSheetの略称でありスタイルシートとも呼ばれています。

ここまでも軽くは触れてきていますが、この項目で詳しく説明していきます。

Advertisement

1.CSS(スタイルシート)の基本

まず大前提として、スタイルシートへの記述は全て半角英数字で行うことを覚えてください。

スタイルシートはタグに対して動きを与える"属性"の入れ子となるものであります。
簡単に説明するなら、タグに対する指示書の様なものです。

そしてスタイルシートを設置剃る方法は、大きく分けると以下の3通りになります。

1.タグに直接スタイルシートを書き込む方法。
2.ページ内部にスタイルシートを作成する方法。
3.外部ファイルとしてスタイルシートを作成し 、ページ毎にその外部ファイルを読み込ませる方法。

一般的に広く使われているは、3.の方法であります。

2.セレクタと宣言

実際にスタイルシートを扱う前に、スタイルシートの基本を説明しなければなりません。

スタイルシートのソースコードは、「セレクタ」と「宣言」のルールに沿って記載しなければなりません。

これだけでは、なんのことかさっぱりだと思いますので図を使って説明していきます。

スタイルシートソースコード

p {
margin: 10px;
color: #FFFFFF;
}

div {
margin: 10px;
color: #000000;
}

赤文字で書かれている部分が「セレクタ」で青文字で書かれている部分が「宣言」となります。

つまり上のコードだとpタグがセレクタとなり、「margin(外幅)を10px」、「color(文字色)を#FFFFFF(白色)」という宣言(指定)をしている事になります。
divタグも同様に、div(セレクタ)に「marginを10px」、「colorを#000000(黒色)」を宣言しています。

スタイルシートでタグをセレクタとする場合は、タグ内のローマ字だけで記載するルールですので、「<>」を記載する必要はありません。

上図の様に、スタイルシートの基本としては、まずセレクタを指定し、後に続く宣言は { } で囲う形になります。
そして属性と値の間は : (コロン)で区切り、値の最後には必ず ; (セミコロン)をつけなければなりません。

上図では分かりやすく改行をつけていますが、
p { margin: 10px; color: #FFFFFF; }
の様な記述でも構いません。

3.タグに直接スタイルシートを書き込む

ここまで散々行ってきた方法であります。

タグに直接スタイルシートを書きこむ場合は、style属性を使います。

例えば、画像に200pxの横幅と100pxの縦幅を指定するスタイルシートを作成するならば、タグに直接
<img src="url" style="width: 250px; height: 100px; />
と書きこむ方法となります。
これは、imgタグ内にスタイルシート(style="値")を作り、width属性とheight属性を指定する方法であります。

また、上記の例の場合、
<img src="url" width="250px" height="100px" />
の様な記述でも同様の効果があります。

この方法は、スタイルシートを通さずにタグに直接属性を与える方法でありますが、タグの種類によっては、この手法では属性を指定できない場合がありますので、タグに直接属性を指定する場合は、なるべくス タイルシートを指定する方法をとりましょう。

4.ページ内にスタイルシートをつくる

ページ内のスタイルシートを作成する場所は<head>内に記述します。

まず、<head>内に<style>を作成します。

ソースコード

image53

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ページ内にスタイルシートを作る</title>
<style type="text/css">

body {
background-color: #000000;
}

p {
color: #FFFFFF;
}

</style>
</head>
<body>
<p>背景が黒、文字が白</p>
</body>
<html>

ブラウザ

image54

赤枠内のスタイルタグに記載されている「type="text/css」の部分は、MIMEタイプ(データの形式を指定)を記述しています。
MIMEタイプの説明をすると横道にそれてしまいますので、 ここではスタイルシートを扱う際に指定しなければならないものだと覚えておいて下さい。

ソースコード赤枠内<style type="text/css">~</style>がページ内でのスタイルシート部位になります。

上図のソースコードでは、bodyの背景を#000000(黒)に指定して、pの文字色を#FFFFFF(白)に指定しています。
実際にブラウザ上に反映されているのがわかりますね。

5.外部にスタイルシートを作る

ホームページを作成する際には、基本的にこの「外部にスタイルシートを作る方法」を利用するのが基本となります。

スタイルシートを別ページとして統一しておくことで、新たなコンテンツページを作る度にスタイルシートを指定する手間を省くことができます。

まず、homepageフォルダ内に「style.css」と言う名前でファイルを作成して下さい。

image55

style.cssを作成する場合もテキストエディタで作ってもらえば結構です。

次に、style.cssに下図の様なソースコードを書きこんで下さい。

スタイルシートソースコード

image56

コピー用

@charset "utf-8";

body {
background-color: #000000;
}

p {
color: #FFFFFF;
}

div {
background-color: #CCCCCC;
width: 200px;
height: 100px;
color: #F00F00;
}

赤枠内で指定しているのは文字コードであります。
この場合、文字コードを”utf-8”に指定していることになります。
文字コードを指定しなければブラウザによって文字化けを起こしてしまう可能性がありますので気をつけて下さい。
ここでは文字コードの詳細は控えますが、utf-8で文字化けを起こしてしまうならば他の文字コードを使う手法があることだけは覚えておいて下さい。

青枠内ではbodyタグ、pタグ、divタグにそれぞれ属性を指定しています。
何を指定しているかは、ここまで進めてきた人ならば理解できているはずですので詳細は省きます。

次にhomepageフォルダ内の「index.html」に下図の様にソースコードを書き込んで下さい。

ソースコード

image57

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>外部にスタイルシートを作る</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<p>背景が黒、文字が白</p>
<div>背景が灰色、文字が赤</div>
</body>
<html>

赤枠内のlinkタグでスタイルシートを指定しています。

「href="style.css"」のコードは同一フォルダ内のstyle.cssを外部スタイルシートとして参照する記述です。
指定先のフォルダ(階層)などが変わる場合の記述ルールは、リンクの3.パスの解説で説明しています。

「rel="stylesheet"」はこのページとリンク先との関係性を示しています。
わかりやすく言えばリンク先がstylesheetであることを示す記述です。

「type="text/css"」は4.ページ内にスタイルシートをつくるで解説しましたね。

これでindex.htmlは先ほど作ったstyle.cssをスタイルシートとして認識していることになります。

それではブラウザでindex.htmlを開いてみます。

ブラウザ

image58

外部スタイルシートが反映されているのがわかるはずです。

これでサイト内のページが増えても、同一のスタイルシートを読み込ませられるようになりました。

いちいちタグに属性を書き込んだり、ページ毎にスタイルシートを作るよりは大幅に手間が削減できるのがわかりますね。

6.IDとクラス

タグにはIDとクラスを振り分けることができます。
ここまで進めてきた方法だとpやdivといったタグ毎にスタイルシートを指定する方法でしたが、IDやクラスを指定すれば更に細分化した指定をする事ができるのです。

クラスはclass属性、IDはid属性をします。

まずは、クラスとIDの違いを説明します。
クラスとIDは、使う用途としてはあまり違いはありませんが大きく異なる所があります。
クラスは同一のクラス名を同じページ内で何度も使えることに対して、IDの場合はひとつのページ内にひとつのID名しか使えないルールになっています。

下図を見てください。

ソースコード

<p class="a"></p>

<div class="a"></div>

これはpタグとdivタグに「a」というクラス名を指定しています。

この様に同一のページ内で何度でも同じ名前を指定できるのがクラスであります。

上記のソースコードの場合、クラス名"a"に対して指定したスタイルシートでの宣言は、pにもdivにも適応されます。

次にはIDです。

ソースコード

<p id="a"></a>

<div id="b"></div>

IDの場合はひとつのページ内に同名のID名が存在してはいけませんので、上図のように毎回ID名を変化させなければなりません。

スタイルシートに慣れるまでは全てクラスを利用してもいいかもしれませんが、なるべくならば使い分けるようにしましょう。

スタイルシートでのIDとクラスの記述方法は、7.セレクタの記述ルールで説明します。

7.セレクタの記述ルール

2.セレクタと宣言で説明したセレクタですが、セレクタの記述にはルールがあります。

まずは、下図を見てください。

ソースコード

p {
margin: 10px;
color: #FFFFFF;
}

div {
margin: 10px;
color: #000000;
}

この場合は、スタイルシートが指定されているページの全てのpタグに「marginが10px、colorが#FFFFFF(色コードで白)」、全てのdivタグに「marginが10px、colorが#000000(色コードで黒)」が適応されてしまいます。

ですが、下図の様に記述すれば細かくスタイルシートを割り当てることができるのです。

ソースコード

p {
margin: 10px;
color: #FFFFFF;
}

div p {
margin: 10px;
color: #000000;
}

divの後ろに半角スペースを空け、「p」を記載しました。

こうする事で、「div p」のスタイルシートは、「divタグ」に対してではなく「divタグに囲まれているpタグ」に適応されるようになったのです。

つまり上図のスタイルシートだと、全てのpタグに対して、「marginが10px、colorが#FFFFFF(色コードで白)」が適応されますが、divタグに囲まれたpタグには、「marginを10px、colorが#000000(色コードで黒)」が 適応される事になったのです。

この記述方法は、様々なタグで利用できますし、階層を深くする事もできます。
もしも、pタグ内のaタグを指定したい場合のセレクタは、「p a」の様な記述となり、
divタグ内のpタグ内のaタグなら、「div p a」となります。

このように、同じタグでも状況によってスタイルシートを変えることが可能なのです。


次に、6.IDとクラスで説明したIDとクラスの記述のルールであります。

IDの場合、ID名の前に「#(シャープ)」を記述し、クラスの場合は、クラス名の前に「.(ドット)」を記述します。

つまりは下図のようになります。

ソースコード

#a {
margin: 10px;
color: #FFFFFF;
}

.a {
margin: 10px;
color: #000000;
}

これは、上がID名aに対する指定で、下がクラス名aに対してスタイルシートを指定しています。

また、下図の様な指定の方法もあります。

ソースコード

#a #b {
margin: 10px;
color: #FFFFFF;
}

div#a {
margin: 20px;
color: #F00F00;
}

div.a {
margin: 30px;
color: #000000;
}

p.a p {
margin: 40px;
color: #CCCCCC;
}

この場合、上から「ID名aを指定したタグ内のID名bを指定したタグ」、「ID名aを指定しているdivタグ」、「クラス名aを指定しているdivタグ」、「クラス名aを指定しているpタグ内のpタグ」となっています。

上図では少しわかり辛いかもしれませんが、スペースが空いているセレクタと、そうでないセレクタがあります。

スペースを入れるか入れないかによって意味合いが変わってきます。
例えば、「p.a」と「p .a」は全く違った指定先になります。
前者の場合、クラス名aを指定したpタグであり、後者の場合は、pタグの下層にあるクラス名aを指定したタグとなります。
スペースの空け忘れに注意しましょう。

多少ややこしいですが、この様に、スタイルシートは個別に指定する事ができますので、ホームページのデザインの幅は無限にあるのです。

8.色コード

スタイルシートでは、文字の色や背景などに色を指定する事ができますが、細かな色を指定する場合、色コードを利用しなければなりません。

例えば、「white」や「red」といった色名で指定することも出来るのですが、一般的には色コードを利用しています。
白ならば「#FFFFFF」、赤ならば「#F00F00」といった#の後に6桁の英数字を記述する方法が色コードになります。
この様な色コードの指定方を16進数と呼びます。

ここまでも、色コードは使ってきましたね。

詳しくは、色コード表を御覧ください。

続いてCSSで出来る事へ進んで下さい。

Big-Sea All rights reserved.2010-2013
当サイト内の文章、画像など、すべての無断使用、転載を禁じます。