スタイルシート（CSS）

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

　

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

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

　基本例

1)特定要素＝セレクタ (body)の全てに適用
　　headerのみで指定。本文内の指定なし。
ホームページビルダでは
表示　→　スタイルシートマネージャ　→ 　追加　→　文字のレイアウトで　行間を　予約語：％　140 　に指定すると。
head内　
　<style type="text/css">

</style>

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

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

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

2)本文内の各要素ごとに指定
ホームページビルダでは
編集ースタイルの設定ー文字のレイアウト　で設定。下記のコードがheadの下に入る。

<td><a style="line-height : 300%;">

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

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

</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">

</style>

body内

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

この例：　css-rei3.htm

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

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

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

</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">

</style>

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

この例：　css-rei6.htm

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

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

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

1）ホームページビルダー
メモ帳からコピーするとプレビューで表内自動改行されない。ファイル名クリックでは自動改行されてる。
メモ帳でUTF-8形式で保存すればプレビューでも自動改行されるようだ。

HTMLファイル内に記述する場合：
(1)各要素（予約語）ごとに指定
編集　→　スタイルの設定　→　文字のレイアウト
　table の場合、各行のタグ：<td>に指定される。

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

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

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

2）DreamWeaver

・テンプレートの利用

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

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

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

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

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

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

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

ホームページ体験