カスケードと特異性を備えたHTMLにCSSスタイルを適用する方法

提供：Dev Guides
移動先:案内、検索

著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

カスケードスタイルシートは、CSSとしてよく知られ、Web上の視覚的なスタイルとデザインの言語です。 CSSは、最初のアイデアで1994年にさかのぼるWeb上で長い歴史を持っています。 それ以来、CSSは、Webページのレイアウト、複雑なアニメーションの作成などを行うことができる機能豊富な言語になりました。

CSSはWebのスタイリング言語であるため、CSSがどのように機能し、どのように使用するかを理解することがWeb開発の基本です。 ハイパーテキストマークアップ言語（HTML）および JavaScript を効果的に使用するには、理解しておくことが特に重要です。 このチュートリアルでは、CSSの基本的な側面であるHTML、カスケード、および特異性へのCSSの適用に焦点を当て、WebプロジェクトでCSSを効果的に使用するための準備をします。

CSSは従来のプログラミング言語ではありません。 変数や数学など、他のプログラミング言語に見られるいくつかの機能がありますが、CSSは完全にHTMLに依存して機能します。 CSSの目的は、HTMLに視覚的な変更を加えることです。 CSS言語は、ブラウザーのToDoリストのようなものです。ブラウザーに言っているのは、ここに私が見つけてほしいもののリストです。 ブラウザがそれらを見つけると、CSSはブラウザにサブセットリストを調べてそれらに変更を加えるように指示します。

ブラウザはこの指示のリストを上から下まで間違いなくたどります。CSSはそれを念頭に置いて作成する必要があります。 カスケードスタイルシートのcascadeの部分は、ブラウザーがリストを読み取る方法を示しています。 ブラウザは公平であるため、遭遇するとスタイルが変更されます。 CSSが一部のHTML要素を赤にするように指示し、その後CSSでそれらの要素を青にするように指示する場合、結果は青になります。

HTMLで要素を見つけるようにブラウザに指示する方法はたくさんあるので、要素にスタイルを適用するのは少し複雑になります。 HTMLの各要素には、特定の要素を検索するために使用できる属性のセットがあります。 ブラウザが公平に指示を上から下に読み取るカスケードのため、提供される指示は具体的でなければなりません。 これは特異性として知られており、開発者は、スタイルを適用したい正確な要素を見つけるために、ブラウザーの正確な基準を作成する必要があります。

このチュートリアルでは、複数の実践的な例を使用して、スタイルをHTML要素に適用するさまざまな方法と、カスケードと特異性がスタイルの記述方法にどのように影響するかを理解します。

前提条件

  • ローカルマシンにindex.htmlとして保存されたHTMLファイルで、選択したテキストエディタとWebブラウザからアクセスできます。 開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズでWebサイトを構築する方法全体を試してください。

HTMLスタイル属性の使用

この最初のステップでは、style属性を使用してHTML要素に直接スタイルを適用します。 このメソッドは、インラインスタイリングとも呼ばれ、HTML要素属性を使用してCSSプロパティを値として受け入れ、それを要素に直接適用します。

CSSのいくつかの概念に慣れるために、テキストエディタでindex.htmlファイルを開くことから始めます。 そのファイルで、<html>、<head>、および<body>タグの基本HTML構造を設定します。 <body>タグ内に、短いテキスト文を含む<div>を追加します。

index.html 

<!doctype html>
<html>
    <head>
        <title>Sammy Shark</title>
    </head>
    <body>
        <div>Sammy is the greatest shark in the ocean.</div>
    </body>
</html>

次に、ブラウザでindex.htmlを開きます。 ブラウザウィンドウの左上部分にある<div>にテキストが表示されます。 視覚的には、テキストは次の画像のように表示され、TimesNewRomanなどのserifフォントを使用して白い背景に黒いテキストが表示されます。

スタイリングを開始するには、値が空の属性を開始<div>タグに追加します。

index.html 

...
<div style="">Sammy is the greatest shark in the ocean.</div>
...

