生涯、学習していきたい

2018年はプログラミング学習に凝っています。

ドットインストールでCSSを学ぼう#01〜#03

  「ドットインストール」でcssを学び始めてみようと思います。

f:id:ponnkichi:20180128213927p:plain

 

 

  前回まで、ドットインストールというサイトでhtmlの入門編を学びました。

f:id:ponnkichi:20171219214742p:plain

「ええと…正直、『学びました』と言っていいのかどうか

自信はありません」

 

わからないところが大半だったような気がしますが(笑)

htmlを学んだらやっぱりcssでしょ!

ということで、本日からcssを学んでいきたいと思います。

#01 cssとはなにか?

htmlが、構造的な文章を書くためのものだったのに対し

cssは、文章の見た目をつくっていくためのものです。

 

必要なものは、

です。

ドットインストールでは、ブラウザはChromeを、

テキストエディタAtomを使って行きます。htmlのときと同じですね。

 

今回カバーするcssのバージョンは2.1だということです。

現在のバージョンは3なのですが、まだ仕様が固まっていないところもあるのだとか。

なので、今回は2.1を勉強して行くということです。

ちなみに、cssを学んだあとにはcss3もドットインストールさんで学ぶことができます。

 

仕様を確認したい時には、HTMLのときと同じようにW3Cという団体が管理していますので、

W3Cのサイトを確認すると仕様書が出てきます。

 

それでは、いよいよモデルになるサイトを作っていきましょう。

f:id:ponnkichi:20180128160538p:plain

<!DOCTYPE html>

<html lang="ja">

 <head>

   <meta charset="utf-8">

   <title>CSS Practice</title>

 </head> 

 <body>

   <p>こんにちは。</p>

 </body>

</html>

 となっています。

言語は日本語、

ページのタイトル<title>は「CSS Practice」

本文は「こんにちは」となっています。

 

htmlの最初のほうで習いましたね。

(偉そうに言いましたが、自力で全て書けるかどうかあやしいことに気づきました…)

 

ブラウザで確認すると、こんなふうになっています。

f:id:ponnkichi:20180128160928p:plain

見えているのは「こんにちは」という言葉のみ。

上のタグに、「CSS Pradtice」と出ていますね。

さあ、いよいよcssを書いていきましょう!

#02 はじめてのCSS

さっそくcssを書いて行きましょう。

書き方には、大きく分けて3通りの書き方があります。

1.headタグのstyleタグの中に書き入れる方法

headタグの中にstlyeタグを入れる方法です。

f:id:ponnkichi:20180128161307p:plain

<head>

   <meta charset="utf-8">

   <title>CSS Practice</title>

   <style>

       p{ color: orange; }

   </style>

 </head> 

 

 赤字のところが今回足したところですね。

こうすると、ブラウザ上ではp要素(文字)がオレンジになるはずです。

f:id:ponnkichi:20180128161455p:plain

なってる!OK!

2.p要素にstlye属性で直接規定する

次は、bodyの中のp要素に直接style属性をつけちゃう方法です。

f:id:ponnkichi:20180128161612p:plain

 

 <body>

   <p style="color: violet; ">こんにちは。</p>

 </body>

 赤字のところが今回足したところ。

これ、いちいち設定していたら大変そう。

ちょっとだけ試してみたいときなどにおすすめの方法です。

 

ちなみに、さっきheadの中でオレンジにしてしまっているので、無効化させておきます。(動画ではコメントにしていました)

f:id:ponnkichi:20180128161916p:plain

/*   */

(スラッシュ、アスタリスクと読みます)で囲むとコメントになります。

ブラウザ上で「こんにちは」が紫になっていればOKです。

f:id:ponnkichi:20180128162021p:plain

なってる!OK!

3.外部ファイルに書く方法

progateで学んだ方法もこれでしたね。

新しいファイルを作ります。

f:id:ponnkichi:20180128162318p:plain

(ファイル名が「default.css」になっていますね)

 

そして

p{ color: skyblue; } 

と書きます。

こうすると、「p要素はスカイブルーになりますよ」という意味になります。 

そして、これをhtmlのページとつなげます。

f:id:ponnkichi:20180128162451p:plain

headの中に、リンクを書き入れます。

 <link rel="stylesheet" href="default.css">

 で、先ほどの「default.css」のページとリンクさせます。

hrefは「えいちれふ」と読みます♪(唯一知ってる読み方)

 

「default.css」のページでp{ color: skyblue; } と書いたものを

「index.html」のページで <link rel="stylesheet" href="default.css">とつなげました。

さあ、文字がスカイブルーになっていれば成功です!

f:id:ponnkichi:20180128162750p:plain

OK!ばっちりです!

 

styleタグの中に書いてもいいのですが、項目が増えると大変ですよね。

なので、こちらでは別のページに書いて行く方法をとります。

 

ちなみに、Atomの機能で、この二つの画面を同時に表示させることができるそうなのです。

f:id:ponnkichi:20180128163023p:plain

「command + K」で、画面を分割させて

左側を「index.html」右側を「default.css」の画面にしていました。

 

これは見やすくて作業がしやすそうですね♪

#03 セレクタとプロパティを理解しよう

セレクタ」とは、どの要素に対してのものなのかを示すものです。

{}で囲った部分はその要素の特性で、「プロパティ」といいます。

さきほどの

p{ color: skyeblue; } 

 は、プロパティの値と名前をセットで書いたものです。

 

一般的には、

セレクタ{プロパティ名:プロパティの値;} 

 となります。

 

セレクタには種類がいくつかあります。

ユニバーサルセレクタ

ユニバーサルセレクタは、すべての要素を指定する時に使います。

アスタリスクを使います。

たとえば、次のように書いてみたとします。

*{color: skyble}

アスタリスクのあとに「色はスカイブルー」と指定したので、

全体がスカイブルーになっているはずです。

ブラウザで見てみましょう。

f:id:ponnkichi:20180128211750p:plain

またTKGの話題なのですね。笑)

すべての文字がスカイブルーになりました。

 セレクタに要素名を直接書く

先ほどのpのように、要素名を直接書くこともできます。

p要素、h1要素、div要素などをそのまま書くこともできます。

idとclass

idとclassには特殊な記法があって、

idの場合には#(パウンド記号)をつけた後にid名、

classの場合には. をつけた後にclass名を書きます。

 

左側がhtml、右側がcssを書いているページで

以下のようにしています。

f:id:ponnkichi:20180128212221p:plain

 

h1 {color: skyblue; } 

 これで、見出しのh1「TKG」の文字はスカイブルーになりました。

#first{ color: orange; } 

 #はidにつくものなので、「うまい」の文字はオレンジに。

.points{ color: violet;  } 

 . はclassにつくものなので、「やすい」と「はやい」は紫になります。

 

さて、ブラウザで確認してみましょう。

f:id:ponnkichi:20180128212532p:plain

できました!

なるほど!

 

progateで学んでいたときに、

. がつくものとつかないものの区別がつかなくて困っていたのですが(ちゃんと説明されていたのに頭に入っていなかったのです💦)

. がつくものはclassで指定されているものだったのですね。

 

納得しました。

 

 

#01〜#03は、比較的見たことのあるもので

わからなかったことも確認できて、非常に楽しかったです。

これからもがんばります!