HPB19 | HPB18 コンテンツ一覧
ホーム > HPB19 > HTML スタイルシートの活用
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

HTML スタイルシートの活用


HTML スタイルシートの活用



文字の大きさや色等見栄えに関する設定記述をまとめたものをスタイルシート( style sheet )と言います

CSSファイルを指してスタイルシートと言うこともあるのですが、ヘッダー部に書いても、外部ファイルに切り出しても、その機能が変わるわけではありません

このページでは、スタイルシートの一般的な記述の仕方、ルールについて説明しています
個別の目的に応じた記述の仕方につきましては、「次のページ」以降をご参照下さい


本サイトでは、CSSファイルに切り出した場合、スタイルシートとして区別しています

(参照) 「  スタイルシート( CSS )とは 」





スタイルシートの記述例



例えば、以下のように記述します

<style type="text/css">
<!--
スタイルシート記述の開始を宣言します
/* これはコメントです */ コメントです
body{ ボディ部(ページ本体)に対する設定
  line-height : 170%;
}
行間を確保するため、文字列の高さを通常の170%に拡大する
h1{ <h1>タグ、見出し1タグに対する設定
  font-size : 100%; デフォルトだとデカ文字になって見苦しいので、文字の大きさを通常と同じに設定
  color : #ff0000; 赤文字にする
  background-color : #ffffff;
}
文字の背景色を白にする
-->
</style>
スタイルシート記述の終了を宣言します

body 」の部分を セレクタ、「 line-height 」の部分を プロパティ (属性)、「 170% 」の部分を 値 (属性値)と言います
プロパティ・値を複数指定したいときは、「 ; 」(セミコロン)で区切って指定します
コメントは、前後を、「 /* 」と「 */ 」で挟んで記述します

それぞれのタグに対する設定の仕方の説明は、後続ページ(次のページ)のそれぞれのトピックをご参照下さい




スタイルシート内コメントの書き方



スタイルシート内では、「 /* 」 と 「 */ 」 で囲んだ範囲がコメントになります

記述例
/* これはコメントです */




<id 宣言> 「 id 」 「 # 」 の使用方法



セレクタには、タグ文字の代わりに、任意の「 #半角英数字 」を指定することもできます
これを id宣言と言います

ヘッダー部、スタイルシート内の宣言 #line170{
  line-height : 170%;
}
ボディ部、「 id 」使用箇所の記述 <p id="line170">
  ~文字列等~
</p>

ヘッダー部で、タグに属性を付けてしまうと、ページ内全てに適用されてしまいます
任意の一部分にだけ適用させたい時に使用します




<クラス宣言> 「 class 」 「 . 」 の使用方法



セレクタには、任意の「 .半角英数字 」(半角英数字の前に半角ピリオドを付けています).を指定することもできます
これをクラス宣言と言います

ヘッダー部、スタイルシート内の宣言 .line170{
  line-height : 170%;
}
ボディ部、「 . 」(クラス)使用箇所の記述 <p class="line170">
  ~文字列等~
</p>

使用方法・目的は、「 id 」宣言と同じです
任意の一部分にだけ属性指定を適用させたい時に使用します




各指定方法の優先度



優先度 指定部 指定方法
高い
 ↑
 ↓
低い
ボディ部 style 属性
ヘッダー部 id 指定
class 指定
タグ 指定

同じ優先度の指定が複数ある場合は、後から定義されたものが優先されます


「 !important 」ルール


半角スペースで区切って、「 !important 」を追記すると、その指定が優先されます

例えば、下記のように、値の後ろ、それぞれに追記します

h1{
  font-size : 100% !important;
  color : #ff0000 !important;
  background-color : #ffffff !important;
}




擬似要素と擬似クラス



擬似要素( pseudo-elements )とは、要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加する為のもので、「 :before 」 擬似要素と 「 :after 」 擬似要素を使用すると、対象となる要素の前または後に、content プロパティで指定した内容が表示されます

content プロパティには、テキスト文字、及び、URL指定で、画像も表示できます

記述例 <head>部 p#id_p1:before{
  content: "【 表題 】"
  "  ";
  font-size:80%;
}
p#id_p1:after{
  content: "  "
  url("img/HP_Triangle_TR12pxc008080.gif");
}
<body>部 <p id="id_p1">擬似要素表示例</p>
表示例 <body>部

擬似要素表示例




擬似クラス( pseudo-classes )とは、要素が特定の状態にある場合にスタイルを指定する為のもので、下記では、「 :last-child 」 が相当します

擬似要素、擬似クラス、ともに、セレクタとなる要素名のあとにコロン(:)をつけて、擬似要素 擬似クラス名を記述します

擬似要素と擬似クラスを使用したパンくずリスト( breadcrumb navigation / トピックパス topic path )の作成例


<ol>タグ使用例
記述 <head>部
#bread ol li{
  display: inline;
  list-style-type: none;
}
#bread ol li:after{
  content:" > ";
}
#bread ol li:last-child:after{
  content: none;
}
<body>部
<td style="line-height : 130%;padding : 10px 6px;" nowrap align="left" colspan="3" id="bread">
  <ol>
    <li><a href="../index.html">ネットで稼ぐ方法 教えます(TOP)</a>
    <li><a href="../seo/SEO_000000.html">SEO対策</a>
    <li><a href="../seo/SEO_105000.html">ナビゲーションをわかりやすくしよう </a>
  </ol>
</td>
表示 <body>部
  1. ホーム
  2. SEO対策
  3. ナビゲーションをわかりやすくしよう

<ul>タグ使用例
記述 <head>部
#bread ul li{
  display: inline;
  list-style-type: none;
}
#bread ul li:after{
  content:" > ";
}
#bread ul li:last-child:after{
  content: none;
}
<body>部
<td style="line-height : 130%;padding : 10px 6px;" nowrap align="left" colspan="3" id="bread">
  <ul>
    <li><a href="../index.html">ネットで稼ぐ方法 教えます(TOP)</a>
    <li><a href="../seo/SEO_000000.html">SEO対策</a>
    <li><a href="../seo/SEO_105000.html">ナビゲーションをわかりやすくしよう </a>
  </ul>
</td>
表示 <body>部

目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > HPB19 > HTML スタイルシートの活用
   

© 2014 abhp.net All Rights Reserved.
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP