こんにちは！ケイマエです。
先日iSara.lifeの模写をしまして、かなりマークアップの自信につながりました！
そこで今回は、初めて知ったCSSプロパティを共有したいと思います！
CSS勉強中の方や、復習がてらのチェックとしてなどで見ていただければ幸いです。
さっそくいきましょう！！
iSara模写で知ったCSSプロパティまとめ
box-sizing: border-box;
| 使用箇所 | 全体 |
* {
box-sizing: border-box;
}
最初に指定したwidthとheightの範囲内でpaddingやborderを設定できます。言い換えると、このプロパティがないとpaddingなどをつけるとそのpadding分大きくなってしまう。
どの状況でも必須になると思ったプロパティです。全体を指定してかけておこう。
font-weight: と letter-spacing:
| 使用箇所 | 多々 |
両方とも文字に関するのでセットで。
font-weight は 100〜900の100単位でフォントの太さを指定できます。標準は400で、200で細く、500で太めになど割と微調整ができます。
letter-spacing は文字間のスペースを空けることができます。pxやemなどの単位で追加スペースを指定できます。文字間が空いていると読みやすくもあり、見た目もオシャレにできます。
z-index:
| 使用箇所 | 固定ヘッダー |
position: relative などの重なりの順序を整数で指定します。0を基準として、値が大きいものほど上になります。
今回の場合ですと、固定ヘッダー部全体に、z-index: 10; としておくと他のposition: relativeや absolute の上に表示されるので、スクロールしてもヘッダーが常に一番上に表示されるようになります。
ちなみに固定させるプロパティは position: fixed; です。
background-image: url(), background-size: , background-position:
| 使用箇所 | 多々 |
background-image: url() はurlの()内に画像ファイルのパスを記述すると背景に画像を表示できます。画像ファイルのパスは相対パスで記述するのがベターです。（デプロイするとローカル環境の絶対パスでは表示できないため）
background-size: の値は以下のようになります。
| auto | 自動的に算出される（初期値） |
| contain | 縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する |
| cover | 縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する |
| 長さ(px) | 背景画像の幅・高さを指定する |
| パーセンテージ(%) | 背景領域に対する背景画像の幅・高さのパーセンテージを指定する |
今回は background-size: cover を使用して表示画面一杯に表示させます。ここでふと思ったのですが、containとの違いが分からずどうなるかやってみました。↓background-size: contain;
横幅が元画像の最大サイズを超えているため繰り返し表示されています。一つ学べました。
background-position: center; で画像の中心が真ん中にくるように合わせられます。また、top, right, bottom, left とそれぞれ指定すると、それぞれの辺合わせになります。
あまり使う機会がないとは思いますが、下記のように２つの値を指定して合わせることもできます。
background-position: bottom 10px right 20px;
transform: rotate(-45deg);
| 使用箇所 | 三角 |
transform: rotate(-45deg); で指定したものを４５度回転することができます。rotate()内に回転したい角度を記述すればその角度で回転して表示できます。
今回は width: 30px, height: 30px で指定した正方形を４５度回転することで上の三角を表現しました。やり方は他にもあるようです。
以上、自分が模写する中で知ったCSSプロパティでした！
知らなかった情報があればお役に立てれたと思いますが、全部知ってるよって方は復習ということで(^o^)
position: relative と abosolute も多用するので分からない方はこれもググってから始めると良いです。
それではまたの記事で！
