目次を表示

Ⅹ.テキストエディタで構築5(スタイル)

 html のスタイルは、CSS(Cascading Style Sheet)とよばれ、W3C の仕様です。 W3C には、「文書構造と体裁を分離させる」なる理念があり、
文書構造を html により、体裁をスタイル(CSS)により実現しようとしています。
ですから、スタイルは、html のタグなどとは異なる規則に従って記述する ことになります。
 スタイルのそれぞれの指定は、プロパティその値の組により、
   「プロパティ」:(←コロン)「値」;(←セミコロン)
で記述されます。(例えば、既述の background-color:blue; のように)
 プロパティは、タグ同様たくさんあります。全てを覚える必要はないと思います。 よく使うものは覚え、必要なものはノートか何かに纏めておき、それ以外は、例えば、
「HTML クイックリファレンス」
を参考にするとか。

(私が)よく使うプロパティというかこれ以外は知らないというか

ここでは、タグの style 属性を用いて説明します。 スタイルの設定には、他に、
   style タグを用いる方法 と スタイルファイルを用いる方法
があります。(W3C は、スタイルファイルを用いることを推奨しています。)

background-color と color

 background-color は背景色を、color は文字色を、指定するプロパティです。
その値は、rgb 値かカラーネームで指定します。

border

 枠の形状、太さ、色(値が3つ、半角スペースで区切る、順不同、省略も可) を指定するプロパティです。

width と height

 width は幅を、height は高さを、指定するプロパティです。
その値は、数値(px 等)か %(パーセント)で指定します。

margin と padding

 margin は外側のスペース確保、padding は内側のスペース確保に使用します。 値を1つ指定した場合、上下左右に指定量スペースが確保されます。
それぞれのスペース量を指定する場合は、上から時計回りにスペース量を記述します。
 それぞれを、個々に指定するプロパティもあります。
   margin-top(padding-top)・・・上、
   margin-right(padding-right)・・・右、
   margin-bottom(padding-bottom)・・・下、
   margin-left(padding-left)・・・左

line-height

 行間幅を設定します。値として数値をとります。(デフォルトは値 1)
例を下の水平線間に表示



text-align

 text-align は、文字列の行揃えの位置指定等に使います。

スタイルの記述場所

 スタイルの記述場所は、
・1.スタイルを適用したいタグに、style 属性として記述する。
・2.html ファイルの、head 部分に、style タグ内容として記述する。
・3.スタイルファイルに記述し、html ファイルに読み込む。
の3通りがあります。ひとつの html ファイルで、 これ等の記述場所を混在させても構いません。

スタイルの記述方法

1の「タグに style 属性として記述する」方法は、プロパティでの説明通りです。

2 と 3 のスタイルはどのタグに適用されるか?

2 と 3 では、「これこれ(これ等)のタグに、以下のプロパティを適用する」 というタグを指定する形で記述します。指定は、
   タグ名、タグの class 属性、タグの id 属性
等(他にもたくさんあります)を使い、セレクタで行われます。
(セレクタについては、次のページで説明します。)

class 属性と id 属性

 class 属性は、複数のタグを特定するときに使います。記法は、
   <「タグ名」 class="「class 名」" ・・・(他の属性)・・・ >
となります。「class 名」は、半角英数字の文字列です。
同じ class 名を複数付けても構いません
 id 属性は、一つのタグを特定するときに使います。記法は、
   <「タグ名」 id="「id 名」" ・・・(他の属性)・・・ >
となります。「id 名」は、半角英数字の文字列です。
一つのページ内で、同じ id 名を複数付けることはできません