style属性は、CSSのプロパティと値を含むHTMLの特別な属性です。 ブラウザはそれらのスタイルをその要素に適用します。

この場合、colorプロパティを使用して、文の色をnavyに変更します。 CSSのプロパティと値の形式は、プロパティ名で始まり、コロン記号:、プロパティ値、値の後にセミコロン記号;が続き、ブラウザにすべてを通知します。値の場合：

index.html 

...
<div style="color: navy;">Sammy is the greatest shark in the ocean.</div>
...

index.htmlを保存し、ブラウザに戻って更新します。 次の画像に示すように、テキストはブラウザのデフォルトの色である黒からネイビーに変更されました。

background-colorやfont-familyなど、style属性で試すことができる多くのCSSプロパティがあります。 通常、ブラウザのデフォルトフォントは、TimesNewRomanなどのセリフフォントです。 フォントをsansserif font （ArialやHelveticaなど）に変更するには、colorプロパティのセミコロンの後にスペースを追加し、font-familyプロパティに続けて入力します。 sans-serifを値として持つコロン：

index.html 

...
<div style="color: navy; font-family: sans-serif;">Sammy is the greatest shark in the ocean.</div>
...

ファイルを保存し、ブラウザを更新して、文のフォントがどのように変更されたかを確認します。 フォントは、デフォルトのフォントではなく、ブラウザのサンセリフフォント（HelveticaやArialなど）になります。 次の画像は、font-familyプロパティがネイビーへの色の変更に基づいてどのように構築されるかを示しています。

いくつかのCSSプロパティを記述したので、文の単語を次のようにラップします。 エレメントそしてブラウザに戻ります：

index.html 

...
<div style="color: navy; font-family: sans-serif;">Sammy is the <strong>greatest</strong> shark in the ocean.</div>
...

次の図に示すように、ブラウザでは、<strong>タグ内の単語が文中の他の単語よりも太字で表示されます。

<strong>要素を持つ単語は、その中にあるHTML要素のcolorおよびfont-familyプロパティを保持します。これは、親とも呼ばれます。 これは継承の例であり、別の要素内のHTML要素である child 要素が、親要素に配置されたスタイルを継承します。 <strong>要素は、ブラウザのデフォルトスタイルfont-weight: bold;も追加し、テキストを太字にします。 さらに、<strong>要素にstyle属性を設定して、その要素にカスタムの外観を与えることもできます。

index.html 

...
<div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div>
...

<strong>要素の単語が青色になり、残りの文の海軍とは対照的に、ファイルを保存してブラウザを更新し、違いを確認します。 この変更は、次の画像に示されています。

このセクションでは、HTML style属性を使用して、<div>および<strong>要素にスタイルを適用しました。 次のセクションでは、これらの特定の要素に対して作成したスタイルを使用して、ページ上のすべての<div>および<strong>要素に適用します。

<style>タグを使用してCSSを作成する

次に、前のセクションで書いたものを使用して、ページ上のすべての同様の要素にスタイルを適用します。 style属性の使用から<style>HTML要素の使用に移行します。 <style>は、その中にCSSを記述し、それらのスタイルをページ全体に適用できるようにする特別な要素です。

HTML要素でstyle属性を使用すると非常に便利ですが、その要素またはその子孫のみに制限されます。 これがどのように機能するかを確認するには、新しい文で別の<div>要素を追加します。

index.html 

...
<div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div>
<div>They like to swim with their friends.</div>
...

ブラウザに移動して、ページをリロードします。 ブラウザまたは次の画像でわかるように、最初の文は前に書いたすべてのスタイルを取得しますが、新しい文は代わりにブラウザのデフォルトのスタイルを使用します。

個々の要素に同じstyle属性を適用することもできますが、同じように見せたい文がたくさんある場合は、非常に面倒になります。 必要なのは、同じ種類の要素の多くを同時にターゲットにする方法です。 これは、HTML<style>要素を使用して実行できます。

