CSSショートハンドプロパティとは？初心者向けにやさしく解説！

こんにちは。ゆうせいです。

今回は、Web制作をしているとよく耳にする 「CSSのショートハンド」 についてお話しします。

「ショートハンドって何？」「使わなきゃいけないの？」そんな疑問を持っている方も多いと思います。結論から言うと、ショートハンドはとっても便利な時短テクニックです！

CSSショートハンドとは？

CSSの「ショートハンド（shorthand）」とは、日本語でいうと「省略記法」や「短縮記法」です。

複数のプロパティを一つにまとめて書くことで、コードを短くスッキリさせることができます。

たとえば、marginを個別に設定する場合：

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

これをショートハンドで書くと、たった1行！

margin: 10px 20px;

このように、4行 → 1行になりました。

よく使うショートハンド一覧

ショートハンドのルールと順番

ショートハンドは書く順番がとても大事です。

たとえば margin のショートハンドには以下のようなルールがあります。

/* 1つだけ → 全方向同じ */
margin: 10px;

/* 2つ → 上下 / 左右 */
margin: 10px 20px;

/* 3つ → 上 / 左右 / 下 */
margin: 10px 20px 5px;

/* 4つ → 上 / 右 / 下 / 左 */
margin: 10px 20px 5px 15px;

この順番、時計回り（上→右→下→左）なんです。覚えるコツは、「上から右へ、時計のように」！

ショートハンドのメリット・デメリット

メリット

• コードが短くなる
• 読みやすくなる
• 一括で管理できて便利

たとえば、Web制作のチーム作業では、1つのプロパティで多くのスタイルが確認できるので、他の人のコードも理解しやすくなります。

デメリット

• 一部だけ変更したいときに不便
• 順番を間違えると意図しないレイアウトになる
• 未指定の値が初期化されてしまうことがある

たとえば、borderをショートハンドで書くと、色・太さ・線種すべてを上書きしてしまいます。もとの設定を一部だけ残したいときには注意が必要です。

例：borderのショートハンド

/* 通常の書き方 */
border-width: 1px;
border-style: solid;
border-color: red;

/* ショートハンド */
border: 1px solid red;

このように、「太さ、線種、色」の順で書きます。

よくある間違い

たとえば：

margin: 10px 5px 15px;

これがどうなるかわかりますか？

• 上：10px
• 左右：5px
• 下：15px

このように、3つ指定すると「左右」が同じ値になるんです。ちゃんとルールを覚えておきましょう！

数式で表すと？

ショートハンドの構成は、次のようなパターンになります。

• margin = 上
• margin = 上 右左
• margin = 上 右 下
• margin = 上 右 下 左

記号にすると：

• margin = t
• margin = t rl
• margin = t r b
• margin = t r b l

今後の学習の指針

ショートハンドを覚えれば、CSSの読み書きが圧倒的にスムーズになります！

次のステップとしては：

1. 頻出のショートハンドを実際に書いてみる
2. ショートハンドと個別指定の違いを比べてみる
3. 自分でHTMLとCSSを書いてレイアウトを試してみる

疑問に思ったら、どんどん手を動かして確認することが大切です!

セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク

投稿者プロフィール

山崎講師代表取締役

セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。

最新の投稿

• 山崎講師2025年5月16日JavaScriptの文末にセミコロン「;」が必要な理由とそのルールをわかりやすく解説！
• 山崎講師2025年5月16日JavaScript配列のpush・popとshift・unshiftを使ったスタックとキューの仕組み解説
• 山崎講師2025年5月16日CSSショートハンドプロパティとは？初心者向けにやさしく解説！
• 山崎講師2025年5月16日CSSの使い分け完全ガイド：外部・内部・インラインスタイルの違いと使い分け