Webサイト模写で調べたちょっとしたこと
サイト模写をやりながら、色々調べているんですが「なるほどなぁ」と思ったものをメモ的に残しておきます。
擬似要素を使う方法
afterやらbeforeを使う方法は以下のサイトがとてもわかりやすいです。
afterの中で空白を使う方法
a:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\00A0\00A0\f0da";
}
\00A0で半角スペースを入れられる。
上の例では半角スペースを二つ入れた後にfontawesomeの記号を表示させています。
以下のサイトが参考になります。
afterでfontawesomeを使う方法
a:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\00A0\00A0\f0da";
}
font-familyとfont-weightを指定しないとうまく表示されません。
以下のサイトが参考になります。
liの最後の要素以外にmarginを設定する
li:not(:last-child) {
margin-right: 30px;
}
notとlast-childの組み合わせで設定できる。
li要素 30px li要素 30px li要素 30px li要素
みたいなのが簡単にできて便利です。最後のli要素の右側に30pxのマージンがないのがポイント。