<style>要素は、ほとんどの場合、HTMLドキュメントの<head>タグに配置されます。 このようにして、ブラウザはHTMLを読み取る前にスタイルを読み取り、ページがすでにスタイル設定された状態で読み込まれるようにします。 逆にすると、ブラウザがコンテンツをブラウザのデフォルトスタイルでロードしてから、カスタムスタイルをロードするときに、フラッシュが発生する可能性があります。 ただし、<style>タグは<head>での使用に限定されず、<body>内のどこにでも配置できるため、シナリオによっては有利な場合があることに注意してください。

<style>タグをindex.htmlファイルの<head>に追加します。

index.html 

<!doctype html>
<html>
    <head>
        <title>Sammy Shark</title>
        <style>
        </style>
    </head>
    <body>
        <div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div>
        <div>They like to swim with their friends.</div>
    </body>
</html>

<style>要素内で、セレクターを使用して、ターゲットにする要素の種類を定義できます。これにより、スタイルを適用するHTML要素が識別されます。 セレクターを配置したら、その要素に適用するスタイルをセレクターブロックと呼ばれるものにグループ化できます。

その設定を開始するには、前の例を見てください。 ここには、colorとfont-familyの2つのプロパティを持つ<div>があります。

index.html 

...
<div style="color: navy; font-family: sans-serif;">...</div>
...

index.htmlページのすべての<div>要素をターゲットにするには、<style>属性内にタイプセレクターと呼ばれるものを追加します。ブレース。セレクターブロックを定義します。 これは、ページ上のすべての<div>要素を検索し、セレクターブロック内で見つかったスタイルを適用するようにブラウザーに指示します。

index.html 

<!doctype html>
<html>
    <head>
        <title>Sammy Shark</title>
        <style>
            div {
            }
        </style>
    </head>
    <body>
        <div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div>
        <div>They like to swim with their friends.</div>
    </body>
</html>

次に、style属性からプロパティを取得し、セレクターブロックの中括弧内に配置します。 読みやすくするために、各プロパティを個別の行に配置すると便利です。

index.html 

<!doctype html>
<html>
    <head>
        <title>Sammy Shark</title>
        <style>
            div {
                color: navy;
                font-family: sans-serif;
            }
        </style>
    </head>
    <body>
        <div>Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div>
        <div>They like to swim with their friends.</div>
    </body>
</html>

ファイルを保存したら、ブラウザに戻って更新します。 これで、両方の文に同じスタイルが適用され、すべて<style>要素の単一のセレクターから実行されます。

divセレクターブロックの後に新しいセレクターを追加して、同じ方法で<strong>要素のスタイルを適用します。 また、2番目の文の単語の周りに<strong>要素を追加して、複数の要素で新しいCSSを表示します。

index.html 

<!doctype html>
<html>
    <head>
        <title>Sammy Shark</title>
        <style>
            div {
                color: navy;
                font-family: sans-serif;
            }
            strong {
                color: blue;
            }
        </style>
    </head>
    <body>
        <div>Sammy is the <strong>greatest</strong> shark in the ocean.</div>
        <div>They like to swim with their <strong>friends</strong>.</div>
    </body>
</html>

ファイルを保存してブラウザを更新するか、次の画像を見て、<strong>要素を使用している両方の単語が青色になっていることを確認します。

このセクションでは、<style>要素内にCSSセレクターを記述しました。これにより、ページ上の一致するすべての要素にスタイルが適用されます。 次のセクションでは、これらのスタイルを移動して、Webサイトの多くのページに適用できるようにします。

外部CSSドキュメントをHTMLにロードする

このセクションでは、複数のHTMLページにロードされているCSSファイルの操作を開始します。 スタイルを前のセクションからCSSファイルに移動し、新しいHTMLページを作成して、1つのCSSファイルで複数のページのスタイルを設定する方法を確認します。

