こんにちは朱夏です。
今回も模写を頑張っていきます。
前回の続きで、CSSを書いていきます。
こちらの依頼ページの1つ目が模写しているサイトです。
https://www.lancers.jp/work/detail/2769519
CSSも書いていて、新たに知った情報がたくさんありました。
特に重要だと思うものが3つありました。
-
- リセットCSS
- !important
- nth-child
一つずつ見ていきます。
CSSで指定していないスタイルは、ブラウザ依存でスタイルが決まります。
そのため、ブラウザによって見栄えが違ってくることがあります。
それを防ぐために、CSSを強制的にリセットさせるCSSが、リセットCSSと呼ばれるものです。
参考にしたサイトはこちらです。
中でどんなことをやっているかというと、margineやpaddingを0にしたり、h1などのフォントサイズを指定したりしているだけです。
模写しているサイトではこれを使用していたらしく、延々と同じようなサイズ指定を繰り返す作業をしていました。
同じ要素に同系統のスタイルを指定している場合、どのスタイルが適用されるのかという優先度があります。
HTMLのタグに書かれたスタイル ＞ CSSファイルに書かれたスタイル
CSSファイルに記載されたスタイル同士の場合は、後から書かれたものが優先されます。
このルールを無視して、最優先で指定させる事が出来るのがこちらです。
こちらも参考にしたサイトを貼っておきます。
個人的な感覚としては、これに頼る様になって来たら、そもそもCSSを管理出来ていないのではないかと思います。
疑似クラスト呼ばれるものの様です。
例えば、htmlでリストを作成した時に、親要素<ul>内の複数の子要素<li>に対して、偶数個目だけ背景を水色にしたい、といった時に使用できます。
※サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> <ul class="listalt"> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> </ul> </body> |
|
1 2 3 4 5 6 7 |
.listalt { list-style: none; } .listalt > li:nth-child(2n) { background-color: aqua; } |
実行結果はこちらです。
今回模写したサイトでも使用されていたのですが、どういった効果があって使用されているのかいまいち理解できずにいます・・・。
今回でCSSの模写が終わりました。
CSSだけでレスポンシブ対応するために、スマホ版とPC版で行数が2倍になっている様でした。
それでも、うまくスタイルが適用されていない様に見える部分があるので、最終的な調整を最後に行う必要がありそうです。
今回はここまでです。
次回もよろしくお願いします。