css 基礎2

css変数

• 一般的に、.rootにcssを宣言し、var()関数で値を呼び出すことが可能

:root {
   --color-warning: #E9C46A;
   --color-danger: #E76F51;
   --color-info: #264653;
   --color-success: #2A9D8F;

   --space-small: 0.25rem;
   --space-medium: 0.5rem;
   --space-large: 1rem;

   --font-small: 0.75rem;
   --font-medium: 1rem;
   --font-large: 1.25rem;
}

.big-module {
   background-color: var(--color-success);
   padding: var(--space-large);
   font-size: var(--font-large);
   width: 100%;
}

textプロパティ

text-align

.text-justify {
   text-align: justify;
}

• justify を使用すると、雑誌や新聞のように各行の幅が均等になるように引き伸ばされ、左右の端が揃うように配置される
  • 上が何も指定していない

    、下がjustifyが指定された

  • 
• text-align はブロック要素内に含まれるインライン要素に対して適用される。ブロック要素を中央揃えする場合は text-align ではなく他のプロパティの使用が必要