|
★ スタイルシート・・・CSS >> Cascading Style Sheetの頭文字
★ CSSはレイアウトを定義する規格＝フォントサイズ、余白、行間etc
★ TABLEタグ以外の方法で、枠線＝罫線を表示 １
>> border-width属性
例えば ・・・
未知の苦HTML解道
▼
作例のソース表示
<P>
<SPAN style="border-width : 3px ; border-style : double ;
border-color : #FFCCCC ; padding : 4px" ; >
未知の苦HTML解道 </SPAN>
</P>
▼
■ インラインスタイルシート・・・代替記述
タグ要素にスタイルシートを直接記述することができます。
インラインスタイルシートと呼んでいます。
特定箇所にインラインスタイルシートを適用（代替記述）することにより、スタイルの変更ができます。
■インラインスタイルシートの記述方法
*ブロックレベル要素 または**インラインレベル要素にSTYLE属性とスタイルシートを直接記述します。
▼
▼
TABLEタグ以外の方法でドキュメントを枠＝罫線で囲むときは、スタイルシートで記述します。
テキストの周りに枠＝罫線の表示と幅の指定は、border-width属性を用います。
▼
■テキストの周りに枠＝罫線を表示させるために必要な属性
border-width属性 枠＝罫線のプロパティ指定
数値の単位はpt, px, emなど
border-style属性
一本線、二本線、凸凹線、破線、点線の指定
border-color属性 枠＝罫線の色指定
注：以下、最後尾に至る記事中に出没するNN=ネットスケープ
またはネスケ云々の記述はNNブラウザのサポート終了
（2008年2月）に伴い読み飛ばして下さい。{2015.11.18加筆}
border-width属性を省略するとborder-style属性（ 次ページ参照）を設定しても ネスケでは表示されません。
■枠＝罫線のプロパティ検証・・・border-widthの値
◇例１>> border-widthの値が一つ・・・四辺が共通の枠＝罫線
border-width : 1px ;
border-style : solid ; >> solidは一本罫線
border-color : #FFCCCC ;
▼
border-widthの値が一つの時 四辺共通枠＝罫線
◇ソース表示 上記作例はDIV要素＋STYLE属性
<DIV style="border-width : 1px ; border-style : solid ;
border-color : #FFCCCC ;">
border-widthの値が一つの時 四辺共通枠＝罫線</DIV>
◇例２>> border-widthの値が二つ・・・「上下」「左右」の順に反映
border-width : 1px 3px ;
border-style : solid ; >> solidは一本罫線
border-color : #FFCCCC ;
▼
border-widthの値が二つの時 「上下」「左右」の順に反映
◇ソース表示 上記作例はSPAN要素＋STYLE属性
<SPAN style="border-width : 1px 3px ;
border-style : solid ; border-color : #FFCCCC ; ">
border-widthの値が二つの時 「上下」「左右」の順に反映</SPAN>
◇例３ >> border-widthの値が三つ・・・「上・左右・下」の順に反映
border-width : 2px 1px 5px ;
border-style : solid ; >> solidは一本罫線
border-color : #FFCCCC ;
▼
border-widthの値が三つの時 「上・左右・下」の順に反映
◇ソース表示 上記作例はSPAN要素＋STYLE属性
<SPAN style=" border-width : 2px 1px 5px ;
border-style : solid ; border-color : #FFCCCC ;">
border-widthの値が三つの時 「上・左右・下」の順に反映</SPAN>
◇例４ >> border-widthの値が四つ・・・「上・右・下・左」の順に反映
border-width : 1px 4px 3px 1px ;
border-style : solid ; >> 一本罫線
border-color : #FFCCCC ;
▼
border-widthの値が四つの時 「上・右・下・左」の順に反映
◇ソース表示 上記作例はP要素＋STYLE属性
<P style="border-width : 1px 4px 3px 1px ;
border-style : solid ; border-color : #FFCCCC ;">
border-widthの値が四つの時 「上・右・下・左」の順に反映
</P>
◆応用作例１◆ >> 単位指定がptの場合
テキスト周りを二本罫線の枠に、テキストの背景を枠＝罫線と同系色
border-width : 2pt ;
border-style : double ; >> doubleは二本罫線
border-color : #FF6699 ; 枠＝罫線の色
background-color : #FFCCCC ; 枠＝罫線と同系色の背景
▼
二本罫線 同系色の背景
◇ソース表示 上記作例はP要素＋STYLE属性
<P style="border-width : 2pt ; border-style : double ;
border-color : #FF6699; background-color : #FFCCCC; ">
二本罫線 同系色の背景
</P>
作例のポイント
二本罫線指定の border-style 値 "double"
border-widthの値 "2pt" 以上
ptを指定するとIE・ネスケ共に二本罫線
>> 枠＝罫線のプロパティ検証（詳細）
◆応用作例２◆ 枠＝罫線と枠内テキストの間に余白
クラス名の呼び出し（スタイルファイルの呼び出し）>>CLASS属性
記述制限なし=CLASS属性 < > 1ページに1度だけ可=ID属性
▼
下記作例の枠＝罫線とテキスト間の余白はスタイルシートに余白の設定をする際に付けた任意のクラス名称を呼び出しています。
>> 余白設定値の比較
▼
▼
外部に設定した"余白"のクラス名とそのスタイルシート
.tpics {
margin:7px 10px 10px 20px;line-height:130%;
}
作例のポイント
二本罫線（double）の色
>> border-colorの値 "#FFCCCC"
白背景色 >> background-colorの値 "#FFFFFF"
枠＝罫線とテキスト間に余白 クラス名の呼び出し
◇ソース表示 上記作例はDIV要素＋STYLE属性
<DIV style="border-width : 2pt ; border-style : double ; border-color : #FFCCCC ; background-color : #FFFFFF ;">
<P CLASS="tpics">
二本罫線 白背景 枠＝罫線とテキスト間に余白</P>
</DIV>
|
