こんにちは やはです
CSSの使い方はなんとなく理解できましたか？
やり方は色々とありますが
基本的には１つのやり方が主流なので
迷うことなく使うことができると思います
CSSは組み合わせでたくさんの表現ができます
ぜひしっかりと勉強して使い方をマスターしていきましょう
それでは始めていきましょう
今回はこの内容です、順番に学んでいきましょう
- CSSの用語
- 複数のセレクタを選択
次はセレクタに関して学んでいきましょう
宣言を複数指定することにより
セレクタにデザインを一括で行える事がわかりました
実はセレクタも複数に指定する事ができます
先ほど指定したCSSのbody部分をh1に変えて
見出しにCSSを指定しましょう
宣言を横並びにしていくとわかりにくくなっていきます
このように宣言毎に段落を下げていくと
読みやすいコードになりますよ
h1に変更した後にウェブで確認してみましょう
こうなりますね
今h1に指定されているCSSは
- 背景にh1を指定
- フォントサイズが20px
- フォントカラーがトマト色
となっています
これをh3のコードに追加したい時は
このように「,」で区切りその後ろにセレクタを追加します
私は段落をつけていますが
必要なければ横並びで書いても構いません
しかし、指定するセレクタが増えていく場合は
コードを読みやすくするために
段落をつけていくといいでしょう
それではウェブで確認してみましょう
こうなりました
h2にもつけてみましょう
追加してみました、ウェブで確認しましょう
こうなりました
同プロパティを指定したい時は
１つ１つ書かずにセレクタを追加する事で
一括で適用させる事ができます
さらにHTMLの<h >のようにフォントサイズが変わっていたり
文字の太さが変わっていても
CSSのスタイルが適用されます
これにより文章の使い分けが容易になります
今日のまとめ
- CSSはプロパティを複数指定できる
- セレクタも複数指定できる
- コードはできるだけ読みやすく書いていこう
複数指定を行い、コード量を少なくする
これはとても大事な事です
慣れないうちは同じコードを何度も書いてしまいます
しかし、同じ内容をできるだけまとめる事ができれば
それだけ早く仕事を進める事ができます
また、コードは自分だけが読めればいい
というものではありません
自分一人で全てを終わらせる場合は別ですが
この先IT業界で働いていく場合
周りのメンバーと協力して仕事を行う事もあります
それ以外にも他の人の仕事を引き継いだり
自分の仕事を引き継いだり
複数人で仕事を行う事がおきてきます
その際に、読みにくいコードを書いていたらどうでしょう？
他のメンバー、引き継いだメンバーはコードを読み解く所から
始めないといけません
そうならないように、コードを読みやすくかくように心掛けておけば
作業をスムーズに行う事ができます
さらに自分で変えたい所や間違えたところを直すときも
すぐに修正箇所を発見できます
最初はガムシャラで構いませんが
慣れてきたらどうやればコードが読みやすか？
と、考えながら作業を行なっていってください
それでは今日もお疲れ様でした
やはでした！！
よくわかるHTML5+CSS3の教科書【第3版】
Amazon（アマゾン）
3,080〜8,927円
私はこちらの参考書を使って勉強していきました。
テスト問題などもそうですが、知識０からでもわかりやすく勉強できたところが
一番のポイントかと思います。もし自分でもどんどん学習したいのであれば
数ある参考書の１つの目安として考えてもいいかもしれません。