生涯、学習していきたい

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

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

サイトの見た目をつかさどる、CSS

今日もCSSについて学んでいきましょう。

 

f:id:ponnkichi:20180130214108p:plain

 

ドットインストールというサイトさん

CSS入門編 #04~#06」について学んでいきます。

 #04 もっとセレクタを使ってみよう

 

#03では、

「ユニバーサルセレクタ」「要素名を直接書く」「idには#、classには.をつける」

ということを学びました。

もっと多くの使い方があるので、今日は続きを学びます。

f:id:ponnkichi:20180130105741p:plain

セレクタの表示のしかたは色々あり、全て意味が違ってくるということです。

上から、コンマで区切る方法・スペースをあける方法・不等号をつける方法・+をつける方法・くっつける方法 です。

f:id:ponnkichi:20171219214742p:plain

「…ひえー…

全部意味が違うの?」

 

尻込みをしている場合ではありません。進みましょう。

コンマで区切る

このようにコンマで区切ると

h1,p{ color: skyblue; } 

 「h1とpがスカイブルーになるよ」ということです。

f:id:ponnkichi:20180130110130p:plain

h1が「TKG」、

pが「うまい」「やすい」「はやい」ですね。

ブラウザで見ると

f:id:ponnkichi:20180130110215p:plain

h1とpの文字がスカイブルーになっています。OK!

スペースをあける

スペースをあけるときには、cssはこのように記述をするそうです。

div span { color: skyblue; } 

これはdivの下の階層、「span」は全部このスタイルにしなさい、ということです。

上の図で見ると、spanは「はやい」「とてもうまい」です。

これがスカイブルーになればOK!

f:id:ponnkichi:20180130110538p:plain

なってる!!OK!

不等号

 さきほどのdivとspanの関係で見てみます。

div > span { color: skyblue; } 

 と間に不等号が入ると、

divの直下のspanはこのスタイルにしなさい、ということになります。

divの直接の下ですね。

f:id:ponnkichi:20180130110130p:plain

「はやい」は、divの直下でなくpの中に入っているので、指定されていません。

このばあい、divの直下になっているのは「とてもうまい」ですね。

「とてもうまい」だけがスカイブルーになっていればOKです。

f:id:ponnkichi:20180130110916p:plain

OK!なってる!

もう、丸暗記することにします(笑)

プラス

プラスはたとえば次のように記述します。

p+p { color: skyblue; } 

 これは、「pの次のp要素はこのスタイルにしなさい」ということです。

さきほどのhtmlを見てみると、

f:id:ponnkichi:20180130110130p:plain

最初のp、「うまい」のあとに

2番目のp「やすい」、3番目のp「はやい」があります。

この場合にはpのあとのp、つまり「やすい」と「はやい」をスカイブルーにしなさいね、ということです。

「とてもうまい」はspan なので適用されません。

見てみましょう。

f:id:ponnkichi:20180130111253p:plain

ほんとだ…!OKです!

くっつける

くっつけるというのは、たとえばこのような形です。

p.points { color: skyblue; } 

 pと、.points(classセレクタなので「.」がついています)をくっつけてある形です。

これは、「pであり、.pointsでもある要素はこのスタイルにしなさい」ということです。

pでも.pointsでもあるということですね。なんだか数学みたいです。

先ほどのhtmlをみると、

f:id:ponnkichi:20180130110130p:plain

pでも.pointsでもあるのは「やすい」ですね。

「はやい」は、spanにくっついているので適用されないのだそうです。

なので、この場合は「やすい」がスカイブルーになっていればOKです!

f:id:ponnkichi:20180130111724p:plain

OK!できています!

スペースを空けるのはprogate でも習いましたが、他は本当に知らなかったことばかり。

「全部すぐに覚えなさい」と言われたら白目になりますが、全部をゆっくりと…、覚えようと思います(笑)

#05 属性セレクタを使ってみよう

今回は、タグに属性があるかないかでスタイルをつけたり、

属性が特定の値だった場合にスタイルをつけたりなどを学習します。

今回学習するhtmlはこちら。

f:id:ponnkichi:20180130112140p:plain

 

今回はaタグで学びます。用意されたaタグは2つ。

aタグにhref属性のみのもの、

aタグにhref属性、title属性、class属性のついているものがありますね。

aタグのうち、title属性のあるものだけを指定する

aタグのうち、title属性のあるものだけを指定する場合はcssをこのように記述します。

a [title]  { color: skyblue; }

 タグ名aの横に大括弧をつけて、その中に属性名を書きます。

今回、aタグの中にtitle属性があるのは「Yahoo」のほうだけなので、

「Yahoo」だけがスカイブルーになれば正解です。

f:id:ponnkichi:20180130112709p:plain

なってる!OK!

aタグのうち、href属性がgoogleだった場合だけを指定する

たとえば、「aタグのhref属性がgoogleの場合だけを指定する」ためには次のように記述します。

a[href="http://google.com"] { color: orange; }

今回、色はオレンジですね^皿^

これで、

f:id:ponnkichi:20180130112140p:plain

