CSS でショートカットプロパティを記述する際は、トラブルの順序に注意してください (落とし穴を避けるため)

ショートハンドプロパティは、複数のプロパティに同時に値を割り当てるために使用されます。たとえば、font は複数のフォントプロパティを設定するために使用できるショートカットプロパティです。フォントスタイル、フォントの太さ、フォントサイズ、フォントの高さ、フォントファミリーを指定します。

フォント: 斜体 太字 18px/1.2 "Helvetica"、"Arial"、サンセリフ;

次のようなプロパティもあります。

background は、background-color、background-image、background-size、background-repeat、background-position、background-origin、background-chip、background-attachment などの複数の背景プロパティのショートカットプロパティです。
border は、border-width、border-style、border-color のショートハンドプロパティであり、これらのプロパティもショートハンドプロパティです。
border-width は、上、右、下、左の境界線の幅を表すショートカットプロパティです。

ショートカットプロパティを使用すると、コードを簡潔かつ明確にすることができますが、奇妙な動作が隠れてしまうこともあります。

ショートカットプロパティは他のスタイルを暗黙的に上書きします

ほとんどのショートハンドプロパティでは、一部の値を省略し、必要な値のみを指定できます。ただし、そうすることで省略された値も設定され、暗黙的に初期値に設定されることに注意してください。これにより、他の場所で定義されたスタイルが自動的に上書きされます。たとえば、Web ページのタイトルに短縮フォント属性を使用し、font-weight を省略すると、フォントの太さは通常に設定されます。

省略された値を初期値に設定するショートカットプロパティ

次の CSS を追加します。

h1{ 
  フォントの太さ: 太字; 
} 
。タイトル{ 
  フォント: 32px Helvetica、Arial、sans-serif; 
}

一見すると、<h1 class="title">CSS プロパティのショートカット</h1> によってタイトルが太字になると思われるかもしれませんが、実際にはそうではありません。上記のコードは次のコードと同等です。

h1 { 
  フォントの太さ: 太字; 
} 
 
。タイトル { 
  font-style: normal; (次の 5 行) これらのプロパティの初期値は font-variant: normal; です。 
  フォントの太さ: 標準; 
  フォント伸縮: 通常; 
  行の高さ: 通常; 
  フォントサイズ: 32px; 
  フォントファミリー: Helvetica、Arial、sans-serif; 
}

これらのスタイルを <h1> に追加すると、太字ではなく通常のフォントで表示されます。これらのスタイルは、祖先要素から継承されたフォントスタイルもオーバーライドします。すべてのショートカットプロパティのうち、フォントはプロパティ値が多すぎるため、最も深刻な問題を抱えています。したがって、<body> 要素の一般的なスタイル以外ではフォントを使用しないでください。もちろん、他のショートカットプロパティでも同じ問題が発生する可能性があるので、注意してください。

省略値の順序を理解する

ショートハンドプロパティは、指定されたプロパティ値の順序に対応しようとします。 border: 1px solid black または border: black 1px solid を設定できます。どちらも機能します。これは、ブラウザが幅、色、境界線のスタイルがどのタイプの値に対応しているかを認識しているためです。

しかし、値が曖昧な属性も数多くあります。この場合、値の順序が重要になります。これらの省略形プロパティの順序を理解することが重要です。

1. 上、右、下、左

要素の 4 辺すべてに値を指定する margin、padding、border などのプロパティの場合、開発者がこれらの短縮プロパティの順序を間違えてしまう可能性が高くなります。これらのプロパティの値は、上から時計回りの順にリストされます。

順序を覚えておくと間違いを避けることができます。これを記憶するには TRouBLe です: top、right、bottom、left。

この数式を使用して、要素の 4 辺すべてにパディングを設定します。下の画像に示すリンクの場合、上部のパディングは 10 ピクセル、右側のパディングは 15 ピクセル、下部のパディングは 0、左側のパディングは 5 ピクセルです。これらのパディングは均一に見えないかもしれませんが、ショートハンドプロパティの順序を示しています。

