ドットインストールでCSSを学ぼう#01〜#03
「ドットインストール」でcssを学び始めてみようと思います。
前回まで、ドットインストールというサイトでhtmlの入門編を学びました。
「ええと…正直、『学びました』と言っていいのかどうか
自信はありません」
わからないところが大半だったような気がしますが（笑）
htmlを学んだらやっぱりcssでしょ！
ということで、本日からcssを学んでいきたいと思います。
#01 cssとはなにか？
htmlが、構造的な文章を書くためのものだったのに対し
cssは、文章の見た目をつくっていくためのものです。
必要なものは、
- ブラウザ
- テキストエディタ
です。
ドットインストールでは、ブラウザはChromeを、
テキストエディタはAtomを使って行きます。htmlのときと同じですね。
今回カバーするcssのバージョンは2.1だということです。
現在のバージョンは３なのですが、まだ仕様が固まっていないところもあるのだとか。
なので、今回は2.1を勉強して行くということです。
ちなみに、cssを学んだあとにはcss3もドットインストールさんで学ぶことができます。
仕様を確認したい時には、HTMLのときと同じようにW3Cという団体が管理していますので、
W3Cのサイトを確認すると仕様書が出てきます。
それでは、いよいよモデルになるサイトを作っていきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS Practice</title>
</head>
<body>
<p>こんにちは。</p>
</body>
</html>
となっています。
言語は日本語、
ページのタイトル<title>は「CSS Practice」
本文は「こんにちは」となっています。
（偉そうに言いましたが、自力で全て書けるかどうかあやしいことに気づきました…）
ブラウザで確認すると、こんなふうになっています。
見えているのは「こんにちは」という言葉のみ。
上のタグに、「CSS Pradtice」と出ていますね。
さあ、いよいよcssを書いていきましょう！
#02 はじめてのCSS
さっそくcssを書いて行きましょう。
書き方には、大きく分けて３通りの書き方があります。
1.headタグのstyleタグの中に書き入れる方法
headタグの中にstlyeタグを入れる方法です。
<head>
<meta charset="utf-8">
<title>CSS Practice</title>
<style>
p{ color: orange; }
</style>
</head>
赤字のところが今回足したところですね。
こうすると、ブラウザ上ではp要素（文字）がオレンジになるはずです。
なってる！OK！
2.p要素にstlye属性で直接規定する
次は、bodyの中のp要素に直接style属性をつけちゃう方法です。
<body>
<p style="color: violet; ">こんにちは。</p>
</body>
赤字のところが今回足したところ。
これ、いちいち設定していたら大変そう。
ちょっとだけ試してみたいときなどにおすすめの方法です。
ちなみに、さっきheadの中でオレンジにしてしまっているので、無効化させておきます。（動画ではコメントにしていました）
/* */
（スラッシュ、アスタリスクと読みます）で囲むとコメントになります。
ブラウザ上で「こんにちは」が紫になっていればOKです。
なってる！OK！
3.外部ファイルに書く方法
progateで学んだ方法もこれでしたね。
新しいファイルを作ります。
（ファイル名が「default.css」になっていますね）
そして
p{ color: skyblue; }
と書きます。
こうすると、「p要素はスカイブルーになりますよ」という意味になります。
そして、これをhtmlのページとつなげます。
headの中に、リンクを書き入れます。
<link rel="stylesheet" href="default.css">
で、先ほどの「default.css」のページとリンクさせます。
hrefは「えいちれふ」と読みます♪（唯一知ってる読み方）
「default.css」のページでp{ color: skyblue; } と書いたものを
「index.html」のページで <link rel="stylesheet" href="default.css">とつなげました。
さあ、文字がスカイブルーになっていれば成功です！
OK！ばっちりです！
styleタグの中に書いてもいいのですが、項目が増えると大変ですよね。
なので、こちらでは別のページに書いて行く方法をとります。
ちなみに、Atomの機能で、この二つの画面を同時に表示させることができるそうなのです。
「command + K」で、画面を分割させて
左側を「index.html」右側を「default.css」の画面にしていました。
これは見やすくて作業がしやすそうですね♪
#03 セレクタとプロパティを理解しよう
「セレクタ」とは、どの要素に対してのものなのかを示すものです。
{}で囲った部分はその要素の特性で、「プロパティ」といいます。
さきほどの
p{ color: skyeblue; }
は、プロパティの値と名前をセットで書いたものです。
一般的には、
セレクタ{プロパティ名：プロパティの値；}
となります。
セレクタには種類がいくつかあります。
ユニバーサルセレクタ
ユニバーサルセレクタは、すべての要素を指定する時に使います。
アスタリスクを使います。
たとえば、次のように書いてみたとします。
*{color: skyble}
アスタリスクのあとに「色はスカイブルー」と指定したので、
全体がスカイブルーになっているはずです。
ブラウザで見てみましょう。
（またTKGの話題なのですね。笑）
すべての文字がスカイブルーになりました。
セレクタに要素名を直接書く
先ほどのpのように、要素名を直接書くこともできます。
p要素、h1要素、div要素などをそのまま書くこともできます。
idとclass
idとclassには特殊な記法があって、
idの場合には#（パウンド記号）をつけた後にid名、
classの場合には. をつけた後にclass名を書きます。
左側がhtml、右側がcssを書いているページで
以下のようにしています。
h1 {color: skyblue; }
これで、見出しのh1「TKG」の文字はスカイブルーになりました。
#first{ color: orange; }
#はidにつくものなので、「うまい」の文字はオレンジに。
.points{ color: violet; }
. はclassにつくものなので、「やすい」と「はやい」は紫になります。
さて、ブラウザで確認してみましょう。
できました！
なるほど！
progateで学んでいたときに、
. がつくものとつかないものの区別がつかなくて困っていたのですが（ちゃんと説明されていたのに頭に入っていなかったのです💦）
. がつくものはclassで指定されているものだったのですね。
納得しました。
#01〜#03は、比較的見たことのあるもので
わからなかったことも確認できて、非常に楽しかったです。
これからもがんばります！
