スタイルシートをHTML文書で適用するには、次の方法があります。(3)、(2)、(1)の番号は、スタイルシートが適用される優先順位です。 よりタグに近い場所のスタイルシートが優先されます。(「!important」をつけると最優先になります)

外部ファイルで呼び出す(3)

HTML文書の<head>~</head>の間に、<link>タグを書いて呼び出します。

HTML tag

<link rel="stylesheet" href="***.css" type="text/css">

***の部分にスタイルシートファイルのファイル名(URL)を書きます。スタイルシートファイルの拡張子はcssです。

文字の色をピンクに変えてみます。まず、メモ帳などに以下の文章を書きます。

CSS source

p {
  color: #ff00ff;
}

<p>~</p>に挟まれた文字をピンク色に変えるという意味です。書いたら、適当なファイル名を付け拡張子をcssにして保存します。ここではpink.cssとします。

次に、同じくメモ帳などに下の文章を書き、pink.htmlで保存します。

HTML source

<html>
  <head>
   <title></title>
   <link rel="stylesheet" href="pink.css" type="text/css">
  </head>
  <body>
    <p>ピンク色に変わります。</p>
  </body>
</html>

pink.cssをHTMLファイルと同じディレクトリに置いたならば、***のところはpinkのみになります。もしも、一つ上の階層に置いたら、../pinkとなります。 リンクを貼る時の要領と同じです。

HTML文書イメージ
pink.html(HTMLファイル)

CSS文書イメージ
pink.css(CSSファイル)

pink.htmlをダブルクリックしてブラウザで見るとこんな感じになります。

display (inline frame)

HTML文書内にまとめて指定(2)

HTML文書の<head>~</head>の間に、<style>タグで指定します。(3)と同じく文字をピンク色にします。

(3)と同じくメモ帳などに下の文章を書き、pink2.htmlで保存します。

HTML source

<html>
  <head>
   <title></title>
   <style type="text/css">
   <!--
   p {
   color: #ff00ff;
   }
   -->
   </style>
  </head>
  <body>
    <p>ピンク色に変わります。</p>
  </body>
</html>

HTML文書イメージ
pink2.html(HTMLファイル)

<!--と-->は、スタイルシートに対応していない古いブラウザ用です。コメントアウトしてソースが表示されるのを防ぎます。

display (inline frame)

pink2.htmlをダブルクリックしてブラウザで見るとこんな感じになります。

style属性でタグに直接指定(1)

HTML文書の<p>タグに、style属性で指定します。上記と同じく文字をピンク色にします。

メモ帳などに下の文章を書き、pink3.htmlで保存します。

HTML source

<html>
  <head>
   <title></title>
  </head>
  <body>
    <p style="color: #ff00ff;">ピンク色に変わります。</p>
  </body>
</html>

HTML文書イメージ
pink3.html(HTMLファイル)

display (inline frame)

pink3.htmlをダブルクリックしてブラウザで見るとこんな感じになります。

★「!important」をつけると最優先

「!important」というキーワードをつけるとその値は最優先となります。

HTML source

<html>
  <head>
   <title></title>
   <style type="text/css">
   <!--
   p {
   color: blue !important;
   }
   -->
   </style>
  </head>
  <body>
    <p style="color: pink;">ピンク色になりません。</p>
  </body>
</html>

display (inline frame)

ブラウザで見ると文字がblueになっています。

上に戻る