CSSの省略形のプロパティ

CSS省略形プロパティの使用方法を学ぶ スタイルシートが占めるスペースを減らすためです。

CSSの省略形のプロパティを使用すると、記述を減らしてより多くのことを実行できます。

h1のスタイルを設定するとします。 ジョージアの要素 font-family、フォントサイズは42ピクセル、行の高さは1.25です。

まず、以下の通常のCSSメソッドを見てみましょう。

h1 {
    font-family: "Georgia", "serif";
    font-size: 42px;
    line-height: 1.25;
}

次に、CSSのフォントを使用する場合と比較します。 以下の簡略化された方法：

h1 {
    font: 42px/1.25 "Georgia", "serif";
}

3本の線が1本に凝縮されました！

省略形のプロパティは、複数のスタイル宣言を1行に結合することで機能し、コードが占めるスペースを減らします。

短縮コードは、より表現力のある通常の方法ほど読みにくい場合があります。しかし、それは新しいからです。使い始めるとすぐに第二の性質になります。

ポイントを家に帰すためのもう1つの簡略化されたCSSプロパティの例を見てみましょう。

これは、上下に12ピクセル、左右に20ピクセルのパディングがあるボタンです。

次のパディングプロパティを使用します：

button {
    padding-top: 12px;
    padding-right: 20px;
    padding-bottom: 12px;
    padding-left: 20px;
}

それでは、省略形のpaddingを使用しましょう。 プロパティを作成し、CSSの肥大化を減らします：

button {
    padding: 12px 20px; /* top-bottom, left-right */
}

4本の線が1本に凝縮されました！

padding 上記の省略形は、2つの値の省略形と呼ばれます。これは、2つの値を使用するためです。

• 最初の値12px padding-topに対応します およびpadding-bottom 財産。
• 20px 値はpadding-leftに対応します およびpadding-right 。

CSSの省略形プロパティの完全なリストは次のとおりです：

all、animation、background、border、border-block-end、border-block-start、border-bottom、border-color、border-image、border-inline-end、border-inline-start、border-left、border- radius、border-right、border-style、border-top、border-width、column-rule、columns、flex、flex-flow、font、gap、grid、grid-area、grid-column、grid-row、grid-テンプレート、リストスタイル、マージン、マスク、オフセット、アウトライン、オーバーフロー、パディング、プレースコンテンツ、プレースアイテム、プレースセルフ、スクロールマージン、スクロールパディング、テキスト装飾、テキスト強調、遷移。

Mozillaの完全なCSS速記ドキュメントを参照してください。

速記のプロパティのすべてが覚えておく価値があるわけではありません。なぜなら、それらを使用することはめったにないからです。ただし、このチュートリアルのfontの2つの簡単な例 およびpadding 、は最も一般的に使用される速記の一部です。

次の省略形のプロパティも調べる価値があります（頻繁に使用するため）margin 、background 、border 、animation 、transition 、border-radius 。