【CSSの基礎】セレクタとプロパティの使い方

イントロダクション

CSSはウェブページのデザインやスタイルを指定するための重要な言語です。

この記事では、CSSの基礎となるセレクタとプロパティの使い方について解説します。
セレクタは要素を特定し、プロパティは要素に対して適用するスタイルを指定します。
正しいセレクタとプロパティの使い方を学ぶことで、魅力的なウェブページのデザインを実現しましょう。

セレクタの種類

ウェブページの要素を特定するためには、適切なセレクタを使用する必要があります。主なセレクタの種類を以下に紹介します。

タイプセレクタ

p {
  color: blue;
}

この例では、すべての段落要素に対してテキストの色を青に設定しています。

クラスセレクタ

.highlight {
  background-color: yellow;
}

この例では、クラス名が「highlight」と設定された要素に対して背景色を黄色に設定しています。

IDセレクタ

#my-element {
  font-size: 20px;
}

この例では、IDが「my-element」と設定された要素に対してフォントサイズを20ピクセルに設定しています。

子孫セレクタ

.container p {
  margin-top: 10px;
}

この例では、クラス名が「container」の要素の中にあるすべての段落要素に対して上部のマージンを10ピクセルに設定しています。

プロパティの使い方

セレクタで要素を特定したら、次はプロパティを使用して要素にスタイルを適用します。主なプロパティの使い方について紹介します。

カラープロパティ

.colorful-text {
  color: #ff00ff;
}

この例では、クラス名が「colorful-text」の要素に対してテキストの色をRGB値で指定しています。

フォントプロパティ

.custom-font {
  font-family: "Arial", sans-serif;
}

この例では、クラス名が「custom-font」の要素に対してフォントの種類を指定しています。

レイアウトプロパティ

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

この例では、クラス名が「container」の要素に対してFlexboxを使ったレイアウトを指定しています。

ボックスモデルプロパティ

.box {
  margin: 10px;
  padding: 20px;
  border: 1px solid #000;
}

この例では、クラス名が「box」の要素に対してマージン、パディング、ボーダーの設定をしています。

アニメーションプロパティ

.animate {
  animation: fade-in 1s ease-in-out;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

この例では、クラス名が「animate」の要素に対してフェードインのアニメーションを設定しています。

まとめ