.nav { 
  色: 白; 
  背景色: #13a4a4; 
  padding: 10px 15px 0 5px; /* 上、右、下、左のパディング*/ 
  境界線の半径: 2px; 
  テキスト装飾: なし; 
}

このモードでは属性値を省略することもできます。宣言の最後に 4 つのプロパティ値のうち 1 つが指定されていない場合、指定されていない側は反対側の値を取得します。 3 つの値を指定すると、2 番目の値が左側と右側の両方に使用されます。 2 つの値を指定すると、最初の値が上部と下部に使用されます。 1 つの値のみを指定した場合、その値は 4 つの方向すべてに使用されます。したがって、次の宣言はすべて同等です。

パディング: 1em 2em; 
パディング: 1em 2em 1em; 
パディング: 1em 2em 1em 2em;

次の宣言も同等です。

パディング: 1em; 
パディング: 1em 1em; 
パディング: 1em 1em 1em; 
パディング: 1em 1em 1em 1em;

多くの開発者にとって難しいのは、3 つの値を指定することです。この場合は、上、右、下の値を指定することに注意してください。左側の値が指定されていないため、右側の値と同じになります。 2 番目の値は左側と右側に適用されます。したがって、padding: 10px 15px 0 は、左余白と右余白を 15px、上余白を 10px、下余白を 0 に設定します。

ただし、ほとんどの場合、指定する必要がある値は 2 つだけです。特に小さい要素の場合は、左右のパディングを上下のパディングよりも大きくするのが最適です。このスタイルは、下の図に示すように、Web ページ上のボタンやナビゲーションリンクに非常に適しています。

.nav { 
  色: 白; 
  背景色: #13a4a4; 
  padding: 5px 15px; /* 上下のパディング、次に左右のパディング*/ 
  境界線の半径: 2px; 
  テキスト装飾: なし; 
}

ショートカットプロパティを使用して、最初に垂直方向にパディングを追加し、次に水平方向にパディングを追加します。

多くのプロパティがこれに従うので、覚えておくことをお勧めします。

2. 水平、垂直

「TRouBLe」式は、ボックスの 4 つの方向に個別に値を設定するプロパティにのみ適用されます。また、background-position、box-shadow、text-shadow など、最大 2 つの値のみの指定をサポートするプロパティもいくつかあります (厳密に言えば、これらはショートハンドプロパティではありません)。これらの属性値の順序は、パディングなどの 4 つの値を持つ属性の順序とまったく逆になります。たとえば、padding: 1em 2em は最初に垂直方向の上下のプロパティ値を指定し、次に水平方向の左右のプロパティ値を指定しますが、background-position: 25% 75% は最初に水平方向の左右のプロパティ値を指定し、次に垂直方向の上下のプロパティ値を指定します。

定義を逆の順序にするのは直感に反するように思えるかもしれませんが、その理由は簡単です。2 つの値は直交グリッドを表しているからです。デカルトグリッド測定は通常、x、y (水平、垂直) の順序になります。たとえば、図 1-15 に示すように、要素に影を追加するには、まず x (水平) 値を指定する必要があります。

.nav .featured{ 
  背景色: オレンジ; 
  box-shadow: 10px 2px #6f9090; /* 影は右に 10px、下に 2px オフセットされます */ 
}

<div class="nav"> 
  <a href="#">ホーム</a> 
  <a href="#">コーヒー</a> 
  ブルワーズ 
  <a href="#" class="featured">スペシャル</a> 
</div>

最初の (大きい) 値は水平オフセットを指定し、2 番目の (小さい) 値は垂直オフセットを指定します。

プロパティが 1 つのポイントから 2 つの方向に値を指定する必要がある場合は、「直交グリッド」を検討してください。プロパティが 4 方向の要素の値を指定する必要がある場合は、「時計」を考えます。

要約する

CSS のショートハンドプロパティにおける TRouBLe の順序に注意する (落とし穴を避けるため) という記事はこれで終わりです。CSS のショートハンドプロパティにおける TRouBLe の順序に注意する、というより関連性の高い内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: JavaScript クロージャの詳細

>>: MySQL のテーブル内のレコード数を制限する方法