CSS3とは

Pocket

『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も文字の塊なんですね～

今回は文字の色と背景しかいじりませんしたが、他にもいろいろとできることがあるので、それはまたどこかで。

wordpress のediter使うのに苦戦・・・そして相変わらずソース表示かっこ悪い・・・

　⇒　10/28日にちょっとましになった