【初心者向け】はじめてのCSS ～第1話～

最近、「WEBをイチから学びたい！」という意欲旺盛な挑戦者とやり取りをすることがあります。その際に利用している自分なりにまとめた資料があるのでご紹介しようと思います。

ちなみにこの記事は「WEBデザインって何？」「昔ちょっとかじったけど正直よく分かってない！」って感じの人向けの内容になるので、現役バリバリのWEBデザイナーさんはブラウザを閉じてください・・・。

ってのは嘘ですが、皆さんもWEB未経験の新人さんに”基礎から学んでもらいたい時に”、「とりあえずWEB本読んどけ！」っていうのも無責任すぎるんじゃないかな～って思うので、この記事に沿って進めてみるのも良いかもしれません。

基本的な部分がほとんどですが、「あっ！そういうことだったの？」って新たな発見があったりすれば教える側もメリットはあると思います。

まずは、CSSの内容に入る前にそもそものHTMLから確認していきます。

そもそもHTMLって何？

一般的に皆さんが普段から見ているWEBサイトは、複数のページがひとつのサイトというものに集約されたもので、その1ページ（例えばトップページとか）を表示して見えるようになっています。そのWEBサイトを構成している文書（例えば○○.htmlとか）のことを「ウェブページ」と呼びます。そしてその構造（中身）は、いくつもの「タグ（tag）」と呼ばれる文字列（例えば<p>タグとか<a>タグとか）が組み合わさって、画像やらテキストやら動画やらが表示されています。

そして、そのウェブページに記述されているコードに使用されている言語を「HTML(Hypertext Markup Language)」と呼びます。このHTMLによって記述されたウェブページのことを、別の呼び方で「HTML文書(HTML document)」なんて呼ばれることもありますので、なんとなく覚えておくと良いでしょう。

さらに、このHTMLのような言語のことを「マークアップ言語」なんて言い方もします。ややこしくなってきましたね・・・。

そして、このHTMLは「W3C(World Wide Web Consortium)」という組織によって策定されている標準規格になっています。「標準規格って何？」ってなりそうですが、簡単に言ってしまえば「W3Cという組織が策定しているHTMLというマークアップ言語によって、WEBページは構成されモニターにWEBサイトを表示している！」ってこと。

深く理解したい場合は「W3C html」などで検索してみてください。

・・・HTMLについてはザックリこれくらいにして、CSSに入っていきたいと思います！

ところでCSSって何？

「ウェブページの見た目」を指定すること（「文字の色」とか「画像のサイズ」とか）を「スタイル」と言いますが、このスタイルは「CSS(Cascading Style Sheet)」というファイルで記述され「スタイルシート」と呼ばれています。

「CSS＝スタイルシート」と覚えちゃいましょう！

CSSもHTML同様にW3Cにより策定されている標準の規格になります。また出た!標準規格・・・。

そしてこのスタイルシートは、決まった構文（ルール）に従って記述しないといけません。「構文って何だ？」ってなると思いますが順を追って見ていきましょう。

細かく説明したいところですが、本当のイチから話をすると長くなりすぎてしまうので、「HTMLにおけるタグというものは少し理解しているという前提」で進めます。この時点で「タグって何？」という方は、申し訳ありませんが一旦「HTML タグ」で検索してからもう一度戻ってきてください。よろしくお願いします・・・。

では、先に進みます。

まずは、CSSの記述を理解しよう！

例えば、「すべての<p>要素の文字色を赤色にする」という指定をする場合は、以下のように記述します。

p{ color: red; }

1	p{ color: red; }

構文の内容は、「<p>というセレクタに対して、フォントカラーを赤色にする」という意味。

セレクタ{ 宣言ブロック }

1	セレクタ{ 宣言ブロック }

ちなみに、この構文は「セレクタ」と「宣言ブロック」という2つの大きな要素から成り立っています。

この「セレクタ(selector)」は、スタイルを適用したい対象の要素（例で見るところの<p>要素）のことで、そのセレクタに対して、宣言ブロック内に記述した「文字色を赤にする」指示を適用させることができます。

また、この宣言ブロック内には複数の宣言を記述することもできます。

p{ color: red; font-size:14px; }

1	p{ color: red; font-size:14px; }

または、「改行」を入れて記述することも可能。

p{ 
  color: red;
  font-size:14px;
}

color: red;

font-size:14px;

}

構成を見てみると、宣言ブロックの中は「プロパティ」と「値」になっています。

p{ プロパティ: 値;}

1	p{ プロパティ: 値;}

{プロパティ(color)：値（red）;}となります。値の後ろに「;（セミコロン）」を入れるのを忘れないようにしましょう。

ホワイトスペース

CSSでは、単語の前後にホワイトスペースを挿入することができます。
ホワイトスペースとは「空白(space)」「タブ(tab)」「改行(line feed)」「復帰(carriage return)」「改ページ(form feed)」という5種類を総称した意味のこと。

このルールにより、複数の宣言を改行で記述することが出来る。

コメントアウト / 注釈

CSSの中には、注釈などのコメントを記述することができます。一般的に「コメント」と言われますが、コードを記述する人、それを編集する人など、複数人で管理するようなWEBサイトであれば、他の人が見たときに、そこに何が書かれているのかをすぐに見分けられるように「わかりやすいコメント」を付け加えておくようにしましょう。

コメントアウトの書き方

