スタイルシート(CSS)による拡張HTML  (安倍 08/5/17)  

 

CSS(スタイルシート)とは、HTMLによる記述のみではWebページの表現には限界があるので、より見栄えのよいWebページを作る必要性から生まれた言語仕様である。
CSSでは、レイアウトに関する記述が HTML から分離されている。  複数の HTML から1つの CSS を参照することで、サイトのデザインを統一することが可能になる。
CSS ではフォント、色と背景、テキスト、ボックスなどの属性を指定することができる。  タグやヘッダに記述することもできるが、表現形態の定義を HTML から独立させたファイルで管理することもできる。

ホームページビルダーや、DreamWeaverなどの最近のホームページ作成ソフトでは、HTML中心からCSSを使う手法に移りつつある。
いずれも、HTMLページ内に CSS を記述することもできるし、別ファイルに記述することもできる。
このページ文章はCSSを使って、行間隔を通常の140%に広げてある。


 基本例

・特定要素=セレクタ (body)の全てに適用
  headerのみで指定。本文内の指定なし。

head内 
 <style type="text/css">
<!--
 body {
  line-height: 140%;
     }
-->
</style>

 body内
 <body>なんたら</body>

この例:gyookan2.htm
注意: body / div は本文に table がある場合、その内部には適用されない場合がある。その場合body / div でなく table で指定。

特定要素として「table」、「div」に適用した例


・クラス名(aaa)が付けられた特定要素(p)に適用 
   header、本文、両者で指定。

head内
<style type="text/css">
<!--
.aaa{color: red;}

-->
</style>
body内
<p class="aaa">なんたら</p>

この例: css-rei1.htm
http://www.tagindex.com/stylesheet/basic/format2.html


・特定ブロック(id)内のいろいろな要素に適用
  header指定なし。本文で指定。

 head内
<style type="text/css">
</style>

body内
<div style="border-style: double; border-color: blue ">
 <h3>なんたら</h3>
 <p>本日は晴天なり。あすはどうかな</p>
 <h3>かんたら</h3>
 <h2>いろいろ</h2>
 <p>本日は曇天なり。あさってはどうがろか</p>
 <h3>おわり</h3>
</div>

この例: css-rei2.htm

・特定ブロック(id)内のいろいろな要素に適用
  header、本文、両者で指定。

段落aaaa内を色#ccccccにする例: ブロック要素 id を使う。
http://goo.gl/IBDtlB

head内
<style type="text/css">
<!--
#aaaa {
color: red;
}
-->
</style>

body内

<p id="aaaa">
本日は晴天なり
</p>

この例: css-rei3.htm

http://hp-sozai.net/m-style/style05.html


・要素や場所によって適用
  header、本文、両者で指定

head内 
 <style type="text/css">
<!--
 h1.aaa {
  color: blue;
  text-align: center;
   }
 h2.bbb {
  color: red;
   }
-->
</style>

body内
 <h1 class="aaa"> なんたら </h1>
 <h2 class="bbb"> なんたら </h2>

この例: css-rei5.htm

classの代わりに id も使える。
http://hp-sozai.net/m-style/style05.html


・文章の特定範囲に適用 インライン要素 span を使う。インライン要素とは、文章の一部として扱われる要素。
  header、本文、両者で指定


head内

<style type="text/css">
<!--
.gyokan140 {
line-height: 140%;
}
-->
</style>

body内
<span class="gyokan140"> なんたら<br> かんたら</span>

この例: css-rei6.htm

http://css.uka-p.com/basic/header.html


ネットでの スタイルシート解説
CSS3


 ホームページ作成ソフト CSSの設定

1)ホームページビルダー

HTMLファイル内に記述する場合:
表示 → スタイルシートマネージャ  でスタイルシートの編集に入ることができる。
例:ページ文章の行間を140%に指定する場合 (上の例で「・特定要素全てに適用」に相当)
表示 → スタイルシートマネージャ →  追加 → 文字のレイアウトで 行間を 予約語:% 140  に指定。
その例:gyookan2.htm

注意: ページのプロパティ:body / div は本文に table がある場合、その内部には適用されない。その場合、
  HPBuilder のCSS編集ではページプロパティに table がないので コード編集でbody / div → table に変更する。
HPBuilderでの  「どこでも配置モード」 や、 「スタイリッシュイフェクト」 も CSS機能を応用したものです。
スタイリッシュイフェクトで多用する「レイアウト枠」は <div>即ち、一般には「ボックス」と云われるCSSの要素です。

外部スタイルシート(*.CSS)を使う場合:同梱ソフトの「CSSエディタ」を使う。 (Ver11より)

2)DreamWeaver

テンプレートの利用

・HTMLファイル内に記述する場合:
Ver.CS3: 標準編集モードの、プロパティ窓でCSS設定ができる。
Ver.MX:  テキスト → CSSスタイル  でCSSが設定できる。 

 外部CSS(***.CSS)を使う場合

・本体
<head> </head> 内に

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

 本文指定箇所に
  <div class="height180">
     〜
 </div>

・bbb.css 例(全文) 余計な冒頭宣言不要

@charset "utf-8";   
.height180 {         
line-height: 300%;
}

・冒頭宣言に @ が必要
・クラス名の 頭に「.」ドットが必要(本体には不要)
・語句や行間に「全角空白」があるとダメ


ホームページ体験

 

 

 

 

 

 

inserted by FC2 system