|
★ スタイルシート・・・CSS >> Cascading Style Sheetの頭文字
★ CSSはレイアウトを定義する規格＝フォントサイズ、余白、行間etc
★ TABLEタグ以外の方法で、枠線＝罫線を表示 ２
>> border-style属性
例えば ・・・
未知の苦HTML解道
▼
作例のソース表示
<P>
<SPAN style="border-style: dotted solid ;
border-width : 4px ; border-color : #FFCCCC ;
padding : 4px ; ">
未知の苦HTML解道 </SPAN>
</P>
▼
■ インラインスタイルシート
タグ要素にスタイルシートを直接記述することができます。
インラインスタイルシートと呼んでいます。
特定箇所にインラインスタイルシートを適用（代替記述）することにより、スタイルの変更ができます。
■インラインスタイルシートの記述方法
*ブロックレベル要素 または**インラインレベル要素にSTYLE属性とスタイルシートを直接記述します。
▼
▼
TABLEタグ以外の方法でドキュメントを枠＝罫線で囲むときは、スタイルシートで記述します。
枠線＝罫線スタイル（線種）の指定はborder-style属性を用います。
▼
■枠＝罫線を表示させるために必要な属性
border-style属性
一本線、二本線、凸凹線、破線、点線の指定
border-width属性 枠＝罫線のプロパティ指定
数値の単位はpt, px, emなど
border-color属性 枠＝罫線の色指定
注：以下、最後尾に至る記事中に出没するNN=ネットスケープ
またはネスケ云々の記述はNNブラウザのサポート終了
（2008年2月）に伴い読み飛ばして下さい。{2015.11.18加筆}
border-style属性はborder-width属性（ 前ページ参照）がなければ、 ネスケでは表示されません。 ▼
◆枠＝罫線のプロパティ検証 A
2pxの場合 （SPAN要素 P要素 DIV要素の比較）
border-style属性の値 double（二本罫線）
border-width属性の値 2px
◇例1-1SPAN要素
SPAN要素 border-width 2px の場合
◇例1-2P要素
P要素 border-width 2px の場合 ネスケ＝下線は細罫線 IEは四辺全て2pxの罫線。ネスケは下線のみ細罫線に化ける・・・但し
P要素 border-width 2px の場合
・・・ネスケは、改行が伴うと解消？（摩訶？）
◇例1-3DIV要素
DIV要素 border-width 2px ネスケ＝下線は細罫線 IEは四辺全て2pxの罫線。ネスケは下線のみ細罫線に化ける・・・但し
DIV要素 border-width 2px の場合
・・・ネスケは、改行が伴うと解消？（摩訶？） ▼
■ソース表示（SPAN要素の場合）
<SPAN style="border-style: double; border-color:#FFCCCC ;
border-width:2px;letter-spacing:2px;">
SPAN要素 border-width 2px の場合</SPAN>
◆枠＝罫線のプロパティ検証 B
2ptの場合 （SPAN要素 P要素 DIV要素の比較）
border-style属性の値 double（二本罫線）
border-width属性の値 2pt
◇例2-1SPAN要素
SPAN要素 border-width 2pt の場合 ネスケ＝NG
ネスケは右罫線と下罫線が重なり合う >> 解消策
◇例2-2P要素
◇例2-3DIV要素
DIV要素 border-width 2pt の場合 ▼
■ソース表示（P要素の場合）
<P style="border-style : double ; border-color : #FFCCCC ;
border-width : 2pt ;"> border-width : 2pt ; の場合</P>
▼
■ IEとネスケの違い
★ SPAN要素と border-width属性の値が pt の場合
SPAN要素と border-width の単位が pt の場合 IE は、二本罫線で表示されますが、
ネスケでは、
top と left が二本罫線、right と bottom が一本罫線になります。
ネスケ対策として border-width : 2pt ; を
border-bottom-width : 2pt ;
にすることで四辺が全て二本罫線になります。
（ネスケ対策により IE は、bottom を除く外側三辺の罫線が太くります。）
ネスケ＝四辺全て二本罫線
▼
SPAN要素 border-bottom-width 2pt >> ネスケ対策
■ソース表示
<SPAN style="border-style : double ; border-color : #FFCCCC ; border-bottom-width : 2pt ;">
border-bottom-width : 2pt ; >> ネスケ対策</SPAN>
◆枠＝罫線のプロパティ検証 C
3pxの場合 （SPAN要素 P要素 DIV要素の比較）
border-style属性の値 double（二本罫線）
border-width属性の値 3px
◇例3-1SPAN要素
border-width 3px の場合
◇例3-2P要素
border-width 3px の場合 ネスケ=下が一本罫線 IEは四辺全て3pxの罫線、ネスケは下線のみ細罫線に化ける
border-width 3px の場合
・・・ネスケは、改行が伴うと解消？（摩訶？）
◇例3-3DIV要素
border-width 3px の場合 ネスケ=下が一本罫線 IEは四辺全て3pxの罫線、ネスケは下線のみ細罫線に化ける
border-width 3px の場合
・・・ネスケは、改行が伴うと解消？（摩訶？） ▼
◆解消策 ネスケ対策その２
P要素、DIV要素の場合・・・下記作例はP要素
◇例4P要素
border-style : double （二本罫線）
border-width :3px 3px 3.5px 3px ;・・・時計回り（上・右・下・左）に値を指定
border-width 3px を時計回りに４値指定 ☆★ または ☆★
border-width :3px ; ＋ border-bottom-width : 3.5px を指定
border-width 3px と border-bottom-width 3.5px ▼
■ソース表示
<P style="border-style : double ; border-color : #FFCCCC ;
border-width : 3px 3px 3.5px 3px ;">
border-width 3px を時計回りに４値指定</P>
☆★ または ☆★
<P style="border-style : double ; border-color : #FFCCCC ;
border-width : 3px border-bottom-width : 3.5px ;">
border-width 3px と border-bottom-width 3.5px </P>
◆bordre-style値の比較
・・・作例：クラス名（スタイルファイル）の呼び出し >> CLASS属性
HTMLファイルはスタイルシートにより見栄えやレイアウトをページ全体に反映させることができますが、部分的に変えたいときなどは予め、その内容をスタイルシートにまとめ、CLASS属性やID属性により設定を呼び出します。
ID属性詳細 >> All Aboutサマ〜 スタイルシートの class と id の使い分け
次表の作例"枠＝罫線の種類"は、予め
一本線（実線） 二本線、凸凹線、破線、点線等々
の線種の設定をスタイルシートにまとめ、そのスタイルファイルのCLASS属性を呼び出しています。
外部に設定した枠＝罫線のCLASS属性の名称・・・クラス名は
"bs1"〜"bs11"です。
クラス名称"bs1"〜"bs11"中から bs1 と bs10 のスタイルファイルは次のとおりです。
▼
.bs1 { border-style : solid ; border-color : #CCCC99 ; }
.bs10 { border-style : dashed solid dotted ; border-color : #CCCC99 ; }
▼
クラス名称bs1指定の例 >> 未知の苦HTML解道
■ソース表示・・・SPAN要素で挟んでいます
<SPAN CLASS="bs1">未知の苦HTML解道</SPAN>
クラス名称bs10指定の例 >> 未知の苦HTML解道
■ソース表示・・・SPAN要素で挟んでいます
<SPAN CLASS="bs10">未知の苦HTML解道</SPAN>
▼
枠＝罫線の種類
| border-style値 | 実 例 |
|---|
| solid 一本線 | bs1の値 solid |
| double 二本線 | bs2の値 double |
| groove 凹線 | bs3の値 groove |
| rigde 凸線 | bs4の値 rigde |
| inset 二辺凹線 | bs5の値 inset |
| outset 二辺凸線 | bs6の値 outset |
| dashed 破線 | bs7の値 dashed |
| dotted 点線 | bs8の値 dotted |
◆border-style値の組合せ例
▼値=一つ 四辺共通 (例：solid）
bs1の値は一つ solidのみ 四辺すべて共通
▼値=二つ 上下、左右の順に反映
(例：solid double）
bs9の値は二つ 上下（solid） > 左右（double）に反映
▼値=三つ 上、左右、下の順に反映
(例：dashed solid dotted）
bs10の値は三つ dashed > solid > dotted の順に反映
▼値=四つ 時計回りの順に反映
{例：上（dotted） 右（solid） 下（dashed） 左（double）}
bs11の値は四つ 時計回りの順に反映
|
|