style属性が単一要素のスタイル設定に制限されているのと同様に、<style>要素にあるCSSは単一ページのスタイル設定に制限されています。 Webサイトは、ほとんどの場合、同じスタイルを共有する多くのWebページのコレクションです。 すべてが同じように見える必要がある複数のページがあり、<style>要素を使用してCSSを保持している場合、スタイルを変更するには、各ページで多くの繰り返し作業が必要になります。 これがCSSファイルの出番です。

styles.cssという名前の新しいファイルをエディターで作成します。 そのファイルで、<style>要素の内容をindex.htmlからコピーし、styles.cssファイルに追加します。 <style>タグは必ず除外してください。

styles.css 

div {
    color: navy;
    font-family: sans-serif;
}
strong {
    color: blue;
}

独立したCSSファイルができたので、次にそのファイルをページにロードして、ブラウザーがスタイルを適用できるようにします。 <head>から<style>タグを削除することから始めます。 次に、<head>タグ内に、hrefとrelの2つの属性を持つ自己終了<link />要素を記述します。 href値には、style.cssファイルへのパスが含まれているため、ブラウザーはCSSを参照できます。 rel属性は、ページと参照されているドキュメント間の関係のタイプを定義するため、stylesheetの値を持つ必要があります。

index.html 

<!doctype html>
<html>
    <head>
        <title>Sammy Shark</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div>Sammy is the <strong>greatest</strong> shark in the ocean.</div>
        <div>They like to swim with their <strong>friends</strong>.</div>
    </body>
</html>

次に、ブラウザに移動してindex.htmlを更新します。 この場合、スタイルが存在する場所を変更するだけなので、何も変更されていません。

CSSファイルの有用性を示すために、about.htmlという名前の新しいHTMLファイルを作成します。 index.htmlからHTMLをコピーして貼り付けてから、文に変更を加えるか、新しい文を作成します。

about.html 

<!doctype html>
<html>
    <head>
        <title>About Sharks</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div>There are over <strong>500</strong> species of sharks.</div>
        <div>The great white shark can grow up to <strong>6.1 meters</strong> long.</div>
    </body>
</html>

次に、新しいブラウザウィンドウでabout.htmlを開き、両方のHTMLファイルを同時に表示および比較できるようにします。 これにより、次の図に示すように、about.htmlはdiv要素とstrong要素の両方で同じスタイルになります。

テキストエディタに戻り、styles.cssを開き、divセレクタのcolorプロパティ値をgreenに変更します。

styles.css 

div {
    color: green;
    font-family: sans-serif;
}
strong {
    color: blue;
}

ブラウザで、index.htmlとabout.htmlの両方を更新して、CSSファイルのスタイルを変更すると両方のHTMLファイルにどのように影響するかを確認します。 次の画像が示すように、index.htmlとabout.htmlの両方でテキストがネイビーからグリーンに変わりました。

各ページには、緑色のテキストと青色の<strong>要素が適用された同じスタイルがあり、すべて1つの中央CSSファイルからのものです。

このセクションでは、CSSファイルを作成し、そのCSSファイルを複数のHTMLページにロードしました。 CSSを<style>要素からCSSファイルに移動しました。CSSファイルは、index.htmlと新しいabout.htmlページに同じスタイルを適用しました。 次に、CSSカスケードと特異性の操作を開始します。

カスケードと特異性の操作

このセクションでは、導入部で説明したカスケードと特異性のCSS機能について詳しく説明します。 これらの概念を例示するCSSを作成し、カスケードから始めて、次に特異性を示します。 カスケードと特異性を理解すると、コードで発生する可能性のある問題のトラブルシューティングに役立ちます。

これまでに達成したことで、カスケードは短いです。 CSSファイルのサイズが大きくなるにつれて、CSSセレクターとプロパティの順序を認識する必要がますます高まっています。 カスケードについて考える1つの方法は、水カスケードと急流の横断について考えることです。 上流に行こうとすると、ほとんど進歩しないために多大な努力が必要になるため、現在のものを使用することをお勧めします。 CSSについても同じことが言えます。コードが期待どおりに機能しない場合は、カスケードの流れに逆行している可能性があります。