Google」のほうだけオレンジになっていればOKです。

f:id:ponnkichi:20180130113049p:plain

なってる!OK!おもしろい!

属性が複数あるとき、その中に条件に合うものがあれば指定する

先ほどのhtmlでは、「Yahoo」のclass属性には「link」と「search」の二つが指定されています。

今回は「class属性にsearchがある場合」について学びます。

この場合、次のように記述します。

a[class~="search" ]{ color: violet; } 

 初めて「~」(チルダマークといいます)をみました!

これをつけることで、

「aタグのclass 属性の中にsearchが含まれるもの」という意味になるそうです。

今回、色は紫ですね。

なので、searchが含まれる「Yahoo」が紫になっていれば正解です!

f:id:ponnkichi:20180130113722p:plain

なってる!OK!

なるほど!

 

aタグのほかにも

input タグのtype属性によってスタイルを切り分けるときなどによく使うそうです。

要チェックやで!!

 #06 擬似クラスを使ってみよう

f:id:ponnkichi:20171219214742p:plain

「ぎ、擬似くらす?」

 

 

初めて聞く単語にいきなり白目になりそうになりますが大丈夫。ちゃんと黒目もあります。お気を確かに!

 

擬似クラスというのは、

ある要素が特定の状態にある場合にスタイルを指定するための、ちょっと特殊なセレクタです。

f:id:ponnkichi:20171219214742p:plain

「…」

 

 

(完全に白目)

 

:first-child

たとえば、こんなリストがあったとします。

f:id:ponnkichi:20180130211129p:plain

箇条書きになっているものですね。(ちょっとほっとします^^;)

この、一番上のリスト、「うまい」だけにスタイルを指定したいとします。

その場合には、次のように記述します。

ul li:first-child{ color: skyblue; } 

 ulのliに、コロン:をつけて「first-child」と記述します。

すると、一番上の「うまい」だけがスカイブルーになっています。

f:id:ponnkichi:20180130211420p:plain

へえ!おもしろいですね。

入れ子構造だから、first-childなのでしょうか?

ハイフン-とか、忘れてしまいそう…。覚えます。

 

ちなみに、現在勉強しているcss2.1では「first-child」しかないのですが、

css3になると、2番目や3番目の要素を指定することもできるのだそうです。

 

リンク:そのサイトを訪問したことがあるかどうかで色を変えたい場合

そのサイトを訪問したことがあると、リンクの文字色が変わるもの、よくありますよね!

訪問する前と訪問後は色が変わって見やすくなります。

未訪問の時

未訪問のリンクを指定するときには、以下のように記述します。

a:link{ color: violet; } 

未訪問のリンクには、aタグに:linkという擬似クラスをつけます。

今回、まだ訪問していないリンクは紫色になっています。

訪問済みの時

訪問済みのリンクには、次のように記述します。

a:visited{ color: orange; } 

 aタグに:visitedという擬似クラスをつけます。

 

また、そのリンクにマウスが乗った時、またはクリックした時にでるスタイルを指定することもできます。

リンクにマウスが乗った時

まず、マウスが乗った時の指定です。以下のように記述します。

a:hover{ color: pink; } 

 aタグに:hoverという擬似クラスをつけます。

マウスをクリックしたとき

マウスをクリックしたときには、以下のように記述します。

a:active{ color: red; } 

 aタグに:activeという擬似クラスをつけます。

 

ちなみに、リンクに関する指定の順序はかならずこの通りにしてください。

a:link

a:visited

a:hover

a:active 

 cssが適用される優先順位から、この通りの順番にしないと意図しない表示になってしまうことがあるそうです。

 

ではブラウザを確認しましょう。

f:id:ponnkichi:20180130212854p:plain

未訪問のリンクは紫になっていますね。OK!

f:id:ponnkichi:20180130212942p:plain

マウスを乗せるとピンクに!

f:id:ponnkichi:20180130213011p:plain

クリックすると赤に!

 

一度ドットインストールの画面に飛び、戻ってくると

訪問済みのリンクは

f:id:ponnkichi:20180130213054p:plain

オレンジに!

 

よくできていますねえ。

ある要素にフォーカスがあたったときにスタイルをあてるための擬似クラス

 

たとえば、input要素にフォーカスがあたったときに、

背景をスカイブルーにしたいときには以下のように記述します。

input:focus{ background: skyblue; } 

 inputタグにフォーカスがいったら背景がスカイブルーになりますよ、ということです。

 

progateでは「background-color」と習ったので、

どちらでも大丈夫なのかな?

さて、これをブラウザで見てみます。

f:id:ponnkichi:20180130213547p:plain

フォーム部分にフォーカスをあてる(クリックしました)と、

ちゃんとスカイブルーになっています!

 

なるほど…!

 

今回はセレクタについてみっちりとお勉強した感じでしたね。

以前ぼんやりと学んだことに、輪郭ができたような感じがします。

また、cssは見た目が変わるので初心者にわかりやすいですね。

かっこいいブログを作られるように、今後もがんばっていきたいと思います^^