52.ショートハンドを覚えよう ～一括指定で効率UP～
CSSのショートハンド使いこなしてますか？
私はイマイチ覚えきれていません。
読むのにも、書くのにも
ある程度知らないと「この指定なんだっけ？」となってしまいます。
今回は頻出のものを中心に、自分で使えることを目標にやっていきます。
ショートハンドとは？
以前backgroundの記事で少し触れましたが、
複数の関連するプロパティを一括指定できる仕組みです。
一番身近なものでいうと、
margin : 0 auto;
みたいな書き方です。
これをショートハンドを書かずに指定するには
margin-top : 0;
margin-left : auto;
margin-right : auto;
margin-bottom : 0;
と書く必要があるわけです。
長い。
ショートハンド使いこなせた方が、絶対いいですよね。
頻出のショートハンド達
よく使う物から順に、しっかりと確認していきましょう。
今回は下記について、確認していきます。
- margin
- padding
- border
- background
まずは、margin。
marginのショートハンドは4種類あります。
そして、書く順序があるので注意してください。
上、右、下、左が基本の順序です。
値が１つの場合
margin : 10px;
これは、上下右左のマージンすべて10pxが設定されます。
値が２つの場合
margin : 10px 5px ;
これは、左側で上下に10pxのマージンを、右側で右左に5pxのマージンを設定します。
値が３つの場合
margin : 10px 5px 15px;
これは、左側で上に10pxのマージンを、真ん中で右左に5pxのマージンを、右側で下に15pxのマージンを設定します。
値が４つの場合
margin : 10px 5px 5px 20px;
これは、左側で上に10pxのマージンを、真ん中の２つで右と左に5pxのマージンを、右側で下に15pxのマージンを設定します。
勝手な覚え方
marginの書き順は上から時計回りで、左右は仲良し。
左側の値から順に時計回りで上から４方向を指定する。４方向指定以外は右左はまとまっているからです。
因みにpaddingのショートハンドはmarginと同一の指定方法なので、割愛します。
border
borderはmarginやpaddingと違い、記述の順序がありません。
指定できるのは下記３つのプロパティです。
- border-style
- border-width
- border-color
border : solid 1px #333;
のようにまとめて記載でき、順序は問われません。
間のスペースは忘れずに。
background
backgroundは、指定できるプロパティが多岐にわたります。
それは以前の記事でも紹介した通りです。
指定できるプロパティは、
- background-color
- background-image
- background-repeat
- background-clip
- background-origin
- background-attachment
- background-position
- background-size
うん、多いですね。
基本的には順序は問われず、すべてを指定しなくてもよいです。
ただし、sizeを指定する場合はpositionとセット。なおかつ「position / size」という書き方を守ること。
よく指定するのは大体決まっていると思います。
今回は
color image repeat position / size
上記で指定する場合の例です。
background : transparent url(./img/test.png) no-repeat center center / cover ;
このように併記できます。
特に注意したいのが、position / sizeのところですね。
場合によっては
top 20px left 20px / contain
のような指定だってあり得ます。
自分で記述する場合は良いですが、
他者が書いたCSSの場合はどこまでが、どのプロパティなのかを
指定をよく確認すべきですね。
今日のまとめ
- ショートハンドは時短につながる。
- marginとpaddingは記述順序が決まっている。上から時計回りで左右仲良し。
- borderとbackgroundは順序問わない。
- backgroundのsizeを指定する場合は必ずpositionを記述して/の後に指定する。
今日はショートハンドについて確認しました。
コードを見ていると、ん？これ「どこに何が適用されるの」って
今はまだ瞬時に判断できないんですよね。
書いて、見て、慣れていきます。
では、また。
