こんにちは やはです
前回の記事の内容をしっかり理解できました？
ここはとても難しいポイントなので
じっくり時間をかけて勉強してください
勉強というのは点と点を線で繋ぐもの
だと私は思ってます
線を繋ぐためには繋ぎ始めと終わりに線が必要です
CLASS属性やID属性を学ぶと点が出てきます
そしてそれを使った応用が線で繋ぐという事になります
点になる部分をしっかり理解できないとどうなるでしょう？
繋がる先の点が見つからない
なので、線ができません
こうなってしまうと
いつまでたってもその部分の使い方
つまり、応用を聞かせる事ができなくなるんですね
応用とは、基礎・基本をしっかり理解した上で始めてできる事です
基本がわからないまま次に進もうとはしないでください
基礎・基本をしっかり覚える事が、一番の近道です
わからない自分に嫌気が差している方もいるかもしれません
頑張ってる自分にあまり負担をかけないでください
頑張って勉強しているだけで十分ですよ！
それでは今日も始めていきましょう
- CLASS属性の複数追加
- スタイルの優先順位
今回はこの内容です
前回お話ししていた
ID属性
CLASS属性
こちらの応用になります
ここもとっても難しい所です
時間をかけてゆっくり理解していきましょう
- タグには複数のCLASS属性をつける事ができる
前回のお話しで、ID属性は１つのタグに複数つける事ができない
そうお話ししました
これは、ID属性は１ファイルに１回だけ使える固有名詞なので
タグにIDという固有名詞をつけて
そこに更にもう１つつけることはできないからです
しかし、CLASS属性であれば
同タグに複数のCLASS名をつける事ができます
画像をみながら勉強していきましょう
CLASS名( .yamada)が入ったコードを複数用意しました
前回のおさらいで、ここにアンダーラインをつけてみましょう
ウェブで確認しましょう
全部にアンダーラインが入りましたね
太字でフォントサイズが大きいのは<h1>のタグを使用しているからです
この様に、一括で適用したい時は
CLASS属性につけるだけで問題ありません
それでは、下から二番目に赤文字を入れたい場合はどうしましょうか？
ここは皆様が勉強された、ID属性を使用すればいいですね
画像の様にID属性を追加してスタイルを適用すると
できましたね
皆様は今この様に色を指定できる知識があります
では、上から２番目と３番目に緑色をつけたい場合はどうでしょう？
どちらにもID属性をつけてやりますか？
正解です
勿論そのやり方でも適用させる事ができます
しかしそれだとID属性をつけてID名を変えて
１つ１つにスタイルを適用させて
ちょっと大変です
なので、複数のCLASS属性を重ねて、効率よく適用させましょう
画像をみながら解説していきます
わかりやすくするために、２〜４番目を離しました
４番目は現状態からの変化を見るためです
それでは、もう１つCLASS属性を追加しましょう
ID属性の時みたいにもう1度CLASS属性をつけると思った方
多いんではないでしょうか？
残念ながら、少し違います
もう１つCLASS属性を入れる場合はこの様に打ち込みます
わかりますか？
<h1 class="yamada yamada1">class属性の〜〜〜</h1>
CLASS名yamadaの後に半角スペースとyamada1が入っています
大事なのはCLASS属性[ " " ]の中に打ち込む事です
気をつけてください
この様にCLASS名がすでに１つある場合
半角スペースで区切って連名にするだけで追加できます
ID属性を追加するより幾分か簡単ですね
CLASS名は幾つでも追加できます
こういった様に
更にCLASS名をつける事により絞り込む事ができます
スタイルを指定しましょう
今回はフォントカラーグリーンをつけています
ウェブで確認しましょう
スタイルを適用させる事ができました
１つ１つにID属性をつけていくやり方も正解です
しかし、コードが増えてきた時
１つ１つにID名をつけるは大変です
更に、増える分スタイルの量も増えるので
CLASS属性をうまく使っていって
効率よくコードを書いていきましょう
もう１つのCLASS名は次のお話しで使います
- スタイルの優先順位
ここも大事です
スタイルには優先順位があります
スタイルのコードは上から下に上書きされていきます
なので、同名のタグを指定した場合
下に書かれた内容が優先されます
yamada1のCLASS名に
フォントカラーグリーン
フォントカラーブルー
と、２つつけてみました
どちらが適用されるかわかりました？
ウェブで確認してみましょう
フォントカラーブルーが適用されました
フォントカラーブルーの方が
フォントカラーグリーンより下に
コードが書かれています
なので、下に書いたコードが優先されました
もう１つ問題をみてみましょう
どうなるでしょう？
こうなります、フォントカラーブラウンが追加されました
しかし、フォントカラーはブラウンより下に
ブルーの指定があるので、ブルーのままです
途中でコードを入れたとしても
同コードであれば下にあるコードが優先されましたね
これで、下に行くほど上書きがされたという事になります
しかし、あくまで上書きされるのは
その中のプロパティ名と値のみです
ブラウンが入ったプロパティに
フォントサイズを入れてみましょう
ウェブで確認してみましょう
こうなりました
色は一番下のカラーが適用されています
これは下に書いたコードが上書きされたためです
しかし、フォントサイズは他に上書きされる部分がないので
そのまま適用されたという事がわかります
プロパティ全部ではなく
プロパティ値のみ上書きされる事がわかりますね
しかし、あくまで上書きされるのは
同タグ、同CLASS名・同ID名です
更にいうと属性にも適用させる優先順位があります
ID属性＞CLASS属性＞タグ
の順で優先されます
ID属性を追加しました
ID属性には現在フォントカラーが適用されています
ウェブで確認してみましょう
こう表示されました
ID属性の方が優先順位が高いので
フォントカラーが赤色に変化しています
ID属性でフォントカラーを指定した事で
CLASS属性のフォントカラーを全て上書きして
赤色が適用されたという事になります
このタグの色を変えたい場合は
- ID属性のフォントカラーを変える
- 赤色のフォントカラーを指定したプロパティより下にコードを書いて上書きする
事でカラーを変えることができます
ですが、CLASS属性はそうはいきません
CLASS名では、下に書かれたコードが優先されるとお話ししました
CLASS名が違うもの同士で
同じスタイルを指定した場合をみてみましょう
CLASS名 yamada1 yamada2を使ってみましょう
ウェブで確認してみましょう
yamada2のコードが下にあるので
そちらのスタイルが適用されました
順番を逆にしてみましょう
ウェブで確認してみましょう
青色になりました
ここでわかることは
CLASS属性には優先順位がない為
下に書かれたコードが優先されるということです
つまり上に書いた不等号に今のコードを置き換えると
#yamada > .yamada = .yamada1 = .yamada2 > h1
という事になりますね
CLASS属性は複数あったとしても
プロパティ名とプロパティ値は
タグ内のCLASSで、一番下にあるプロパティが優先させるという事です
今日のまとめ
- CLASS属性は同タグに複数指定できる
- 属性には優先順位がある
- コードは下にあるコードが基本優先
- プロパティではなく、プロパティ値が上書きされる
２回続けて、とても難しい内容でした
なかなか理解できませんよね？
冒頭でも言った様に
ここでたくさんの時間を使って
しっかりと点を作りましょう
ここをマスターするとかなりスタイルが楽になります
大事な部分は
打ち消しではないので
あくまで同プロパティが上書きされるという事です
覚えておきましょう
コードを書き直す際に、変わらない時があれば
この優先順位を確認してみてください
今日もお疲れ様でした
やはでした！！
よくわかるHTML5+CSS3の教科書【第3版】
Amazon（アマゾン）
3,080〜8,927円
私はこちらの参考書を使って勉強していきました。
テスト問題などもそうですが、知識０からでもわかりやすく勉強できたところが
一番のポイントかと思います。もし自分でもどんどん学習したいのであれば
数ある参考書の１つの目安として考えてもいいかもしれません。