『CSS3』( 読みは「シーエスエススリー」)を記述してみましょう。CSSとはhtmlで書かれた内容を装飾する役割を持った言語を指します。CSSが装飾であるなら、htmlは骨組みっていえるのかな？
HTML
文章の骨組み
⇅
CSS
文章の装飾
前回、ブラウザでHello world!という文字を表示させることができました。早速こいつに色をつけてみます。今回使うhtmlはこちら
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Webのタブの名前だよ！</title>
</head>
<body>
<p class="moji">Hello world!</p>
</body>
</html>
文章を解説すると…
前回と一緒
| <!doctype html> | htmlで記述 |
| <html lang=”ja”></html> | htmlは日本語で記述 |
| <head></head> | titleとかmetaとかはこの中に書く |
| <meta charset=”UTF-8″> | 文字化け防止とか(私も分かってない) |
| <title>Webのタブの名前だよ！</title> | タブに名前を付けられる |
| <body></body> | bodyの中にWebサイトの中身を書く |
違うところ
| <link rel=”stylesheet” href=”style.css”> | styleとい名前のついたcssをhtmlに適用する |
| <p class=”moji”>Hello world!</p> | Hello world!を表示 |
※補足Hello world!を囲んでいる<p></p>は囲んだ文字を表示させます。またp class=”moji”は<p></p>にmojiという名前をつけています。さらっと書きましたが名前をつける作業は大事なので別途記事を書きます。そのうち…
名前を付けて.htmlで好きな場所に保存したら、ブラウザで開くとこんな感じになっています。
何も変化はありません。
ではこちらのcssを適用してみましょう。htmlファイルとは別にエディタでcssを書き、style.cssという名前でhtmlと同じフォルダ内に保存します。
.moji {
color: white;
background-color: blue;
}
そして、ブラウザを更新してみると
背景色と文字に色が入りました！やった！
ではcssの解説
| .moji{} | html上で、mojiと名前がついたところにスタイルを適用 |
| color: white; | テキストの文字色を白に指定 |
| background-color: blue; | 背景色を青に指定 |
htmlと同様に、cssも文字の塊なんですね～
今回は文字の色と背景しかいじりませんしたが、他にもいろいろとできることがあるので、それはまたどこかで。
ps
wordpress のediter使うのに苦戦・・・そして相変わらずソース表示かっこ悪い・・・
⇒ 10/28日にちょっとましになった