CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSセレクターで要素のスタイルを設定する方法をわかりやすく解説

CSSセレクターを活用すると、自分の意図に合わせて特定の要素だけをピンポイントでスタイリングできます。HTML DOMの中から要素を選択する方法には、実にさまざまな種類が用意されています。

CSSセレクターの基本構文

CSSセレクターの基本的な書き方は以下の通りです。

セレクター {
    /* スタイル宣言 */
}

それでは、実際のコード例を見ながら、CSSセレクターによる要素のスタイル設定方法を確認していきましょう。

例1：IDセレクターを使ったスタイル指定

まずは、#（シャープ）を使ったIDセレクターの例です。特定のIDを持つ要素のみにスタイルが適用されます。

<!DOCTYPE html>
<html>
<head>
<style>
#one {
    filter: invert(85%);
}
</style>
</head>
<body>
<img id="one" src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg">
<img src="https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg">
</body>
</html>

出力結果

このコードを実行すると、ID「one」が付いた画像だけが反転表示され、もう一方の画像はそのまま表示されます。

CSSセレクターで要素のスタイルを設定する方法をわかりやすく解説

例2：複数のセレクターへの一括スタイル指定

次に、カンマ区切りでセレクターを並べることで、複数の要素に共通のスタイルをまとめて適用する例を紹介します。さらに、個別のセレクターで上書き指定することも可能です。

<!DOCTYPE html>
<html>
<head>
<style>
div, p {
    margin: 4px;
    float: left;
    height: 200px;
    width: 300px;
    box-shadow: inset 0 2px 4px olive;
    background-image: url("https://www.tutorialspoint.com/sas/images/sas-mini-logo.jpg");
}
p {
    background-image: url("https://www.tutorialspoint.com/qlikview/images/qlikview-mini-logo.jpg");
    background-position: 50% 50%;
    color: black;
}
</style>
</head>
<body>
<h2>Learning Tutorials</h2>
<div></div>
<p>Tutorials</p>
</body>
</html>

出力結果

このコードでは、div要素とp要素の両方に共通スタイル（サイズ・余白・影など）が適用され、その後p要素に対して背景画像などが個別に上書きされています。

CSSセレクターで要素のスタイルを設定する方法をわかりやすく解説

まとめ

CSSセレクターを使いこなすことで、IDや要素名などを柔軟に組み合わせ、効率よくスタイルを管理できるようになります。まずはIDセレクターや複数セレクターの一括指定といった基本パターンから試してみると良いでしょう。

  1. HTMLで内部CSS（スタイルシート）を使う方法をわかりやすく解説

    内部CSSとは？CSSはHTML文書にさまざまな方法で適用できます。その一つが「内部CSS（Internal CSS）」と呼ばれる手法で、<style>タグを使用するのが特徴です。<style>タグは<head>〜</head>タグの中に記述します。この方法では、1つのページに対して個別のCSSスタイルを定義することが可能です。外部スタイルシートファイルを作成せずに手軽にスタイルを適用できるため、単一ページのみで完結するデザインや、簡単なデモ・テストページを作成する際によく使われます。サンプルコード以下のコードを実行すると、HTMLで内部CSSを

  2. HTMLでインラインCSS（スタイルシート）を使う方法を徹底解説

    インラインCSSとは？ HTMLでインラインCSSを使用するには、style属性を使います。style属性は、個々の要素に対して直接スタイルを指定するための属性です。font-family（フォントの種類）、font-style（フォントのスタイル）、text-decoration（文字装飾）、direction（文字の方向）など、さまざまなCSSプロパティと組み合わせて利用できます。 style属性の注意点 style属性で指定したスタイルは優先度が最も高く、他のスタイル指定を上書きします。具体的には、以下のようなスタイル指定よりも優先されます。 <style>タグ内に記述さ