これを実際に確認するには、前のファイルを開きます。 テキストエディタでstyles.cssを開き、ブラウザでindex.htmlを開きます。 ブラウザの<div>要素は現在greenで、太字のテキストはblueになっています。 divセレクターのfont-familyプロパティの後に、orangeの値を持つ別のcolorプロパティを追加します。

styles.css 

div {
    color: green;
    font-family: sans-serif;
    color: orange;
}
strong {
    color: blue;
}

ブラウザはカスケードをトラバースして緑色のスタイルになり、divを緑色に変えます。 次に、ブラウザがオレンジ色になり、色が緑からオレンジに変わります。 次の画像に示すように、ブラウザでindex.htmlを更新して、緑色のテキストがオレンジ色になっていることを確認します。

このシナリオでは、ブラウザーに2つのcolorプロパティが与えられており、カスケードの性質上、ブラウザーは最後のcolorプロパティを要素に適用します。 カスケードのさらに下のプロパティが前のプロパティを無効にすると、オーバーライドと呼ばれる状況が発生します。 CSSファイルのサイズと範囲が大きくなると、オーバーライドがバグの原因になるだけでなく、問題の解決策になる可能性があります。

カスケードは、ブラウザーがスタイルを読み取って要素に適用する方法を扱いますが、特異性は、どの要素が検出され、スタイルが設定されるかを扱います。

ブラウザでabout.htmlを開きます。 現在、両方の文のスタイルは同じです。 次に、2番目の文の<strong>要素の色をredに変更しますが、最初の<strong>の色はblueに設定したままにします。 この変更を行うには、より高い特異性のセレクターが必要です。 現在、セレクターは、親に関係なく、ページ上のすべての<strong>要素を対象としているため、いわゆる低特異性です。

より高い特異性はいくつかの異なる方法で達成できますが、最も一般的で効果的な方法はクラスセレクターです。 2番目の<strong>要素に、classという新しい属性を追加し、その属性にhighlightのプロパティ値を指定します。

about.html 

<!doctype html>
<html>
    <head>
        <title>About Sharks</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div>There are over <strong>500</strong> species of sharks.</div>
        <div>The great white shark can grow up to <strong class="highlight">6.1 meters</strong> long.</div>
    </body>
</html>

次に、テキストエディタでstyles.cssを開いて、クラスセレクタを作成します。 まず、前に追加したdivからcolor: orange;を削除します。

CSSでは、要素セレクターは識別子なしで書き出されますが、クラスセレクターでは、属性で見つかった値の前にピリオド（.）が付きます。 この場合、セレクター.hightlightを使用して、値がredのcolorプロパティを適用します。

styles.css 

div {
    color: green;
    font-family: sans-serif;
}
strong {
    color: blue;
}
.highlight {
  color: red;
}

styles.cssとabout.htmlの両方に変更を保存し、ブラウザでabout.htmlを更新します。 次の画像に示すように、2番目の<strong>要素がredになっていることがわかります。

カスケードに関する特異性の堅牢性を理解するには、strongと.highlightセレクターブロックを交換します。 セレクターの種類が異なれば、特異性も高くなります。 この場合、クラスセレクターは要素セレクターよりも高い特異性を持っています。

styles.css 

div {
    color: green;
    font-family: sans-serif;
}
.highlight {
  color: red;
}
strong {
  color: blue;
}

ブラウザでabout.htmlを保存して更新すると、変更がないことに気付くでしょう。 次の画像は、CSSを並べ替えても視覚的な変化がないことを示しています。

これは、要素セレクターの特異性が低く、クラスセレクターの特異性が高いためです。 ブラウザがリストを上から下に関係なく読み取っている間、より高い特異性のセレクタを使用することで、スタイルを適用するときにもっと注意を払うようにブラウザに指示できます。

