目次を表示

Ⅰ.テキストエディタで構築6 (セレクタ)

スタイルの指定は、セレクタを用いて次のように記述します。

セレクタ名{  ←半角中カッコ開始

 ここに
    --- プロパティ:値; ---
の形でスタイルを記述

} ←半角中カッコ閉じる

すると、「セレクタ名」の全てのタグに対して、 記述されたスタイルが適用されます。

「セレクタ名」

・ タグの場合は、タグ名が「セレクタ名」になります。
・ クラスの場合は、.(半角ピリオド)「class 名」が「セレクタ名」になります。
・ IDの場合は、#「id 名」が「セレクタ名」になります。

複合セレクタ

 半角スペースで区切ってセレクタを並べ、 新たなセレクタ(複合セレクタ)が得られます。例えば、
    p .myclass
は、p タグ内にある、クラス名 myclass のタグ
    <p * * * > * * <span class="myclass"> 作用する部分 </span> * * </p>
に作用するセレクタとなります。
(注意) p タグのクラス名が myclass
     <p class="myclass" * * * > * * * </p>
 ではダメ です。

スタイルを複数セレクタに適用する

 スタイル指定の「セレクタ名」部分に複数のセレクタを 半角カンマ「 , 」で区切って並べると、 それらのセレクタで指定されたタグ全部にスタイルが適用されます。

html ファイルの head 部分にスタイルを記述する

 head 部分に style タグとして記述します。

スタイルファイルに記述し、html ファイルから呼び出す

 スタイルファイルを新たに作成し、そこにスタイル指定を記述します。
記述は、スタイル指定を並べて書いていきます。

スタイルファイルの名前と置き場所は?

 ファイル名は半角英数字で自由に付けて構いません。
が、拡張子は css(半角文字)とします。
置き場所は、どこでも構いません。
   html ファイルと同じフォルダでもいいし、
   新たなフォルダを作成し、そこに置いても構いません。
   (フォルダ名は、半角英数字)
(注意) 新たなフォルダを作成する場合、フォルダ名は、 スタイルファイルが置かれていることが分かる名前(例えば、css とか) にするのが良いと思います。

html ファイルからの呼び出し方

 html ファイルの head 部分に、link タグを用いて次の形で記述します。
  <link rel="stylesheet" href= "「スタイルファイルのURL」" type="text/css">
 「スタイルファイルの URL」部分を、リンク先 URL の相対指定に書き換えます。