PR

CSS|HTMLにCSSを適用(読み込ます)させる3つの方法

HTMLにCSSを適用(読み込ます)させる方法は3つあり、それぞれCSSを書き込む場所が違います。

  1. 内部スタイルシート:HTMLファイルの<head>内にCSSを書き込む方法
  2. インラインスタイルシート:HTMLタグに直接CSSを書き込む方法
  3. 外部スタイルシート:「.css」の拡張子がついたCSSファイルを作成し、それをHTMLファイルに読み込ませる方法

表示させるページが1枚~10枚程度の小規模なWebサイトの制作なら「内部スタイルシート」や「インラインスタイルシート」でつくる方が効率の良い場合がありますが、一般的によく使われている方法は「外部スタイルシート」です。

では、前回までの説明で使用した「ステーキハウス」を基に説明していきます。それぞれCSSを書き込む場所と適用の方法を変えて「サーロインステーキ300g」の文字を赤字の40pxにします。

CSSを適用

内部スタイルシート

HTMLファイルの<head>内にCSSを書き込む方法。↓↓「CSS構文の基本」で説明。

この方法は、CSSを記述したHTMLファイルだけに適用されるので、複数のHTMLファイルには反映されません。

特定のページだけにデザインを付け加えたい場合などに使えます。

【適用方法】

HTMLファイルの<head>内に<style>タグを追加しその中にCSSを書きます。

セレクター(HTMLの要素名)を「p」としているので、以下の<body>内の「p」すべてに適用されます。

インラインスタイルシート

HTMLタグに直接CSSを書き込む方法で、直接書かれたタグにだけ適用されます。1つひとつのタグに書き込むのに手間がかかり、メンテナンスも難しいといった問題があります。

この方法は、他の方法でCSSを適用させるより優先度が高いため、一部のデザインだけを変えたい場合に使えます。

【適用方法】

HTMLのタグ内に直接CSSを書き込みます。今回の場合<p>タグ内にstyle属性を使って指定しています。

HTMLのタグ内に直接CSSを書き込む場合は<body>や<h1>などのセレクターや「{  }」の記述は不要です。

外部スタイルシート

「.css」の拡張子がついたCSSファイルを作成し、それをHTMLファイルに読み込ませる方法で、この方法が最も一般的な方法です。1つのCSSファイルを複数のHTMLファイルに読み込ませられるので、一括管理できます。

修正したい場合も1つのCSSファイルを変更するだけですべてのHTMLファイルに反映できるので大変便利です。

【適用方法】

「外部スタイルシート」の場合はCSSファイルが必要になるので↓↓の記事を確認してください。

この記事で説明している通りに「style.css」があるでしょうか。

index.html

HTMLファイルの<head>内に<link>タグを使ってCSSファイルを指定します。href属性にCSSファイル(今回作った「style.css」)、rel属性に「stylesheet」と指定すれば、「style.css」が適用されます。
style.css

CSSファイル内に、セレクター(HTMLの要素名)で、HTMLの要素を指定します。{ }内に色の指定と文字の大きさの宣言をします。

次回は“Visual Studio Community”を使いCSSファイルの作り方を説明します。