|
★ スタイルシート・・・CSS >> Cascading Style Sheetの頭文字
★ CSSはレイアウトを定義する規格＝フォントサイズ、余白、行間etc
★ テキストとボックス要素（枠線など）内の間隔 >> padding属性
■ テキス周りに領域の指定 pt指定の場合
テキストにpaddingを指定することにより形成される"領域"の作例です。
padding属性の値＝表示領域を青系の背景色にしております。
▼paddingの初期値＝０ （0pt＝空間なし >> 値不要
♪もしもし亀よ亀さんよ、世界の内でおまえほど♪
▼ "padding:10pt" （上下左右共通10pt） >> 値1
♪もしもし亀よ亀さんよ、世界の内でおまえほど♪
▼ "padding:20pt" （上下左右共通20pt） >> 値1
♪もしもし亀よ亀さんよ、世界の内でおまえほど♪
▼ "padding:5pt,30pt" （上下5pt 左右30pt） >> 値2
♪もしもし亀よ亀さんよ、世界の内でおまえほど♪
注：以下、最後尾に至る記事中に出没するNN=ネットスケープ
またはネスケ云々の記述はNNブラウザのサポート終了
（2008年2月）に伴い読み飛ばして下さい。{2015.11.18加筆}
▼
■ネスケ対策：
直上の作例の場合、IEは上下、左右の領域指定が反映されますが、ネスケの場合は四辺の領域を指定しなければなりません。
"padding-top : 5pt ; padding-bottom : 5pt ;
padding-left : 30pt ; padding-right : 30pt ;"
四辺の値を全て指定することにより、IE・ネスケ共に"上下5pt 左右30pt"になります。以下、同様にネスケ対策施行
▼
▼ ・・・"padding:15pt,50pt" （上下15pt 左右50pt） >> 値2
♪もしもし亀よ亀さんよ、世界の内でおまえほど♪
▼ ・・・"padding:5pt,20pt,20pt"
（上5pt 左右20pt 下20pt） >> 値3
♪もしもし亀よ亀さんよ、世界の内でおまえほど♪
▼ ・・・"padding:10pt,0pt,0pt,100pt"
（上10pt 右0pt 下0pt 左100pt） >> 値4
♪もしもし亀よ亀さんよ、世界の内でおまえほど♪
▼
サイトページが増えたときなど、レイアウトに関する設定（文字間隔、行間隔など）は同じ記述を繰り返すことになると思います。
反復する記述を一度スタイルシートに設定しておけば、その設定を呼び出すことで新規HTML文書の"BODY"全体に反映させることができます。
また、部分的に"表示領域"を変えたいときなども同様にスタイルシートに設定し、そのCLASS属性を呼び出すことで記述の手間が軽減できます。
タグ要素にスタイルの属性と値をインラインスタイルで直接埋め込んだスタイルシ−トの記述をまとめると次のようになります。
要素名と属性の間に半角スペース必須
|←←←←←←←←←← 要 素 →→→→→→→→→→→|
↓親要素 ・・・例えばspan ↓要素内容
<SPAN STYLE="padding : 属性値 ;">未知の苦HTML</SPAN>
|←←←←属 性→→→→→|
|←←← 値→→→→|
▼
■padding属性の"値"の単位
>> mm,cm,pt,px など、または％
padding属性は表示領域や表示可能な領域を指定する属性です。
テーブルレイアウトのcellpaddingは、テーブルの枠とそのセル内容（テキスト）との間隔の指定ですが、テーブル以外はpadding属性により、テキストとボックス要素間の間隔を指定します。
■padding属性の値
IEの場合
padding属性の値が一つなら"四辺共通"の領域指定、
値が二つなら"上下、左右"が共通の領域指定、
値が三つなら"上、左右、下"の領域指定、
値が四つなら"上下左右それぞれ個々の領域指定"になります。
ネスケの場合
"四辺共通"以外の領域指定は、
上 （padding-top）、
下 （padding-bottom）、
左 （padding-left）、
右 （padding-right）
・・・四辺全ての"属性と値"を指定します。
例えば、上下20pt 左右10ptの指定はIEの場合、値の指定は二つで済みますが、ネスケ対策を施す（上20pt、下20pt、左10pt、右10ptの指定）ことにより双方のブラウザは同じ表示になります。
▼
♪もしもし亀よ亀さんよ、世界の内でおまえほど♪
▼
IE、ネスケ >> インラインスタイルの記述は次のようになります。
■ソース表示・・・IEの場合
<P STYLE="padding : 20pt,10pt">
♪もしもし亀よ亀さんよ、世界の内でおまえほど♪
</P>
■ソース表示・・・ネスケ対策の場合
<P STYLE=
"padding-top : 20pt ; padding-bottom : 20pt ;
padding-left : 10pt ; padding-right : 10pt ;">
♪もしもし亀よ亀さんよ、世界の内でおまえほど♪
</P>
|
