スタイルシートの効率的な使い方

スタイルシートには、効率的な書き方がいろいろあります。ここでは、基本的なスタイルシートの使い方を覚えた方に向けて、さらにステップアップするためのコツをお話していきます。

それでは、早速始めてみましょう。

コンテンツ [hide]

四方の値をまとめる「ショートハンド」

marginやpadding、borderは、top, bottom, right, leftの値がそれぞれ設定できるのはご存知だと思います。

例えばmarginの場合、こんな感じになります。

.example{
  margin-top:5px; /* 上 */
  margin-right:10px; /* 右 */
  margin-bottom:15px; /* 下 */
  margin-left:20px; /* 左 */
}

これは、次のようにまとめることができます。

.example{
  margin:5px 10px 15px 20px; /* 上 右 下 左 */
}

このように半角スペースを空けて４つの値を入れると、左から時計回りに上、右、下、左の値を指定できます。
もしも、marginがすべて同じ値であれば、値をひとつだけ記入します。

.example{
  margin:10px; /* 上下左右 */
}

これで、上下左右ともに10pxになりました。
もしも、四方のうち上下が同じ、左右が同じという場合は、次のようになります。

.example{
  margin:10px 15px; /* 上下 左右 */
}

上下が10px、左右が15pxという意味ですね。

さらに、上下は値が異なりますが、左右は同じという場合は次のようになります。

.example{
  margin:10px 15px 20px; /* 上 左右 下 */
}

これは左から、上が10px、左右が15px、下が20pxという意味です。

最後に、まとめをご覧ください。

margin: 上右下左;
margin: 上左右下;
margin: 上下左右;
margin: 四方;

この書き方を知っていれば、「margin-top」「margin-right」などをわざわざ書く必要もなくなってきますね。

ちなみにブロック要素の中央寄せで使われる「margin:0 auto;」もショートハンドを使った例です。上下のmarginがゼロ、左右がautoという意味になります。autoというのはニュアンスとしては、marginを取れるだけ取るみたいな感じですね。

だから、左右のmarginを両方とも取れるだけ取る
＝左右のmarginを二等分する。
＝中央寄せになる。

ということです。

このように１つのプロパティに値をまとめて入力する方法のことをショートハンドといいます。ショートハンドは他にもいろいろありますので、新しいプロパティを学ぶときに合わせてショートハンドも調べてみると良いと思います。

１．同じ値のプロパティをまとめる

まずは、下記をざっくりとご覧ください。

５つのボックスが横に並んでいます。それぞれのボックスにはbox1~box5までのclass属性があり、それぞれにスタイルが指定されています。

.box1{
  background:#7fbfff;
  border:2px solid #999;
}
.box2{
  background:#7fbfff;
  border:2px solid #999;
}
.box3{
  background:#7fbfff;
  border:2px solid #999;
}
.box4{
  background:#7fbfff;
  border:2px solid #999;
}
.box5{
  background:#7fbfff;
  border:2px solid #999;
}

よく見てみると、すべて同じ値が指定されているのが分かります。
このような場合はまとめて記入してしまいましょう。

.box1,.box2,.box3,.box4,.box5{
  background:#7fbfff;
  border:2px solid #999;
}

これで、かなりスッキリしました。このようにデザインが同じ場合、セレクタをカンマ区切りで複数並べて記述することができます。

２．属性の名前の共通部分を利用してまとめる

先ほどの例ですが、各ボックスにbox1~box5というclass名が入っていました。こういう場合は、クラス名の共通部分を利用することで次のようにまとめることもできます。

[class^="box"]{
  background:#7fbfff;
  border:2px solid #999;
}

これは属性セレクタと言われるものの一つで、クラス名が共通した文字で始まる場合に適用できるものです。

[class^="◯◯◯"]の「◯◯◯」のところにクラス名の共通部分を入れて、該当する要素すべてにデザインを適用させることができます。このように設定しておけば、新たに「box6」「box7」を設定したときにいちいちスタイルシートを書かなくても良くなります。

もちろん、クラス名だけでなくid名を[id^="◯◯◯"]とすることもできます。属性セレクタについは下記の記事で詳しく取り扱っていますので、良かったらご覧になってみてください。

2018.05.15

CSS｜裏技的なセレクタまとめ

ここでは、普段あまり使わないけど、知っておくととても便利なセレクタの記載方法についてお話します。間接セレクタ要素1 ~ 要素2 間接セレクタは、「要素1」のあとに出現する「要素2」に対してデザインを適用させるセレクタです。このセレクタの適用範囲は、同...

３．共通するプロパティだけをまとめる

上の例をご覧ください。異なる色のボックスが５つ並んでいます。スタイルシートは次のようになっています。

.box1{
  background:#7fbfff;
  border:2px solid #999;
}
.box2{
  background:#ff7f7f;
  border:2px solid #999;
}
.box3{
  background:#7fffbf;
  border:2px solid #999;
}
.box4{
  background:#bf7fff;
  border:2px solid #999;
}
.box5{
  background:#ff7fbf;
  border:2px solid #999;
}

各ボックスの背景色は違いますがborderは同じ値になっているのが分かりますね。こういうときは、共通する部分だけをまとめて次のように記入することも可能です。

.box1{
  background:#7fbfff;
}
.box2{
  background:#ff7f7f;
}
.box3{
  background:#7fffbf;
}
.box4{
  background:#bf7fff;
}
.box5{
  background:#ff7fbf;
}
 
.box_border{
  border:2px solid #999;
}

今回は、「box_border」というclassを新しく作ってみました。このクラスを各ボックスに設定していきます。実は、ひとつのタグには複数のclass名を入れることも可能です。その場合は、半角スペースを空けて設定します。

「box_border」という属性をそれぞれのボックスにいれるとこうなります。

<div class="box1 box_border">１</div>
<div class="box2 box_border">２</div>
<div class="box3 box_border">３</div>
<div class="box4 box_border">４</div>
<div class="box5 box_border">５</div>

これで、共通するプロパティをまとめて設定することができました。以上が、スタイルシートを効率的に書くためのいろんなまとめ方になります。ぜひ実践でご活用ください。

WordPressとデザインが学べるWebメディア