backgroundをショートハンドで書く
トップページの背景画像をいれる記法として、以下が紹介されていました。
background: url(../img/mainvisual.png) no-repeat center center / cover;いままで、以下の書き方をしていたので、なんだこの書き方…と驚きました。
background-img: url(../img/mainvisual.png)；
background-size: cover;backgroundを指定すると、色々な要素をまとめて指定できるんだろうな•••ということは、予測できましたが、記述の順番が分かりませんでした。
値は 「位置 / サイズ」で記述しよう
backgroundをショートハンドで指定する場合、「指定する順番」「スラッシュの位置」によって正しく指定されないため注意が必要です。
特に、スラッシュで区切る場合はどういう時か？分からなかったので調べたところ、「位置 / サイズ」となるよう指定するようです。（この順番でないと正しく反映されない）
以上から、以下のコードの記述順を見ていきます。
background: url(../img/mainvisual.png) no-repeat center center / cover;
↓
background: background-repeat background-position / background-size
↓
background: 背景画像のリピート有無 背景画像の場所 / 背景画像のサイズよりCSSを短く書く・記述時間を減らせそうな方法だという印象でした。
より詳しく知りたい方・backgroundの復習したい方は、以下の記事がおすすめです。
参考サイト：
【CSS】背景色・背景画像をマスター！backgroundの使い方
CSSで背景色・背景画像を設定するbackgroundプロパティについて解説していきたいと思います。CSSの基本的なプロパティですが、実はあまり知らなかった！といった方法もあるのがbackgroundプロパティです。そんなbackgroun...
jajaaan.co.jp
見出しの少し下に線を引きたい場合は、paddingで余白を取る
見出しの下に余白を開けて、線をひく。という課題で、私は以下2点につまづきました。
- margin_bottomで余白をとっているけど、余白ができない
- 「position: absolute」を使ったときに書く「bottom: 0;」て、0なのになぜ書くのか？
余白ができない場合の解決策
「そもそも position: absolute; を理解できていない」と何度もお世話になったサルワカさん。
CSSのpositionを総まとめ！absoluteやfixedの使い方は？
position: absolute、relative、fixed、staticの意味の実践的な使い方を分かりやすく図解します。
saruwakakun.com
こちらを見返すと「そもそも余白をとるときは、marginではなく、paddingを使う必要がある」と分かりました。
「padding」で設定すると、以下のように要素の大きさが変わります。
「 position: absolute;」は、親要素を基準にして位置を指定することができます。
ということは、ここで「bottom: 0;」を指定すると、上の画像でいう要素の一番下に線を表示させることができます。
コメント