/bonvhp/webapp/CSS       [後へ]   [目次へ]   [次へ] ～ [] ～

CSS:記述方法

CSS を HTML に適用する方法です。
3通りあります。

●外部ファイルで定義

スタイルシートを HTML とは別のファイルで作成し、
HTML の <head> 内にインクルードします。

具体例ですが、
.ss_red {color: red}
とだけ書いたファイル sample.css というファイルを用意します。
# 拡張子は何でもいいのですが、
# 一般的に css を使用します。

スタイルを適用したい HTML 中で、

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
    <span class="ss_red">この文字が赤になります。</span>
  </body>
</html>


と書きます。
この HTML と同じディレクトリに sample.css を置けば OK です。

HTML と CSS の置き場所を変える場合は、
href="../css/sample.css"
などとします。
# ../ は、1つ上のディレクトリ、という事です。

sample.css を他の HTML にも同様にインクルードすると、
全体のスタイルを統一する事ができます。
サンプル・プログラムも、同様の仕組みで、
main.css を使っています。

●HTML内の <style>

<head> 内の <style> で記述します。

<html>
  <head>
    <style>
    <!--
      .ss_red {color: red}
    -->
    </style>
  </head>
  <body>
    <span class="ss_red">この文字が赤になります。</span>
  </body>
</html>


この方法は、
HTML をファイル単体で配布する必要がある場合などに
使用すると便利です。

●HTMLのタグ内

HTML の各タグに直接適用します。

<html>
  <head>
    <meta name="Content-Style-Type" content="text/css">
  </head>
  <body>
    <span style="color: red">この文字が赤になります。</span>
  </body>
</html>


style の中身が CSS であることを HTML に知らせるために、
<head> に <meta> の行を入れる事がミソです。

個別にスタイル設定できるのが便利ですが、
管理が面倒になるので、本当にピンポイントで使うようにしましょう。
/bonvhp/webapp/CSS       [後へ]   [目次へ]   [次へ]