どうも、チャーさんです。
この記事ではcssの書き方の１つ
まとめて書くについてお話ししてます。
なのであなたがこの記事を読めば、
今までより、「より早く、より効率的に、より楽に」
cssをまとめて書く事ができるようになります。
cssをまとめて書きたい場合、
このまま下にスクロールし読んでください。
スポンサードサーチ
目次
cssの書き方：値をまとめて書く
まずcssはまとめて書く事が可能です。
というのも、cssでは別個に指定と、
まとめて指定とができるからです。
marginをまとめて書く書き方
例えば、
marginでは
margin:10px 20px 15px 30px;
などのようにまとめて書く事ができます。
（ちなみにこれは左からtop,right,bottom,left、
とそれぞれの数値を指定してることになります。）
marginはまとめて書かない場合、
margin-top:10px;
margin-right:5px;
margin-bottom:30px;
margin-left:3px;
などのようにバラバラに書くことに
なるのですが、上でお話ししたように、
まとめて１行で書く事もできるのです。
で、このように書けるのには他には、
padding、border、などがあります。
paddingをまとめて書く書き方
paddingはmarginと同じでして、
padding:10px 20px 15px 30px;
などとかけまして、
数値は時計回りで、top,right,bottom,leftの
順に数値を指定する形です。
ちなみに書き方はいくつかありまして、
例えばpadding:10px 20px;と書くと、
上下が10px 、左右が20pxという意味になります。
また、padding:10px 20px 5px;
などと書くと、上が10px、左右が20px、
下が5pxとこういうまとめ書きの方法もあります。
borderをまとめて書く書き方
で、話に出たので、borderも話すと、
こちらもmarginやpaddingと同じでして、
border:1px solid black;などとかけます。
このように書いた場合、
border-top:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
border-bottom:1px solid black;
と書いたのと同じ意味になります。
cssではまとめて書くと、
時間と手間の短縮になりますので、
まとめて書いて大いに楽をしましょう。
スポンサードサーチ
cssの書き方でまとめて書く：セレクタ編
でまとめるついでにもう一つですが、
cssではセレクタを複数指定して、
まとめるという書き方もできます。
例えば、
.class1, .class2, .class3 {
font-size:15px;
}
などのようにクラスをまとめて
書く事ができます。
(クラスってなに？という場合は、
cssの書き方class編(初学者向け)を読みましょう)
で上記のように書くと、
.class1 {
font-size:15px;
}
.class2 {
font-size:15px;
}
.class3 {
font-size:15px;
}
と書いたのと同じ意味になります。
とはいえ、上記のように同じことを
何度も書くのは面倒です。
なので、
.class1, .class2, .class3 {
font-size:15px;
}
このようにカンマで切ってやれば
まとめて書く事ができるので、
時間短縮したい場合はバンバン使いましょう。
時間短縮できるカンマについて、もう少し知りたい場合は、
を読んでおくと良いですよ。
スポンサードサーチ
まとめ
cssの書き方のまとめるについて
書きましたが、cssはまとめた方が
時間短縮できて良いです。
共同して書く場合、他の人にも
メリットなのでぜひまとめる事を意識
してみましょう。
また他人と共同してcssを書く場合、
コメントをちゃんと扱えると、あなたは
重宝されるので、人と一緒にcss書くなら
に一瞬だけ目を通しておきましょう。
また、cssの書き方について、
網羅的に知りたい場合は、
cssの書き方をまとめました「よく使う内容を網羅」をどうぞ。
それでは、読んでもらってありがとうございました。
チャーさん
