CSS の概念を調べる

  • 4 分

CSS の構造

HTML ページで h1 タグの間にあるすべてのテキストをオレンジ色で表示したい場合は、次のような CSS コードを使用できます。

h1 {
    color: orange;
}

上記の CSS コードは、スタイルを設定する HTML を選択する h1 で始まっています。 サンプルの h1 はセレクターと呼ばれます。

中かっこ内のコード color: orange; では、選択されている h1 タグに必要なスタイル設定方法が宣言されていることに注意してください。 中かっこ { } の内部の CSS コード (color: orange; など) は、宣言と呼ばれます。

サンプルの宣言には、プロパティcolor が含まれています。これは、コロン () によってorange: と区切られており、設定の終わりはセミコロン (;) でマークされます。

注

利用可能なすべてのプロパティと値をCSSで記憶する必要はありません。 参照できるウェブサイトはたくさんあります。 また、 vscode.dev や Visual Studio Code などのツールには、CSS を作成する際のガイドとなるオートコンプリート オプションが用意されています。

CSS ファイルを埋め込む

スタイル情報を追加する簡単な方法は、head 属性を使って HTML ページの style タグ内にそれを配置することです。 この方法はベスト プラクティスとはいえませんが、学習とテストに使うには問題ありません。

次の例では、すべての <style> を灰色で表示するスタイル情報を含む h1 タグを追加しています。 それが唯一のスタイルであるため、HTML の残りの部分はブラウザーの既定のスタイルで表示されます。

<!DOCTYPE html>
<html>
    <head>
        <!-- Here's the styling information -->
        <style>
            h1 {
                color: gray;
               }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>

ブラウザーで表示すると、<h1> タグ内の "Welcome" というテキストが灰色で表示されます。

見出し 1 が灰色で表示されている、レンダリングされた HTML ページのスクリーンショット。

CSS を使用して HTML にスタイルを適用する

ハイパーテキスト マークアップ言語 (HTML) にスタイルを追加する場合は、別の CSS ファイルでスタイルを設定するのが最善です。 複数の HTML ファイルで同じ CSS を使用すると、外観は一貫してなります。 さらに、1 つの CSS ファイルを更新する方が、HTML ファイルを個別に更新するより簡単です。

CSS ファイルを参照するには、link 要素を使います。

link には、2 つの属性 rel と href があります。 参照しているリソースの種類を示すには rel を使い、スタイル シートの場合は style sheet です。 CSS ファイルへのパスを示すには、href を使います。 CSS ファイルが HTML ファイルと同じフォルダーにあり、style.css という名前の場合は、次のようにしてページから参照できます。

<link rel="stylesheet" href="style.css">

これで、 .html ファイルと .css ファイルの少なくとも2つのファイルが作成されました。 前の例には、CSS にリンクする HTML ファイルがあります。

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>