スタイルシート

  1. スタイルシート

    1. スタイルシートとは

      1. 設定機能
        スタイルシートは文字表示に関する詳細な設定を行うことができます。設定機能は、フォント、文字の色・背景、文字間・行間、境界線、表示位置、など、多くの項目が含まれます。

      2. 設定方法
        ヘダ部分で指定した場合ファイル全体や、指定タグ内、が有効範囲です。また、設定範囲がファイル全体の場合、適用するタグは指定したタグすべて、クラスまたはIDが指定されたタグのみ、指定した範囲、などが可能です。

      3. 設定形式
        特定のタグに対する設定は以下のように行います。STYLE 以下の設定がスタイル設定になります。最初のcolor:が設定項目のキーワード、:　の次が設定値になります。複数の項目を設定する場合は、;　で区切ります。

        　<H2 STYLE="color:white; background-color: #0044ff;padding: 4px 8px;" >
         スタイルシートは指定した範囲に対し、<BR>
         背景色や文字色を指定できます。
         </DIV>

        この例では、H2タグに対し、その色を white に,背景色を #0044ff とすること、上下の空きを4画素、左右の空きを８画素、と指定します。このように表示されます。

        　設定項目のキーワードは100近くありますので、ここでは一部のみ紹介します。たとえば、以下のURLに詳細があります。

        　　　http://www.tohoho-web.com/www.htm

  2. 設定方式

    1. タグに指定

      ファイル内のすべての指定したタグにスタイルを設定するには、HEAD部に次のような<style>タグを記述します。例ではH3タグに対するスタイルを設定しています。
      <HEAD>
  <STYLE>
  <!--
   H3 {color:red;...}
  -->
  </STYLE>
</HEAD>
      この指定があると、ファイル内のすべてのH3タグに、指定したスタイルが設定されます。

    2. クラスタグ

      　すべてのタグでなく特定のタグのみにスタイルを適用したい場合は、クラスを指定します。クラス名は　.cred　のように先頭に　.　をつけます。このクラス名を<STYLE>タグの中でタグ名の代わりに指定します。指定したクラスを特定のタグに適用するには
      　<DIV CLASS= cred>
      のように、タグの属性にCLASSキーワードを利用します。
      　

    3. IDを指定する

      適用するタグを限定する他の方法としてIDを用いる方法があります。定義する場合、 #ID名 で使用する　ID を指定します。 #ID名 タグ名 で、タグに対するスタイルを指定できます。
      利用する場合は、<div id="ID名"> のように、使用する　ID を指定します。

    4. 外部設定ファイルを利用する

      複数のファイルでスタイルを共用したい場合、スタイル定義を独立したファイルに保存し、それを<head>部で利用する方法があります。スタイルを設定したファイルの拡張子は通常　.css　とします。設定方法は、<STYLE>タグの内部と同じです。利用するには、次の LINK タグを利用します。LINK は REL で指定した属性をもつ、HREFで指定したファイルを参照します。

      　<LINK REL="stylesheet" TYPE="text/css" HREF="ex.css" >

      外部ファイルには、<style> と </style> タグは不要です。

      例親フォルダのスタイルを共通利用する
      　pre.css にスタイルを設定します。このファイルを二段階親のフォルダに保存し、これを子供が共通利用する場合、<header>部で次のように引用します。
      　<LINK rel="stylesheet" href="../../pre.css" type="text/css">