このセクションでは、カスケードと特異性のCSS機能を使用しました。 同じプロパティを要素に2回適用しました。これは、リストの最後のプロパティを使用してカスケードがどのように機能するかを示しています。 また、クラスセレクターと呼ばれるより特異性の高いセレクターを使用してスタイルを作成しました。 次に、カスケードと特異性の両方をオーバーライドする特別なCSSルールについて学習します。

!importantルールの使用

この最後のセクションでは、CSS !importantルールについて学習し、その使用方法の例を記述します。 この例では、HTMLを制御できない架空のシナリオを使用しているため、CSSのみを使用して問題を修正する必要があります。

CSSはカスケードで機能することが多く、優れた特異性を備えていますが、スタイルを強制する必要がある場合もあります。 これは、プロパティ値の最後のセミコロンの前に!importantフラグを追加することによって行われます。 これは簡単に使用するルールではありません。使用する場合は、!importantを使用する理由を説明するコードコメントを含めることをお勧めします。

警告： !importantルールの動作により、他のすべてのメソッドが失敗した場合にのみ使用する必要があります。 ルールを使用すると、一致するすべての要素の値が上書きされるため、それ以上上書きすることは困難または不可能になります。 これにより、コードが他の開発者にとって読みにくくなります。


これがどのように機能するかを確認するには、エディターでindex.htmlを開き、colorをredに設定してstyle属性を追加します。

index.html 

<!doctype html>
<html>
    <head>
        <title>Sammy Shark</title>
        <link href="styles.css" rel="stylesheet" />
    </head>
    <body>
        <div>Sammy is the <strong style="color: red;">greatest</strong> shark in the ocean.</div>
        <div>They like to swim with their friends.</div>
    </body>
</html>

ブラウザにindex.htmlをロードすると、style属性の特異性がCSSセレクターよりも高いため、style属性が青色を赤色で上書きすることがわかります。 ブラウザの内容は次の画像のようになります。

Webサイトで作業する場合、このようなインラインスタイルを適用する可能性のあるJavascriptをロードするのが一般的です。 style属性を持つ要素はカスケードの下部にあります。つまり、すべてのstrongタグblueを回転させるスタイルでも、これはredになります。 Javascriptがstyle属性を作成するシナリオでは、HTMLから削除することはできません。

スタイルのオーバーライドを強制するには、エディターでstyles.cssを開き、strongセレクターのblueプロパティ値の後に、!importantを追加します。

styles.css 

...
strong {
    color: blue !important;
}

ブラウザに戻り、index.htmlを更新します。 次の画像のように、青い色が再び表示されます。

style属性で色がredとして定義されているにもかかわらず、!importantルールにより、これがより重要なスタイルであることがブラウザに通知されるため、現在はblueになっています。使用する。 !importantの理由を説明するCSSコードコメントを追加すると、将来の開発者や将来、なぜそれを使用しているのかを理解できるので便利です。

styles.css 

...
strong {
    /* !imporant used here because of JavaScript applying a style attribute on the selector */
    color: blue !important;
}

このセクションでは、!importantルールについて学習し、実際のシナリオで使用しました。 また、!importantルールは、カスケードと特異性を大幅に無効にするため、意図的に使用する必要がある危険なツールであることも学びました。 さらに、CSSコメントを作成しました。これは、コードを確認している将来の開発者に通知するため、および後でコードに戻ったときに通知するために使用されます。

結論

CSSは、HTMLの操作とスタイル設定のために作られた用途の広い言語です。 このチュートリアルでは、スタイルを適用するさまざまな方法でHTML要素のスタイルを設定しました。 これで、独自のスタイルを書き始めるための基盤ができました。 CSSとその仕組みをさらに深く理解したい場合は、CSSの統治機関であるWorld Wide Web Consortium（W3C）が、言語に関するあらゆる種類の情報を提供します。

CSSに関するその他のチュートリアルをご覧になりたい場合は、CSSトピックページをご覧ください。

「https://www.finddevguides.com/index.php?title=カスケードと特異性を備えたHTMLにCSSスタイルを適用する方法&oldid=104707」から取得
Powered by MediaWiki