|
★ スタイルシート・・・CSS >> Cascading Style Sheetの頭文字
★ CSSはレイアウトを定義する規格＝フォントサイズ、余白、行間etc
★ CSSの適用方法 >> ページ全体、 ページ単位、
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属性の指定は、例外として使用できます。
▼
スタイルシートの基本文型は、次のような構成になっています。
- スタイルシートの基本文型 -
▼
■例えば、BODY全体のテキストフォントを外部スタイルシートに設定
body {
font-size:12px;color:#3F3F3F;
font-family:Verdana,suns serif;
}
スタイルシートを外部に保存する場合の拡張子は css です。
余談ですが、当サイトのcssファイル名は iennmaq.css と言う名称にしています。
▼
◆リンキング スタイルシート・・・Linking Stylesheet
外部に設定したスタイルシートをHTML文書内に取り込む（適用する）ときは、スタイルシ−トをLINK情報（LINK要素）として、HTML文書内、<HEAD>〜</HEAD>の中に、次のように記述します。
<LINK REL="STYLESHEET" TYPE="text/css" HREF="iennmaq.css">
関連 >> HTML文書に必要な文書情報
▼
☆ HTML文書表記例 ☆
<html>
<head>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="iennmaq.css">
<title> ページタイトル（サイト内容に見合うテーマ） </title>
</head>
<body>
本文
</body>
</html>
▼
◆エンベッデイング スタイルシート ・・・Embedding Stylesheet
（Embeddingは「埋め込み」の意）
スタイルシートの設定を、ページ単位（そのページのみ）でHTML文書内に取り込む（適用する）ときは、STYLE要素を用い、HTML文書内、<HEAD>〜</HEAD>の中に記述します。（作例は、BODYの場合）
<style type="text/css">
<!--
body {
font-size:12px;color:#3F3F3F;
font-family:Verdana,suns serif;
}
-->
</style>
▼
☆ HTML文書表記例 ☆
<html>
<head>
<title> ページタイトル（サイト内容に見合うテーマ） </title>
<style type="text/css">
<!--
.body {
font-size:12px;color:#3F3F3F;
font-family:Verdana,suns serif;
}
-->
</style>
</head>
<body>
本文
</body>
</html>
▼
◆インライン スタイルシート ・・・Inline Stylesheet
スタイルシートの設定を、HTML文書内に、直接記述することができます。
インラインスタイルシートと呼ばれ、スタイルシートの基本文型を成す
選択部 { 属性（プロパティ） : 値 ; }
の括弧 { } 内を、HTML文書のタグ要素に、スタイルシートを指定するSTYLE属性を用い、直接記述します。
スタイルシートを、タグ要素に記述する際は、タグ要素に追加するHTMLタグの属性値と同様に、二重引用符" "で括ります。
◇作例１
未知の苦HTML解道 >> 未知の苦HTML解道
▼
<SPAN style="border-width : 3px ; border-style : double ; border-color : #FFCCCC ;padding : 4px ; ">
未知の苦HTML解道</SPAN>
◇作例２
未知の苦HTML解道 >> 未知の苦HTML解道
▼
<SPAN style="font-weight : bold ; font-size : 18px ;
font-family : Arial Black ;">HTML</SPAN>
◇作例３
特定のスタイルシートが、頻繁に常用される場合は、予め、外部にスタイルシートを設定し、そのスタイル（クラス名）を呼び出すことができます。
作例２のスタイルシートを外部に設定
（下記の設定内容は、「簡易記述」）
.abc{ font : bold 18px Arial Black ; }
▼
未知の苦HTML解道
・・・作例は、スタイルシ−ト設定を呼び出すCLASS属性を用い、外部スタイルシートの.abcを呼び出しています。
▼
HTML文書内の記述は、次のとおりです。
<P><SPAN CLASS="abc">未知の苦HTML解道</SPAN></P>
◆インラインスタイルシートでインラインフレーム
▼
<iframe>〜</iframe>タグは、HTMLドキュメント内にフレームを表示します。
▼は、当サイトのアクセス履歴を、インラインフレームに、読み込んでいます。
◇ソース表示
<IFRAME STYLE="width: 350px; height: 200px; padding:10px;"
NAME="main" FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SRC="record.html" SCROLLING="AUTO"TITLE="サイトマップ">*</IFRAME>
◇ソース内各属性の詳細
- width=フレームの横幅
- height=フレームの高さ
- NAME=フレーム名（任意）
- FRAMEBORDER=フレーム枠の表示 （0=非表示、1=表示）
- MARGINWIDTH=フレーム内左右の間隔
- MARGINHEIGHT=フレーム内上下の間隔
- SRC=HTMLドキュメントのファイル名
- SCROLLING=スクロールの有無
（AUTO=必要に応じて、YES=可能、NO=不可）
- TITLE=タイトル（任意）
- padding=枠線と文字の間隔
作例のように数値＋単位の指定が、1つの場合、「上下左右の間隔は共通」
▼
2つの場合 例：10px 15px
>> 「上下、左右の順に間隔を反映」
3つの場合 例：10px 15px 10px
>> 「上、左右、下の順に間隔を反映」
4つの場合 例：5px 10px 15px 20px
>> 「上、右、下、左の順に間隔を反映」・・・時計回り
■当サイトの至る所に出没する赤いテキスト文字の設定紹介
（カラー・サイズ・フォント名・太さ・フォント周りの領域をまとめて設定しています。）
.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の説明 | ２文書の骨格となる基本要素 >>
文書の骨格をかたちづくる基本要素 | ブロックとインライン >>
ブロックレベル要素とインライン要素
|
