カスケードと特異性を備えたHTMLにCSSスタイルを適用する方法
序章
カスケードスタイルシートは、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要素に適用するさまざまな方法と、カスケードと特異性がスタイルの記述方法にどのように影響するかを理解します。
前提条件
- ローカルマシンに次のように保存されたHTMLファイル
index.html
選択したテキストエディタとWebブラウザからアクセスできます。 開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズでWebサイトを構築する方法全体を試してください。
HTMLスタイル属性の使用
この最初のステップでは、style属性を使用してHTML要素に直接スタイルを適用します。 このメソッドは、インラインスタイリングとも呼ばれ、HTML要素属性を使用してCSSプロパティを値として受け入れ、それを要素に直接適用します。
CSSのいくつかの概念を理解するには、まず、 index.html
テキストエディタでファイルします。 そのファイルで、の基本HTML構造を設定します <html>
, <head>
、 と <body>
タグ。 内部 <body>
タグは <div>
テキストの短い文で:
<!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>
鬼ごっこ:
...
<div style="">Sammy is the greatest shark in the ocean.</div>
...
The style
attributeは、CSSのプロパティと値を含むHTMLの特別な属性です。 ブラウザはそれらのスタイルをその要素に適用します。
この場合、文の色を次のように変更します navy
を使用して color
財産。 CSSのプロパティと値の形式は、プロパティ名で始まり、その後にコロン記号が続きます :
、次にプロパティ値、最後にセミコロン記号 ;
値の後に、値がすべてであることをブラウザに通知します。
...
<div style="color: navy;">Sammy is the greatest shark in the ocean.</div>
...
保存 index.html
、ブラウザに戻り、更新します。 次の画像に示すように、テキストはブラウザのデフォルトの色である黒からネイビーに変更されました。
あなたが試すことができる多くのCSSプロパティがあります style
などの属性 background-color
また font-family
. 通常、ブラウザのデフォルトフォントは、TimesNewRomanなどのセリフフォントです。 フォントをsansserifフォント(ArialやHelveticaなど)に変更するには、セミコロンの後にスペースを追加します。 color
次に、プロパティを入力します font-family
プロパティ、コロン、 sans-serif
値として:
...
<div style="color: navy; font-family: sans-serif;">Sammy is the greatest shark in the ocean.</div>
...
ファイルを保存し、ブラウザを更新して、文のフォントがどのように変更されたかを確認します。 フォントは、デフォルトのフォントではなく、ブラウザのサンセリフフォント(HelveticaやArialなど)になります。 次の画像は、 font-family
プロパティは、ネイビーへの色の変更に基づいています。
いくつかのCSSプロパティを記述したので、文の単語を次のようにラップします。 エレメントそしてブラウザに戻ります:
...
<div style="color: navy; font-family: sans-serif;">Sammy is the <strong>greatest</strong> shark in the ocean.</div>
...
お使いのブラウザでは、 <strong>
次の図に示すように、タグは文中の他の単語よりも太字で表示されます。
との言葉 <strong>
要素は保持します color
と font-family
内部にあるHTML要素のプロパティ。親とも呼ばれます。 これは継承の例であり、別の要素内のHTML要素である child 要素が、親要素に配置されたスタイルを継承します。 The <strong>
要素はまた、ブラウザのデフォルトスタイルを追加します font-weight: bold;
、テキストを太字にします。 さらに、 <strong>
要素は持つことができます style
その要素にカスタムの外観を与えるための属性もあります。
...
<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をその中に記述し、それらのスタイルをページ全体に適用できるようにする特別な要素です。
を使用して style
HTML要素の属性は非常に便利ですが、その要素またはその子孫のみに制限されています。 これがどのように機能するかを確認するには、別の <div>
新しい文を持つ要素:
...
<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>
エレメント。
The <style>
要素はほとんどの場合、 <head>
HTMLドキュメントのタグ。 このようにして、ブラウザはHTMLを読み取る前にスタイルを読み取り、ページがすでにスタイル設定された状態で読み込まれるようにします。 逆にすると、ブラウザがコンテンツをブラウザのデフォルトスタイルでロードしてから、カスタムスタイルをロードするときに、フラッシュが発生する可能性があります。 ただし、 <style>
タグはでの使用に限定されません <head>
内のどこにでも配置できます <body>
、これは一部のシナリオで有利な場合があります。
追加 <style>
にタグを付ける <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要素が識別されます。 セレクターを配置したら、その要素に適用するスタイルをセレクターブロックと呼ばれるものにグループ化できます。
その設定を開始するには、前の例を見てください。 ここにあります <div>
2つのプロパティで、 color
と font-family
.
...
<div style="color: navy; font-family: sans-serif;">...</div>
...
すべてをターゲットに <div>
上の要素 index.html
ページで、タイプセレクターと呼ばれるものを <style>
属性の後に、セレクターブロックを定義する開閉中括弧が続きます。 これにより、ブラウザはすべての <div>
ページ上の要素とセレクターブロック内にあるスタイルを適用します。
<!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
属性を設定し、セレクターブロックの中括弧内に配置します。 読みやすくするために、各プロパティを個別の行に配置すると便利です。
<!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>
同じように要素。 また、を追加します <strong>
複数の要素で新しいCSSを表示するには、2番目の文の単語の周りの要素:
<!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>
要素は青色です:
このセクションでは、CSSセレクターを <style>
要素。ページ上の一致するすべての要素にスタイルを適用しました。 次のセクションでは、これらのスタイルを移動して、Webサイトの多くのページに適用できるようにします。
外部CSSドキュメントをHTMLにロードする
このセクションでは、複数のHTMLページにロードされているCSSファイルの操作を開始します。 スタイルを前のセクションからCSSファイルに移動し、新しいHTMLページを作成して、1つのCSSファイルで複数のページのスタイルを設定する方法を確認します。
ちょうど style
属性は、単一の要素のスタイル設定に制限されています。CSSは <style>
要素は、単一ページのスタイル設定に制限されています。 Webサイトは、ほとんどの場合、同じスタイルを共有する多くのWebページのコレクションです。 すべて同じに見える必要がある複数のページがあり、 <style>
CSSを保持する要素であるため、スタイルを変更するには、各ページで多くの繰り返し作業が必要になります。 これがCSSファイルの出番です。
エディターでという新しいファイルを作成します styles.css
. そのファイルで、の内容をコピーします <style>
からの要素 index.html
そしてそれらをあなたに追加します styles.css
ファイル。 必ず除外してください <style>
タグ。
div {
color: navy;
font-family: sans-serif;
}
strong {
color: blue;
}
独立したCSSファイルができたので、次にそのファイルをページにロードして、ブラウザーがスタイルを適用できるようにします。 を削除することから始めます <style>
からのタグ <head>
. その後、内部 <head>
タグ、自己閉鎖を書く <link />
2つの属性を持つ要素、 href
と rel
. The href
値には、へのパスが含まれます style.css
ブラウザがCSSを参照できるようにするためのファイル。 The rel
属性の値は stylesheet
ページと参照されているドキュメント間の関係のタイプを定義するため、次のようになります。
<!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ファイルの有用性を示すために、という新しいHTMLファイルを作成します。 about.html
. からHTMLをコピーして貼り付けます index.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
:
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ファイルへの要素 index.html
と新しい about.html
ページ。 次に、CSSカスケードと特異性の操作を開始します。
カスケードと特異性の操作
このセクションでは、導入部で説明したカスケードと特異性のCSS機能について詳しく説明します。 これらの概念を例示するCSSを作成し、カスケードから始めて、次に特異性を示します。 カスケードと特異性を理解すると、コードで発生する可能性のある問題のトラブルシューティングに役立ちます。
これまでに達成したことで、カスケードは短いです。 CSSファイルのサイズが大きくなるにつれて、CSSセレクターとプロパティの順序を認識する必要がますます高まっています。 カスケードについて考える1つの方法は、水カスケードと急流の横断について考えることです。 上流に行こうとすると、ほとんど進歩しないために多大な努力が必要になるため、現在のものを使用することをお勧めします。 CSSについても同じことが言えます。コードが期待どおりに機能しない場合は、カスケードの流れに逆行している可能性があります。
これを実際に確認するには、前のファイルを開きます。 開ける styles.css
テキストエディタで index.html
ブラウザで。 The <div>
ブラウザの要素は現在 green
、太字のテキストで blue
. 後に font-family
のプロパティ div
セレクター、別の color
の値を持つプロパティ orange
:
div {
color: green;
font-family: sans-serif;
color: orange;
}
strong {
color: blue;
}
ブラウザはカスケードをトラバースし、緑色のスタイルをヒットし、 div
緑。 次に、ブラウザがオレンジ色になり、色が緑からオレンジに変わります。 更新 index.html
次の画像に示すように、ブラウザで緑色のテキストがオレンジ色になっていることを確認します。
このシナリオでは、ブラウザに2つ与えられています color
プロパティ、およびカスケードの性質により、ブラウザは最後のを適用します color
要素へのプロパティ。 カスケードのさらに下のプロパティが前のプロパティを無効にすると、オーバーライドと呼ばれる状況が発生します。 CSSファイルのサイズと範囲が大きくなると、オーバーライドがバグの原因になるだけでなく、問題の解決策になる可能性があります。
カスケードは、ブラウザーがスタイルを読み取って要素に適用する方法を扱いますが、特異性は、どの要素が検出され、スタイルが設定されるかを扱います。
開ける about.html
ブラウザで。 現在、両方の文のスタイルは同じです。 次に、色を変更します <strong>
2番目の文の要素 red
、しかし最初に保つ <strong>
色をに設定 blue
. この変更を行うには、より高い特異性のセレクターが必要です。 現在、セレクターはすべてを対象としているため、いわゆる低特異性です。 <strong>
親に関係なく、ページ上の要素。
より高い特異性はいくつかの異なる方法で達成できますが、最も一般的で効果的な方法はクラスセレクターです。 2番目に <strong>
要素、という新しい属性を追加します class
その属性に次のプロパティ値を指定します highlight
:
<!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
テキストエディタでクラスセレクタを作成します。 まず、を削除します color: orange;
から div
以前に追加しました。
CSSでは、要素セレクターは識別子なしで書き出されますが、クラスセレクターではピリオド(.
)は、属性で見つかった値の前にあります。 この場合、セレクターを使用してください .hightlight
適用するには color
の値を持つプロパティ red
:
div {
color: green;
font-family: sans-serif;
}
strong {
color: blue;
}
.highlight {
color: red;
}
両方に変更を保存します styles.css
と about.html
更新します about.html
ブラウザで。 あなたはその2番目を見つけるでしょう <strong>
要素は今です red
、次の画像に見られるように:
カスケードに関する特異性の堅牢性を理解するには、 strong
と .highlight
セレクターブロック。 セレクターの種類が異なれば、特異性も高くなります。 この場合、クラスセレクターは要素セレクターよりも高い特異性を持っています。
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
エディターで追加します style
を持つ属性 color
に設定 red
:
<!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
属性は青色を赤色で上書きします。 style
属性はCSSセレクターよりも高い特異性を持っています。 ブラウザの内容は次の画像のようになります。
Webサイトで作業する場合、このようなインラインスタイルを適用する可能性のあるJavascriptをロードするのが一般的です。 を持つ要素 style
属性はカスケードの最下部にあります。つまり、すべてを変えるスタイルでも strong
タグ blue
、これは red
. Javascriptが作成するシナリオでは style
属性、HTMLから削除することはできません。
スタイルのオーバーライドを強制するには、を開きます styles.css
エディター内および blue
あなたのプロパティ値 strong
セレクター、追加 !important
:
...
strong {
color: blue !important;
}
ブラウザに戻って更新します index.html
. 次の画像のように、青い色が再び表示されます。
かかわらず style
色を次のように定義する属性 red
今です blue
、 おかげ !important
これが使用するより重要なスタイルであることをブラウザに伝えるルール。 理由を説明するCSSコードコメントを追加すると便利です !important
したがって、将来の開発者または将来は、なぜそれを使用しているのかを理解できます。
...
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トピックページをご覧ください。