本日のプログラミング学習
HTML & CSS / 1.5hour
Aug / 45.5hour
Total / 70.5hour
通勤で読んでいる書籍
CSSのセレクタについて
模写をしていて、「この部分にスタイルをあてるとき、どんなセレクタを使うんだっけ？」となることがあり、自分用にまとめてます。
・複数の要素に同じ指定をする
基本型
sample1, sample2, sample3 {
color: red;
}
要素間を「カンマ+スペース」とすることで指定できる。
ただ、実際に上記のように記述するのは冗長で可読性や変更するときにも手間がかかる。（保守性が低い）
そのため、予めページ全体の構成を考えた段階で「同じCSSを適用しそうだな」というところには、予め共通のクラス（上記の例でいうとsampleｍの部分）を設定しておき、それをセレクタとして用いることで短く、簡潔なコードで実装できる。
クラスは「クラス名+スペースクラス名」とすることで複数一度に指定できる。
本来はこう書くのがいい
sample {
color: red;
}
・属性にスタイルを適用する
input[type=”text”] {
font-size: 18px;
color: black;
}
上記は、インプットタグにある「text」という属性にスタイルをあてている。
ここで注意しないといけないのは、inputと[]の間にスペースは必要ないということ。
自分の癖なのか、コードと記号に間にスペースを入れてしまうがこれをやるとスタイルは適用されない。
実践でもこれに苦戦し、気づくまでに時間がかかりました・・・。
・直下の子要素のみにスタイルを適用
.child > p {
color: ylellow;
}
こうすることで、「クラス名がchildのもので、子要素のみにスタイルを適用」ということが可能。
孫要素やその下の要素にはスタイルは適用されない。
上記だと、.class p {}としても問題ないが入れ子が複雑になるほど思った通りのスタイルにならなくなるので、意識して書くこと。
明日も引き続き模写。
下記、二つのサイトがとても参考になります。
https://webliker.info/html-css/
https://saruwakakun.com/html-css/basic
学習は全てウェブカツ！！というプログラミングスクールで学んでいます。
大手スクール生徒や現役エンジニアが多数学び直している「実務レベル」に特化した「稼ぐ」ためのプログラミングスクール[…]