CSS (Cascading Style Sheets) は、Web ページのスタイルを定義するために使用される言語で、Web ページを構築するために HTML と一緒に使用されます。 CSS は HTML 要素の外観と位置を制御して、Web ページを美しくし、ユーザー エクスペリエンスを向上させます。
この記事では、CSS の基本と、CSS を使用して HTML 要素のスタイルを変更する方法を紹介します。
CSS はセレクターと宣言で構成されます。セレクターはスタイルを適用する HTML 要素を選択するために使用され、宣言は選択された要素に適用されるスタイルを指定します。
一般的なセレクターの一部を次に示します:
要素セレクター: HTML 要素名を指定する 要素を選択します例:
p {
color: red;
}これにより、ドキュメント内のすべての
要素が選択され、その色が赤に設定されます。
クラス セレクター: クラス名を指定して要素を選択します。例:
.my-class {
background-color: yellow;
}これにより、class="my- を持つすべての要素が選択されます。 class" 要素を作成し、その背景色を黄色に設定します。
ID セレクター : ID を指定して単一の要素を選択します。例:
#my-id {
font-size: 20px;
}これにより、id="my の要素が選択されます。 -id" 要素を追加し、そのフォント サイズを 20 ピクセルに設定します。
属性セレクター: 属性を指定して要素を選択します。例:
a[href="https://www.google.com"] {
color: blue;
}疑似クラスと疑似要素: 要素の状態または位置を指定して要素を選択します。例:
a:hover {
text-decoration: underline;
}p {
color: red;
}要素が選択され、その色が赤に設定されます。
CSS を適用する方法CSS は、内部スタイル シート、外部スタイル シート、インライン スタイルの 3 つの方法で HTML ドキュメントに適用できます。これら 3 つの方法を個別に見ていきます。 内部スタイル シート内部スタイル シートとは、CSS ルールが