CSSのコメントアウトは「/*」と「*/」で囲みます。そうすることで、囲まれた部分の文字列は「コメント」であると認識され、モニター上には表示されずにコード内でのみ確認できるようになります。

▼記入例

一行コメントの場合↓

/* こちらはコメントになります。 */

1	/* こちらはコメントになります。 */

また、複数行コメントの場合↓

/*
　こちらはコメントになります。
*/

　こちらはコメントになります。

スタイルシート（CSS）の種類

スタイルシートは大きく分けて3種類のタイプがあります。
タイプと言っても、記述の仕方が違うというよりも「どこにスタイルが書かれているのか？」でわかれています。

▼スタイルシート3タイプ

外部スタイルシート
内部スタイルシート
インラインスタイルシート

1.外部スタイルシート

HTML文書とは、別のファイルとして読み込まれる形式のスタイルシートを「外部スタイルシート」と呼びます。ひとつのCSSを別々のページ(HTML)で適用させたい場合などは、この外部スタイルシートを利用します。ファイル形式は「○○.css」という拡張子で保存します。

外部スタイルシートをHTML内に読み込んで利用する場合、HTML文書の<head>～</head>内に、link要素を使用して読み込んでください。link要素とは、HTML文書を他の文書に関連付けるために使用されるもので、「rel属性」「href属性」という属性を持っています。

rel属性・・・関連付けの種類
href属性・・・関連付けるファイルのURL

▼外部スタイルシートの読み込み方
例えば、「sample.html」に「style.css」を読み込む場合を見ていきましょう。

<!DOCTYPE html>
<head>
<title>サンプルサイト</title>
<link rel="stylesheet" href="style.css"> /* 外部スタイルシート読み込み */
</head>
<body>
     コンテンツ内容
</body>
</html>

<!DOCTYPE html>

<head>

<title>サンプルサイト</title>

</head>

<body>

コンテンツ内容

</body>

</html>

link要素のrel属性に「stylesheet」と指定し、href属性に読み込みたいCSSファイル「style.css」を記述すればOKです。

2.内部スタイルシート

HTML文書の<head>～</head>内に直接<style>～</style>というタグを記述し、その中にそれぞれのスタイルを記述して利用するのが、内部スタイルシート
になります。

▼内部スタイルシートの記述例
例えば、「sample2.html」の<head>～</head>に内部スタイルシートを記述すると、以下のようになります。

<!DOCTYPE html>
<head>
<title>サンプルサイト</title>
<style type="text/css">　/* 内部スタイルシート */
     p{color: red;}
</style>
</head>
<body>
     <p>コンテンツ内容</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>サンプルサイト</title>

p{color: red;}

</style>

</head>

<body>

<p>コンテンツ内容</p>

</body>

</html>

ここで気をつけなければいけないのが、内部スタイルシートについては直接記述されているHTML文書だけ（例えばtop.htmlだけとか）に適用されるということです。例の場合は「sample2.html」内の「<p>タグで囲まれた部分の文字色を赤にする」ということになります。

3.インラインスタイルシート

HTMLの各要素はstyleという属性を持っています。その属性に対してCSSの宣言を設定することでスタイルを適用することが可能になります。

▼インラインスタイルシートの記述例
例えば、HTML文書に書かれた以下の<p>要素の文字色を青にしたい場合

<p style="color: blue;">ここの文字は青色になります。</p>

1	<p style="color: blue;">ここの文字は青色になります。</p>

また、複数のスタイルを適用したい場合は、半角スペースを空けて、並べて記述してあげればOKです。

<p style="color: blue; background-color: yellow;">ここの文字は青色になります。</p>

1	<p style="color: blue; background-color: yellow;">ここの文字は青色になります。</p>

これで背景色が黄色、文字が青になる。

スタイルシートを部品化する

スタイルシートは、別のスタイルシートを読み込むことができます。ちょっと表現が複雑ですね・・・。どういうことかと言うと、「A.css」で「B.css」を読み込むということ。・・・。伝わりますかね。。。

▼スタイルシートを読み込む記述例
スタイルシートを読み込むことを「インポート」と呼びますが、その方法は「@import文」を使います。

@import url{ 対象のCSSファイル };

1	@import url{ 対象のCSSファイル };

url{};の中に読み込みたいCSSファイルを記述してください。

<!DOCTYPE html>
<head>
<title>サンプルサイト</title>
<link rel="stylesheet" href="a.css">
</head>
<body>
     <p>コンテンツ内容</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>サンプルサイト</title>

</head>

<body>

<p>コンテンツ内容</p>

</body>

</html>

↑ sample3.htmlに「a.css」を読み込む。

@import url{b.css};
body{background-color: black;}

1 2	@import url{b.css}; body{background-color: black;}

↑ a.cssに「b.css」を読み込む。

p{color: green;}

1	p{color: green;}

↑ b.cssに<p>要素の文字色を緑にするという指示を記述。

このように、「CSSで他のCSSを複数読み込む」ということが可能になっています。ややこしいですね・・・。

ひとまずここまで簡単にHTMLやCSSについてお話してきましたが、基本的なことを分かりやすくまとめているつもりでもなかなか簡単にまとめるのも大変だということに気付かされます・・・。それはそれで経験として、より新人さんや初心者の方にわかりやすく説明ができるようになるための練習を積み重ねていきたいですね・・・。

まず「【初心者向け】はじめてのCSS ～第1話～」は、ここまでとして一旦休憩を挟むことにします。続きは随時書いていきたいと思います。