CSSメモ

記述の小技 - ショートハンド ページ34

##

あまり重要ではないですが、一応。
ショートハンドとは、ある特定のプロパティをまとめて記述できるものです。
一つ一つ書くと長くなってしまう場合に、これを使うと短く記述できるので、ソースを1ページに収めたい時などに活躍します。

占ツクではbackgroundくらいしか使わないと思いますので、それだけ紹介しておきます。

背景画像のプロパティは画像だったり色だったり、色々ありますが、それをまとめて記述できるショートハンドがあります。

それがbackgroundです。

background:#カラーコード url(画像URL) 繰り返し設定 画像の場所/画像のサイズ;

この順番で記述します。
また、必要ない設定は省略して書くこともできます。

例えば、こちらのCSSでは、

background:url(画像URL) no-repeat bottom right/250px;

と記述しています。

このショートハンドでは、記述なしのものはデフォルトの値として設定されます。
ですので場合によっては、前に記述した設定をこれで上書きしてしまうことが発生する可能性があります。

参考 デフォルト値
background-repeat → repeat
background-position → center center

他のショートハンドはこちらでまとめられていますので、気になった方はこちらをご覧ください。

##

関連作品・おすすめ作品→←コメント欄の色を変える

→ 目次へ｜作品を作る｜感想を書く
他の作品を探す