Subscribed unsubscribe Subscribe Subscribe

CHROMA

世の中の "当たり前" を確認する

CSSで値の複数指定

ショートハンドのことではありません。

あるCSSプロパティでは、「1つまたは2つ以上の値が指定できる」ということを、普段コーディングするときについ忘れてしまいがちです。
しかし、これを覚えておくことで、いろいろ便利な場面がでてくるでしょう。

例えばbackground-imageプロパティでは、画像の複数指定ができます。これを使うことで、「タイトルの左右にアイコンをつける」ということが簡単に出来るでしょう。

.title {
  background-image: url(emotion-smile.png),
                    url(emotion-angry.png);
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center;
  background-size: 38px , 38px;
}

このように1つのプロパティに対して複数の値が指定できるものは、他にbox-shadowtext-shadowがあります。

box-shadowでは、複数の影をつけることができます。
複数のボーダーを指定したいときなどに便利ですね。

.multiple-box-shadow {
    box-shadow: 
      inset 0 0 0 1px #fff,
      inset 0 0 0 2px tomato,
      inset 0 0 0 3px #fff,
      inset 0 0 0 4px tomato,
      inset 0 0 0 5px #fff,
      inset 0 0 0 6px tomato,
      inset 0 0 0 7px #fff,
      inset 0 0 0 8px tomato,
      inset 0 0 0 9px #fff,
      inset 0 0 0 10px tomato,
      inset 0 0 0 11px #fff,
      inset 0 0 0 12px tomato,
      inset 0 0 0 13px #fff,
      inset 0 0 0 14px tomato,
      inset 0 0 0 15px #fff;
}

text-shadowでは、box-shadowと同じようなことが出来ます。
ソリッドシャドウをつけてみるのもおもしろいですね。

.multiple-text-shadow {
  text-shadow:
        1px 1px SteelBlue,
        2px 2px SteelBlue, 
        3px 3px SteelBlue, 
        4px 4px SteelBlue, 
        5px 5px SteelBlue, 
        6px 6px SteelBlue, 
        7px 7px SteelBlue, 
        8px 8px SteelBlue, 
        9px 9px SteelBlue, 
        10px 10px SteelBlue;
}

まだ他にもあるかもしれませんが思いつかないので... とりあえず今頭に思い浮かんだものを書いてみました。
他に何かあるかな。

参考