CSSファイルを作ってみよう

さて、ついにおでまし、文字の色を変えてみましょう。

今までhtmlを書いてきたわけですが、htmlというのは表示させる文章、それに意味を持たせるタグ(段落、改行、太字という形で強調)を書く場所です。
人間が見やすいように文字色を変える、というデザインの話はhtmlの中には書きません。
過去headタグ内に書いていたこともありましたが今はそういう風に決められています

そこで登場、cssファイルです。ファイルを新規作成してmain.cssかdefault.cssかstyle.cssかhoge.cssか、まあ適当なファイル名で用意しておきましょう。ファイル名はやっぱり半角英数くらいで決めておいた方がいいです。
保存する先はhtmlファイルと同じところで。別の所にcssファイルを置きたい人はパスの表し方を解読してね。
ここから先の作業はhtmlファイルとcssファイルを両方見比べて作っていきましょう。

今回はcssファイルの力を借りて文字を赤くしたり、下線を付けたりします。
具体的には、cssファイルに文字を赤くしたり下線を付けたりする設定を書いて、htmlファイルの方でそれを適用します。
というわけで、htmlファイルとcssファイルをセットにしてやらなければなりませんね。

<html>
<head>
<meta charset="Shift-JIS">
<title>cssファイルをつくっちゃうよ!</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>

文字を赤くするよ!

文字に下線を付けるよ!

</body> </html>
サンプル

文字を赤くするよ!

文字に下線を付けるよ!

5行目にあるのがhtmlファイルとcssファイルをセットにしてくれるタグです。
htmlファイルとcssファイルが同じところにないと、href=""の中身がややこしくなるので同じところに入れておきましょう。cssファイルの名前に応じてstyle.cssの部分を変えてください。
type="text/css"は省略してもOK。3行目の文字コードの指定は、ファイルに合わせてutf-8なりeuc-jpに変えておいてくださいね。

今回は赤い文字にする呪文として「.red」というアイコトバを作ることにします。「.red」というアイコトバを言われたら、文字を赤くするように設定しておきます。
別に.redじゃなくて.akairoとか.akamojiでもいいです。分かれば。
redの前のドットを忘れないようにしてくださいね。
では、cssファイルを開きまして、

.red{
}

この中括弧の中に「文字を赤くする」という設定をしておくと文字を赤くするアイコトバができて、「文字を青くする」という設定をしておくと文字を青くするアイコトバができます。
では、文字を赤くする設定をしましょう。色の設定は「color」です。

.red{
	color:red;
}

これが「アイコトバredを言われたら色を赤くする」という設定になります。color:red;の所をblueにしたりgreenにしたりすると、その色になります(使える色の名前は決まっています)。→色の表し方

では、赤くするアイコトバができたところで、htmlファイルの方で使ってみましょう。
ここで使うタグは<span>です。spanタグも開始タグと終了タグでくくって使います。

文字を赤くするよ!

文字に下線を付けるよ!

サンプル

文字を赤くするよ!

文字に下線を付けるよ!

spanタグ自体にはデザインを変える効果はありませんし、この状態ではまだアイコトバを言っていないので、何も変化はありません。
アイコトバ「.red」を唱えるには、次のように書きます。

文字を赤くするよ!

文字に下線を付けるよ!

というふうに、ドットから始まるアイコトバを唱えるには、「class」を使います。ドットを外した「red」のかたちで「class="red"」とします。(classの説明は後で)
すると……

サンプル

文字を赤くするよ!

文字に下線を付けるよ!

見事文字が赤くなりました。
続いて、下線を付けてみましょう。先ほどとは違うアイコトバ「.underline」を用意することにします。cssファイルはじゃんじゃんアイコトバを書いていくことが出来ます。

.red{
	color:red;
}

.underline{
}

先程と同様、.underlineの中括弧の中に「下線を引く」を書いてアイコトバに設定します。
文字の装飾を一手に引き受けてくれているtext-decorationというのがいるので、そいつに「下線を引いてくれ」と言ってやります。

.red{
	color:red;
}

.underline{
	text-decoration:underline;
}

では早速使ってみましょう。下線を引きたいところをspanタグでくくってclassでアイコトバを唱えます。

文字を赤くするよ!

文字に下線を付けるよ!

サンプル

文字を赤くするよ!

文字に下線を付けるよ!

無事文字を赤くし下線を付けることが出来ました。
なお、アイコトバは1度に複数唱えることもできます。

文字を赤くしつつ下線を引くよ!

サンプル

文字を赤くしつつ下線を引くよ!

1度にアイコトバを複数唱えるのは面倒!見にくい!という場合は、アイコトバに複数の設定をしてやれば1つのアイコトバを唱えるだけで済みます。

.redunderline{
	color:red;
	text-decoration:underline;
}

文字を赤くしつつ下線を引くよ!

サンプル

文字を赤くしつつ下線を引くよ!

さて、先ほどの「文字を赤くするよ!」「文字に下線を付けるよ!」はそれぞれ別の段落なのにもかかわらず、段落と段落の間に隙間がなくて別段落ということが分かりづらいですね。これもcssを使ってやりましょう。
隙間を作るアイコトバ……を用意してもいいのですが、今回は「あらゆる段落に隙間を作る」ことを考えます。こうなるとわざわざ段落が登場するたびにアイコトバを唱えるのは面倒です。
段落ならとにかく隙間を作る!という命令をcssファイルに書いてしまいましょう。

.red{
	color:red;
}

.underline{
	text-decoration:underline;
}

p{
	margin:10px 0 10px 0;
}

ご存じの通り、pというのはpタグ、段落タグです。9~11行目は「全てのpタグにmargin:10px 0 10px 0;を設定」という意味になります。pの前にドットが入っていないのがポイント。
そして、このmarginというのが余白を設定してくれるもので、
margin:上余白 右余白 下余白 左余白;
といった風に使います。なので、上の例でいうと上下に10pxの余白、左右に余白なしという意味になります。

サンプル

文字を赤くするよ!

文字に下線を付けるよ!

詳しいことは箱と余白の位置関係で説明しているので、CSSを使えばいずれこういうこともできるんだなあ、くらいでとらえておいてください。

まとめると

html

<html>
<head>
<meta charset="Shift-JIS">
<title>cssファイルをつくっちゃうよ!</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>

20yy年mm月dd日、○○大学××キャンパスにて△△祭が開催されます!
今年度のテーマは「○×△□」です。○×△□らしい○○大学の学園祭へ是非お越しください。

○○大学××キャンパスへは□□線××駅から徒歩m分、☆☆線◎◎駅からバスでm分です。

</body> </html>

css

p{
	margin:10px 0;
}
.red{
	color:red;
}
.underline{
	text-decoration:underline;
}
サンプル

20yy年mm月dd日、○○大学××キャンパスにて△△祭が開催されます!
今年度のテーマは「○×△□」です。○×△□らしい○○大学の学園祭へ是非お越しください。

○○大学××キャンパスへは□□線××駅から徒歩m分、☆☆線◎◎駅からバスでm分です。

ざっとこんな感じでしょうか。もしも下線途中にある赤文字「△△祭が開催」の下線部分も赤くしたい場合は、

△△祭が開催

といったように、赤い文字にするアイコトバ以外に、もう一度下線を引くアイコトバを唱える必要があります。
ここまでできればブログの機能でよくある「htmlエディタ」での投稿が出来るはずです。