|
★ スタイルシート・・・CSS >> Cascading Style Sheetの頭文字
★ CSSはレイアウトを定義する規格＝フォントサイズ、余白、行間etc
★ HTMLの軽量化＝スタイルシートに設定
更にソースもできるだけ簡略化
◇---本題に入る前に前置きです。
HTML仕様の標準化を提唱しているW3Cという団体があります。
▼
■W3CのHTML定義 【DTD HTML 4.01】
テキストなどの論理的な設定はHTMLに記述し、レイアウト（文字サイズ、文字の装飾）や余白・行間などの見栄えに関する物理的な設定は、スタイルシート（正式にはカスケーティングスタイルシート、通称CSS）の設定を推奨しています。
▼
■DTD HTML 4.01非推奨要素群（abc順）
<basefont> <center> <font> <s> <strike>
<u>・・・など
■DTD HTML 4.01非推奨属性群（abc順）
<align> <border> <bgcolor> <background> <clear> <color> <face>
<height> <nowrap> <size> <text> <width> ・・・など
■DTD HTML 4.01非推奨属性の例外利用
（要素別属性指定の可否）
TABLE要素にborder属性を指定できますが、TABLE要素以外での指定は非推奨扱いです。
TABLE要素内の<tr> <th> <td>にheight属性とwidth属性の指定は非推奨扱いです。
TABLE要素にalign属性の指定は、非推奨ですが、
TABLE要素内の<tr> <th> <td> <col>にalign属性の指定は、例外として使用できます。
▼
スタイルシートの基本文型は、次のような構成になっています。
- スタイルシートの基本文型 -
▼
例えばテキストの周りを枠＝罫線で囲む
>> 選択部の名称を仮にwakusenとしたスタイルシートの設定
.wakusen {
border-width : 3pt ;
border-style : double ;
border-color : #FFCCCC ;
padding : 4px ;
}
▼
外部スタイルシート設定クラス属性 .wakusen の呼び出し例
テキストの回りを枠線で囲む
▼
★ インラインスタイルシート
スタイルシートの設定を、HTML文書内に、直接記述することができます。
インラインスタイルシートと呼ばれ、スタイルシートの括弧 { } 内の文型を、HTML文書のタグ要素に、スタイルシートを指定するSTYLE属性を使い、直接記述します。
スタイルシートの文型を、タグ要素に記述する際は、タグ要素に追加するHTMLタグの属性値と同様に、二重引用符" "で括ります。
未知の苦HTML解道 >> 未知の苦HTML解道
▼
<SPAN style="border-width : 3pt ; border-style : double ; border-color : #FFCCCC ;padding : 4px ; ">
未知の苦HTML解道</SPAN>
★ スタイルシートの簡略化
作例における、スタイルシートの設定を、一部簡略化して記述することができます。
枠＝罫線に関する箇所
"border-width : 3pt ; border-style : double ; border-color : #FFCCCC ;"を
"border: 3pt double #FFCCCC ;" と簡略化も可能です。
簡略化しても >> 未知の苦HTML解道 >> 同じ結果です。
▼
<SPAN style="border: 3pt double #FFCCCC ;
padding : 4px ; ">未知の苦HTML解道</SPAN>
注：以下、最後尾に至る記事中に出没するNN=ネットスケープ
またはネスケ云々の記述はNNブラウザのサポート終了
（2008年2月）に伴い読み飛ばして下さい。{2015.11.18加筆}
但し、枠＝罫線のサイズ指定の単位（pt指定とpx指定）により、IEとネスケでは、枠＝罫線の表示が多少異なります。
作例の場合、3pt指定ですが、困ったことに、IEとネスケでは、次のような違いが発生しています。
▼
◆枠＝罫線のサイズが、3pt指定の場合
・・・IE＝二重罫線の外側が太線で内側は細線
・・・ネスケ＝外側、内側ともに同じサイズの細線
Webぺージの公開がIEユーザーを対象にするなら、ほぼ思惑どおりに作れると思いますが、ネスケ対策も前提となると、少々勝手が違います。
特に枠＝罫線に関しては、スタイルシートを簡略化しても良い場合と、そうしてはならない場合の見極めは、当サイト管理人の経験上、色々と試してみるしか術がないというのが本音です。
>> TABLEタグ以外の方法で、枠線＝罫線を表示
フォント関連を簡略化したスタイルシートの設定例
文字（フォント）の大きさや色は、スタイルシートにフォントカラー、サイズ、書体などを設定します。
例えば、スタイルシートに{ color : #カラーコード名 ; } などは、HTML文書内テキストの色指定の設定です。
テキストを表示させる肝心、要の設定は、次のようになります。
フォントの太さ { font-weight : solid（細く）や bold（太く） ; }
フォントサイズ { font-size : px pt % など ; }
フォント書体 { font-family : フォントファミリー名 ; }
▼
フォント関連を簡略化・・・太さ、サイズ、書体の値を半角スペースで区切ります。
例えば >> HTML
・・・作例は、外部スタイルシートの設定を呼び出しています。
▼
.abc{ font : solid 18px Arial Black ; }
HTML文書内の記述は、次のとおりです。
<P><SPAN CLASS="abc">HTML</SPAN></P>
当サイトの<BODY>は、次のように設定しています。
body {
font-size:12px;color:#3F3F3F;
font-family:Verdana,suns serif;
}
▼
■当サイトの至る所に出没する赤いテキスト文字の設定紹介
（カラー・サイズ・フォント名・太さ・フォント周りの領域をまとめて設定しています。）
.aka {
color : #FF6699 ;
font-size :12px ;
font-family : 'ＭＳ Ｐゴシック', Verdana, sans-serif ;
font-weight : normal ;
padding : 0px ;
}
▼
未知の苦HTML解道 >> 未知の苦HTML解道
◆ソース表示
<P><SPAN CLASS="aka">未知の苦HTML解道</SPAN></P>
▼
|←←←←←←←←← 要 素 →→→→→→→→→→|
↓ブロックレベル要素（P要素） ↓要素内容
<P><SPAN CLASS="aka">未知の苦HTML..</SPAN></P>
↑インラインレベル要素（span要素）
|←←属 性→→|
|←値→|
■ブロックレベル要素とインラインレベル要素
The Web KANZAKI様 TOP | やや詳しい目次 |
インターネットやコンピュータの話 | HTMLの説明 >>
簡単なHTMLの説明 | ２文書の骨格となる基本要素 >>
文書の骨格をかたちづくる基本要素 | ブロックとインライン >>
ブロックレベル要素とインライン要素
|
