COLUMN コラム

CSSプロパティーが多すぎてファイル行がやたら長く、管理し難くなってしまった、という状況にオススメしたいのがCSSのショートハンド記法です。

ショートハンドを使用して行数を減らすことが出来れば、スッキリと見やすさも向上し、修正や管理のしやすいファイルを作成することができます。

さらには記述する文字数が減ることでコーディングスピードが上がり、より効率的に作業を進めることができます。

ショートハンドの基本

・ショートハンドとは

ショートハンドとは、CSSにおいて値を簡略化できる記法のこと。

値を半角開けて記入することにより設定する。

paddingなど空間指定の4方向の記入は上から右回りで指定される。

web用語辞典

例えば、上下左右方向のマージンを指定したい時、通常だとtop, right, botttom, leftとプロパティーを指定して各値を記述しますが（画像左）、ショートハンドを使用すれば、それぞれのプロパティー記述を省略することができます（画像右）。

この場合、ショートハンドで記載する値の数によって指定する箇所が決まります。paddingも同様に指定することができます。

値1つ：上下左右全て　　　　例）margin: 20px;

値2つ：上下、左右　　　　　例）margin: 20px 20px;

値3つ：上、左右、下　　　　例）margin: 20px 20px 20px;

値4つ：上、右、下、左　　　例）margin: 20px 20px 20px 20px;

・よく使う便利なショートハンド

サイト制作をする上でよく使用される、便利なショートハンドをいくつかご紹介します。

border

ボーダーの幅、スタイル、色の異なるプロパティーを一括指定することができます。
それぞれのプロパティの順序は自由ですが、チームの中で順序を決めておくと管理しやすいです。

background

背景画像や色、ポジション、サイズなどを一括指定することができます。
こちらも各プロパティの記載順序は自由です。

animation

アニメーションでも異なるプロパティーを一括指定することができます。

記載順序として、animation-durationをanimation-delayより先に書く必要があります。それ以外は順序に決まりはありません。

天地中央配置の新しい書き方

天地中央配置がショートハンドを利用して、さらに短く記述できるようになったのでご紹介します。

・positionのショートハンド

insetというプロパティーを使用して以下のような書き方をすることもできます。

inset は CSS のプロパティで、 top, right, bottom, left に対応する一括指定です。これは margin の一括指定における複数値の場合と同じ構文です。

CSS 論理的プロパティの仕様書で定義されているものですが、論理的なオフセットを定義するものではありません。これは物理的なオフセットであり、要素の書字方向やテキストの向きには関係がありません。

CSS inset

・positionを使用した天地中央配置

上記のinsetを使用すれば、従来では最低3行以上記述しなければならなかった天地中央配置の指定が以下の記述で済んでしまいます。

CSSで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法 | コリス

おわりに

新しくスマートな書き方はどんどん登場しますが、常に情報をキャッチアップするのは大変なことです。また、制作にあたっては各ブラウザが対応している書き方であるかどうかなど考慮しながら取り入れる必要もあります。

上手く情報の波に乗ることでキャッチアップしていきましょう。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。webサイトについてお悩みのある方はお気軽にお問い合わせください。