HTML Rule Memor@ndum **　My recipe　TABLE と BORDER
　
♠　TABLE & BORDER・・・テキスト（文章）だけでは要点がつかみにくいことがあると思います。そのようなとき、表にまとめてみるとか、
テキストの一部を枠線で囲ってみる等の方法が考えられます。HTMLではTABLEタグを用い「表」を記述します。
　また、テキストの一部分だけに枠を付けたい場合は、「Border-style属性」をインラインで埋め込む等の方法があります。 　
>>Border-style属性 　
　
◆表を構成するタグ　TABLE・TR・TD ・・・キーワードは「入れ子とハムカツサンド」◆

サンドイッチのハムカツサンドを想像してみてください。メインのハムが真ん中、脇役のレタス、それらをパンではさむ。
この要領で表を作るときは、タグを入れ子にし、必ずハムカツサンドを作ることです（笑）。

▼実際に表を作ってみます。・・・サンプルは２列８行の表　手順a〜fをリスト表示にしています。▼


TABLE SAMPLE
1行目左1行目右
2行目左2行目右
3行目左3行目右
4行目左4行目右
5行目左5行目右
6行目左6行目右
7行目左7行目右
8行目左8行目右

▲TABLE開始タグに枠線の幅表示 「BORDER="1"」 とTABLEの横列の幅サイズ 「 WIDTH="150"」 を入れています。
「BORDER="1"」 は「BORDER」 と書いてもかまいません。

▼BORDER="n"の数値例▼

BORDER="0"　　BORDER="5"　　BORDER="10"
1行目左1行目右
2行目左2行目右
3行目左3行目右
4行目左4行目右
5行目左5行目右
6行目左6行目右
7行目左7行目右
8行目左8行目右
1行目左1行目右
2行目左2行目右
3行目左3行目右
4行目左4行目右
5行目左5行目右
6行目左6行目右
7行目左7行目右
8行目左8行目右
1行目左1行目右
2行目左2行目右
3行目左3行目右
4行目左4行目右
5行目左5行目右
6行目左6行目右
7行目左7行目右
8行目左8行目右

▼TABLE内のセル間隔（マージン）を変更▼
CELLSPACING="n"・・・TABLEと外枠の間隔
CELLPADDING="n"・・・セルの枠とセル内容との間隔

　BORDER="1"
　CELLSPACING="0"
　CELLPADDING="0"		 　BORDER="1"
　CELLSPACING="2"
　CELLPADDING="3"		 　BORDER="10"
　CELLSPACING="3"
　CELLPADDING="4"
1行目左1行目右
2行目左2行目右
3行目左3行目右
4行目左4行目右
5行目左5行目右
6行目左6行目右
7行目左7行目右
8行目左8行目右
1行目左1行目右
2行目左2行目右
3行目左3行目右
4行目左4行目右
5行目左5行目右
6行目左6行目右
7行目左7行目右
8行目左8行目右
1行目左1行目右
2行目左2行目右
3行目左3行目右
4行目左4行目右
5行目左5行目右
6行目左6行目右
7行目左7行目右
8行目左8行目右

▼TABLEの枠線の色を変更▼
BORDERCOLOR="#n"・・・"#n"は「青=#0000FF」等のカラーコード名 （または「青=blue」等のカラーネーム ）

　BORDER="1"
　CELLSPACING="1"
　CELLPADDING="3"
BORDERCOLOR="#FF9999"		 　BORDER="2"
　CELLSPACING="2"
　CELLPADDING="3"
BORDERCOLOR="#33CC99"		 　BORDER="3"
　CELLSPACING="3"
　CELLPADDING="4"
BORDERCOLOR="#0000CC"
1行目左1行目右
2行目左2行目右
3行目左3行目右
4行目左4行目右
5行目左5行目右
6行目左6行目右
7行目左7行目右
8行目左8行目右
1行目左1行目右
2行目左2行目右
3行目左3行目右
4行目左4行目右
5行目左5行目右
6行目左6行目右
7行目左7行目右
8行目左8行目右
1行目左1行目右
2行目左2行目右
3行目左3行目右
4行目左4行目右
5行目左5行目右
6行目左6行目右
7行目左7行目右
8行目左8行目右

▼TABLEの装飾・・・"BORDER" を "0" に変更、"BORDERCOLOR" の部分を背景色属性"BGCOLOR" に書換、
　　TDタグに背景色 「BGCOLOR="#n" 」の記述を追加▼
TDタグ内のテキスト位置指定・・・デフォルトは左、<TD ALIGN="RIGHT">は右、<TD ALIGN="CENTER">は中央

　BORDER="0"
　CELLSPACING="1"
　CELLPADDING="3"
BGCOLOR="#FF9999"
表左側8箇所▼
<TD BGCOLOR="#FFFFFF">
表右側8箇所▼
TD内に BGCOLOR の記述なし
（TABLEのBGCOLOR が背景色）		 　BORDER="0"
　CELLSPACING="3"
　CELLPADDING="4"
BGCOLOR="#33CC99"
表左側8箇所▼
<TD BGCOLOR="#FFFFFF">
表右側8箇所▼
<TD BGCOLOR="#33FFFF"
ALIGN="RIGHT">		 　BORDER="0"
　CELLSPACING="4"
　CELLPADDING="85"
BGCOLOR="#0000CC"
表左右とも▼
<TD BGCOLOR="#99CCFF"
ALIGN="CENTER">
1行目左1行目右
2行目左2行目右
3行目左3行目右
4行目左4行目右
5行目左5行目右
6行目左6行目右
7行目左7行目右
8行目左8行目右
1行目左1行目右
2行目左2行目右
3行目左3行目右
4行目左4行目右
5行目左5行目右
6行目左6行目右
7行目左7行目右
8行目左8行目右
1行目左1行目右
2行目左2行目右
3行目左3行目右
4行目左4行目右
5行目左5行目右
6行目左6行目右
7行目左7行目右
8行目左8行目右

▲のTABLEの内、左側TABLEのソース内容は▼のとおりです。TABLEタグで囲んでいます（笑）。
記述のポイント箇所をSTYLE属性の「text-decoration: underline;」で囲み下線"を付けています。▼

<TABLE BORDER="0"  WIDTH="170"  CELLSPACING="1" CELLPADDING="3"
 BGCOLOR="#FF9999"  SUMMARY="TABLESAMPLE">
<TR>
<TD BGCOLOR="#FFFFFF">1行目左</TD><TD>1行目右</TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF">2行目左</TD><TD>2行目右</TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF">3行目左</TD><TD>3行目右</TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF">4行目左</TD><TD>4行目右</TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF">5行目左</TD><TD>5行目右</TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF">6行目左</TD><TD>6行目右</TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF">7行目左</TD><TD>7行目右</TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF">8行目左</TD><TD>8行目右</TD>
</TR>
</TABLE>

　　▲TABLEタグ内「SUMMARY="TABLESAMPLE" 」の "SUMMARY"はTABLEの「目的」を記述します。
　　▲の場合"TABLESAMPLE"と記述していますが"テーブル見本"と書いても構いません。

▼もうお気づきになったことと思いますが、複数のTABLEがあり、TABLE事の列幅は銘々でもBORDERの色やセルの
背景色は常に同一にしたい場合、同一部分をCSSにまとめることで HTMLの記述がスッキリします。▼

▲▲三つのTABLEの内、中央の"TABLE"を2列2行にし、タグ内の設定を外部CSSに移行してみます。
移行といってもそのまま移すわけにはいきませんが、▼のHTMLとCSSの記述を比べてみれば、理解も早いと思います。


<TABLE BORDER="0"  WIDTH="170" CELLSPACING="4" CELLPADDING="5"
 BGCOLOR="#33CC99" SUMMARY="TABLESAMPLE">
<TR>
<TD BGCOLOR="#FFFFFF">1行目左</TD><TD BGCOLOR="#33FFFF" ALIGN="right">1行目右</TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF">2行目左</TD><TD BGCOLOR="#33FFFF" ALIGN="right">2行目右</TD>
</TR>
</TABLE>

▲2列2行のソース表示です。
先ず、TABLE開始タグの中の▼赤文字部分をCSSに移行します。

<TABLE BORDER="0"  WIDTH="170" CELLSPACING="4" CELLPADDING="5"
 BGCOLOR="#33CC99" SUMMARY="TABLESAMPLE">


クラスセレクタを「waku」という名称にし、次にTD開始タグの▼赤文字部分をCSSに移行します。


<TD BGCOLOR="#FFFFFF"> 1行目左部分をクラスセレクタ「td1L」
<TD BGCOLOR="#33FFFF" ALIGN="right"> 1行目右部分をクラスセレクタ「td1R」
<TD BGCOLOR="#FFFFFF"> 2行目左部分をクラスセレクタ「td2L」
<TD BGCOLOR="#33FFFF" ALIGN="right"> 2行目右部分をクラスセレクタ「td2R」」

という各クラスセレクタ名称にしています。

　▲CSSの基本文型は 選択部 { 属性（プロパティ） : 値 ;} です。
　選択部はクラスセレクタ、タイプセレクタ、▼IDセレクタ等です。▼の bodyはタイプセレクタ
　　「IDセレクタ」の詳細はDynamic HTML Stylingサマ。

　 ▼当サイトの BODY { プロパティ: 値 ; ｝ の場合▼

body {
background-color:#FFFFFF;
color: #4A76A2;
font-family: Verdana;
font-size: 12px;
font-weight: lighter;
}


▲CSSソースはできるだけ簡略化（記述する順番は任意）▼
ただし、FONTプロパティのみfont-size、font-familyの順、
その他のプロパティはfont-sizeの前。詳細はhazaサマ>>CSSリファレンス>>フォント


body {
background-color:#FFFFFF;
color: #4A76A2;
font: lighter 12px Verdana;
}

　　▲▼現行HTMLではタグ・属性・値の大文字小文字の区別をしていませんが、
　XHTMLという仕様では、必ず小文字指定です。 #FFFFFF→#ffffff
　STYLE属性 （枠の太さ・色等） の設定と併せ、詳細は >> Challenge HPサマ

▼▲CSS設定の記述

.waku {
BORDER :solid 4px #33CC99; BACKGROUND-COLOR: #33CC99;
WIDTH:170; }

.td1L {
border-right: solid 2px #33CC99; border-bottom: solid 2px #33CC99;
BACKGROUND-COLOR: #FFFFFF; }

.td1R {
border-left: solid 2px #33CC99; border-bottom: solid 2px #33CC99;
BACKGROUND-COLOR: #33FFFF;}

.td2L {
border-right: solid 2px #33CC99; border-top: solid 2px #33CC99;
BACKGROUND-COLOR: #FFFFFF; }

.td2R {
border-left: solid 2px #33CC99; border-top: solid 2px #33CC99;
BACKGROUND-COLOR: #33FFFF; }


▲HTML内TABLEの記述▼

<TABLE CLASS="waku" CELLSPACING="1" CELLPADDING="3" SUMMARY="TABLESAMPLE">
<TR>
<TD CLASS="td1L">1行目左</TD>
<TD CLASS="td1R" ALIGN="right">1行目右</TD>
</TR>
<TR>
<TD CLASS="td2L">2行目左</TD>
<TD CLASS="td2R" ALIGN="right">2行目右</TD>
</TR>
</TABLE>

実際に読み込んでみます。

1行目左1行目右
2行目左2行目右


▼TABLE内セルの連結▼

▲では整列したTABLEを作りましたが、不規則なTABLEレイアウトにしたい場合、TABLEセルを連結します。
右側の不規則なTABLE内にTABLE見出し<TH>左側段数</TH><TH>右側段数</TH>を付けています。
タグ属性により文字が 強調 されます。（必ず<TR></TR>ではさみます。） TABLE見出しによりTABLEWIDTH="180"に変更。

整列
1行目左1行目右
2行目左2行目右
3行目左3行目右
4行目左4行目右
5行目左5行目右
6行目左6行目右
7行目左7行目右
8行目左8行目右
⇒ ⇒
不規則(1-a)
左側段数右側段数
1行目左1行目右
2〜5行目左2行目右
3行目右
4行目右
5行目右
6〜7行目左6行目右
7行目右
8行目左右

縦方向にセルを連結 >> TH、TDタグにROWSPAN属性と連結したいセル数を指定。
横方向にセルを連結 >> TH、TDタグにCOLSPAN属性と連結したいセル数を指定。

▲整列したTABLEの左列「2行目左〜5行目左=4連結」「6行目左と7行目左=2連結」
「8行目左右」を横方向に連結しました。連結しようとする下（横）方向のTDタグは削除します。

▼ソース表示▼

<TABLE BORDER="1" WIDTH="180" SUMMARY="TABLESAMPLE">
<CAPTION>不規則(1-a)</CAPTION>
<TR><TH>左側段数</TH><TH>右側段数</TH></TR>
<TR><TD>1行目左</TD><TD>1行目右</TD></TR>
<TR><TD ROWSPAN="4">2〜5行目左</TD><TD>2行目右</TD></TR>
<TR><TD>3行目右</TD></TR>
<TR><TD>4行目右</TD></TR>
<TR><TD>5行目右</TD></TR>
<TR><TD ROWSPAN="2">6〜7行目左</TD><TD>6行目右</TD></TR>
<TR><TD>7行目右</TD></TR>
<TR><TD COLSPAN="2">8行目左右</TD></TR>
</TABLE>

▼同じようにTABLEの右列を、例えば 「2〜4行目右=3連結」 「5〜7行目右=3連結」 にすると
行数の骨格が取り払われ、TABLE全体が収縮します。▼
不規則(1-b)
1行目左1行目右
2〜5行目左2行目右
3行目右
4行目右
5行目右
6〜7行目左6行目右
7行目右
8行目左右
⇒ ⇒
不規則(2)
1行目左1行目右
2〜5行目左2〜4行目右
5〜7行目右
6〜7行目左
8行目左右

▼TABLEの左列「2〜5行目」と「6〜7行目左」のTDタグにセルの高さ指定"HEIGHT"を記述してみます。
HEIGHTの数値は色々試してみましょう。ここでは、「2〜5行目左」を"75"、「6〜7行目左」を"35"にしました。

不規則(2)
1行目左1行目右
2〜5行目左2〜4行目右
5〜7行目右
6〜7行目左
8行目左右
⇒ ⇒
不規則(2改)
1行目左1行目右
2〜5行目左2〜4行目右
5〜7行目右
6〜7行目左
8行目左右

▲を元に遊んでみます。右のTABLEに注目?!▼
TABLEWIDTH="240"  BORDER="0"  CELLSPACING="1"
TDタグ内の HEIGHT 「2〜5行目左="150"、6〜7行目左="50"」
TDタグ内テキストの位置関係 ALIGN="center（中央）　left（左揃え）　right（右揃え）"のいずれかと
VARIGN="top（上）　middle（真ん中）　bottom（下）"のいずれかを組み合わせTDタグ内に記述しています。

不規則(2改)
1行目左1行目右
2〜5行目左2〜4行目右
5〜7行目右
6〜7行目左
8行目左右
⇒ ⇒
HTMLメモ備忘録
未知の苦HTML解道
　HTML Rule
　Memor@adum
　　★推奨環境★		　infometion
　what's new
　雑記etc
累計
本日
昨日
© Yahcom, all right reserved, 2004.

▲当サイトのTOPページをイメージしてみました。▲のようなレイアウトを目的としたTABLEの使い方は、本来の"表"から
かけ離れてしまい、ほめられたモノではないようです。
当サイトにおける実際のTOPページは大枠のTABLEにパーツ用のTABLEを何点か組み込んだレイアウトになっております。
　
▼TABLE内罫線の表示方法・・・TABLE開始タグにRULES属性を指定▼
　
▼デフォルト=none▼
none（罫線なし）
日本語英語
春spring
夏summer
秋autumn （英）　fall（米）
冬winter
 ソース⇒ ⇒ <TABLE BORDER="1" RULES="none">
<CAPTION>none（罫線なし）</CAPTION>
<TR><TH>日本語</TH><TH>英語</TH></TR>
<TR><TD ALIGN="center">春</TD>
<TD ALIGN="center">spring</TD></TR>
<TR><TD ALIGN="center">夏</TD>
<TD ALIGN="center">summer</TD></TR>
<TR><TD ALIGN="center">秋</TD>
<TD ALIGN="center">autumn （英）　fall（米）</TD></TR>
<TR><TD ALIGN="center">冬</TD>
<TD ALIGN="center">winter</TD></TR>
</TABLE>

▼GROUPS （THEAD・TBODY・COL等の間・・▽は TABLE見出しをTHEADで囲みグループ化した例）▼
　FRAME属性と組み合わせせた場合の詳細はMAKOTO3.NETサマ>>　dhtml samples 02-161番>>
　タグのFRAME属性とRULES属性
groups
（thead指定の場合）
日本語英語
春spring
夏summer
秋autumn （英）　fall（米）
冬winter
 ソース⇒ ⇒ <TABLE BORDER="1" RULES="groups">
<CAPTION>groups（thead指定の場合）</CAPTION>
<THEAD><TR><TH>日本語</TH><TH>英語</TH></TR></THEAD>
<TR><TD ALIGN="center">春</TD>
<TD ALIGN="center">spring</TD></TR>
<TR><TD ALIGN="center">夏</TD>
<TD ALIGN="center">summer</TD></TR>
<TR><TD ALIGN="center">秋</TD>
<TD ALIGN="center">autumn （英）　fall（米）</TD></TR>
<TR><TD ALIGN="center">冬</TD>
<TD ALIGN="center">winter</TD></TR>
</TABLE>

▼ROWS▼
rows（行間のみ）
日本語英語
春spring
夏summer
秋autumn （英）　fall（米）
冬winter
 ソース⇒ ⇒ <TABLE BORDER="1" RULES="rows">
<CAPTION>rows（行間のみ）</CAPTION>
<TR><TH>日本語</TH><TH>英語</TH></TR>
<TR><TD ALIGN="center">春</TD>
<TD ALIGN="center">spring</TD></TR>
<TR><TD ALIGN="center">夏</TD>
<TD ALIGN="center">summer</TD></TR>
<TR><TD ALIGN="center">秋</TD>
<TD ALIGN="center">autumn （英）　fall（米）</TD></TR>
<TR><TD ALIGN="center">冬</TD>
<TD ALIGN="center">winter</TD></TR>
</TABLE>

▼COLS▼
cols（縦列のみ）
日本語英語
春spring
夏summer
秋autumn （英）　fall（米）
冬winter
 ソース⇒ ⇒ <TABLE BORDER="1" RULES="cols">
<CAPTION>cols（縦列のみ）</CAPTION>
<TR><TH>日本語</TH><TH>英語</TH></TR>
<TR><TD ALIGN="center">春</TD>
<TD ALIGN="center">spring</TD></TR>
<TR><TD ALIGN="center">夏</TD>
<TD ALIGN="center">summer</TD></TR>
<TR><TD ALIGN="center">秋</TD>
<TD ALIGN="center">autumn （英）　fall（米）</TD></TR>
<TR><TD ALIGN="center">冬</TD>
<TD ALIGN="center">winter</TD></TR>
</TABLE>

▼ALL・・・RULES属性の指定がない場合と同じ▼
all（全ての境界）
日本語英語
春spring
夏summer
秋autumn （英）　fall（米）
冬winter
 ソース⇒ ⇒ <TABLE BORDER="1" RULES="all">
<CAPTION>all（全ての境界）</CAPTION>
<TR><TH>日本語</TH><TH>英語</TH></TR>
<TR><TD ALIGN="center">春</TD>
<TD ALIGN="center">spring</TD></TR>
<TR><TD ALIGN="center">夏</TD>
<TD ALIGN="center">summer</TD></TR>
<TR><TD ALIGN="center">秋</TD>
<TD ALIGN="center">autumn （英）　fall（米）</TD></TR>
<TR><TD ALIGN="center">冬</TD>
<TD ALIGN="center">winter</TD></TR>
</TABLE>

▼ようやく本題。TABLEとBORDERです。

テキストの一部を枠線で囲みたいとき、CSSのBORDER-STYLE属性をHTML内に直接埋め込むと、
その部分を枠で囲むことができます。>>STYLE属性をHTMLに埋め込むことを「インライン」と言います。
ソース表示：<SPAN style="border: 1pt solid #FF9999;">BORDER-STYLE属性</SPAN>

BORDER="2pt"、 solid（一本線）をdouble（二重線）にするとBORDER-STYLE属性となります。・・・と、
作例を書き続けるのが面倒になってきました。
そこでTABLEを組み、BORDER-STYLE値を外部CSSに設定、クラスセレクタを"bs1"から"bs11"とし、
実線、二重線、破線・点線等の設定を読み込むと▼のようになります。「値」の違いを比較してみましょう。▼

BORDER-STYLE
値表示例
solid　BORDER-STYLE1
double　BORDER-STYLE2
groove　BORDER-STYLE3
rigde　BORDER-STYLE4
inset　BORDER-STYLE5
outset　BORDER-STYLE6
dashd　BORDER-STYLE7
dotted　BORDER-STYLE8
⇒ ⇒
STYLE値の組合せ
値の指定表示例
値=1
(上下左右共通）		　solid（四辺）
値=2
(上下、左右）		　solid（上下）
 double（左右）
値=3
(上、左右、下）		　dashed（上）
 solid（左右） dotted（下）
値=4
(上、右、下、左）		　dotted（上）solid（右）
 dashed（下）double（左）

▼オマケ？・・・説明しなくても判りますヨネ？2列2行のTABLEに左列：画像、右列：テキスト・・あれ？説明してるって？▼

hrm.gif(2804 byte) 　当サイトのバナーです。ダウンロードしてお使いください。
redhawk.gif(3018 byte) 　フレンズのバナーです。勝手に作りました。センスないすね。

♠　FONT SIZE・・・文字周り （サイズ、太さ、色） 等の設定をHTML構文内に記述してもいいのですが、 当サイトは外部CSS
（スタイルシート）にまとめています。外部からの読み込みを、リンキングスタイルシートと呼びます。
HTMLヘッダに<LINK REL="STYLESHEET" TYPE="text/css" HREF="半角英数字のファイル名.css">と記述します。

このページをソース表示すると判りますが、当サイトは "ienn.css" としています。

　▼　当サイト BODY内「文字周り」のCSS設定 （詳細説明の便宜上、CSSソースは簡略化しておりません。）　▼


文字周りのCSS設定 説　明　と　補　足
　body{ 　
　background-color:#FFFFFF; 　背景色:白
　color: #4A76A2; 　基本とする文字色：#4A76A2
　font-family: Verdana; 　フォントの種類：Verdana
　serif=Times New Roman等、
　sans-serif=MS Verdana、平成角ゴシック等　
　font-size: 12px; 　文字サイズ：12px
　font-weight: lighter; 　文字の太さ：lighter
　標準 「nomal」　太字 「bold」
　標準（nomal）から一段階太くする時は 「bolder」を指定
　太字（bold）から一段階細くする時は 「lighter」を指定
　詳細はDynamic HTML Stylingサマ
　}

　▲のように設定していることを前提に、ひとつ前のページをTABLEにした例です。▼
　▼HTMLの基準となるフォントサイズ（文字の大きさ）の指定▼
「絶対値指定」
x-small
small
medium
large
x-large
xx-large
 「相対値指定」
larger
smaller
 「1から7」までの「数値指定」 「pt ・mm ・％」等の「単位措定」
例えば数値指定の場合、サイズ指定がなければ「標準値＝3」です。フォント（書体）はユーザーが任意に設定。
ユーザーが設定したフォントがない場合は、ブラウザに設定されたデフォルトのフォントで表示されます。
▼作例は数値指定です。▼

フォントサイズ＝1の場合▼
HTML Rule Memor@ndum ** HTMLルール備忘録　スクリプトエラー警告雨嵐、テーブル迷路で右往左往、手探り書き分けその先は、スタイルシートで難所越え・・・「未知の苦HTML解道」つまず紀行！

ソース表示（▼記述のポイントを赤文字にしています▼）

<FONT SIZE="1" >HTML Rule Memor@ndum ** HTMLルール備忘録　スクリプトエラー警告雨嵐、 テーブル迷路で右往左往、手探り書き分けその先は、スタイルシートで難所越え ・・・「未知の苦HTML解道」つまず紀行！</FONT>

フォントサイズ指定なし（標準値=3）の場合▼
HTML Rule Memor@ndum ** HTMLルール備忘録　スクリプトエラー警告雨嵐、テーブル迷路で右往左往、手探り書き分けその先は、スタイルシートで難所越え・・・「未知の苦HTML解道」つまず紀行！

ソース表示（▼フォントサイズの指定がないのでタグは不要▼）

HTML Rule Memor@ndum ** HTMLルール備忘録　スクリプトエラー警告雨嵐、テーブル迷路で右往左往、手探り書き分けその先は、スタイルシートで難所越え・・・「未知の苦HTML解道」つまず紀行！

フォントサイズ＝5の場合▼
HTML Rule Memor@ndum ** HTMLルール備忘録　スクリプトエラー警告雨嵐、テーブル迷路で右往左往、手探り書き分けその先は、スタイルシートで難所越え・・・「未知の苦HTML解道」つまず紀行！

　ソース表示（▼記述のポイントは赤文字。ソース表示の記述は、比較の意味で「FONT SIZE="2"」 としています。▼）

<FONT SIZE="5">HTML Rule Memor@ndum ** HTMLルール備忘録　スクリプトエラー警告雨嵐、テーブル迷路で右往左往、手探り書き分けその先は、スタイルシートで難所越え・・・「未知の苦HTML解道」つまず紀行！</FONT>

外部スタイルシートを読み込んだ場合▼

　当サイトの場合、フォントサイズは外部CSS （スタイルシート） に 「font-size: 12px;」 とピクセル単位にしています。

　改行タグ<BR>を所々に入れ、文章の体裁を直してみます。▼

　HTML Rule Memor@ndum **
　HTMLルール備忘録
　スクリプトエラー警告雨嵐、テーブル迷路で右往左往、手探り書き分けその先は、スタイルシートで難所越え
　・・・「未知の苦HTML解道」つまず紀行！

　ソース表示（▼フォントサイズの指定がないので改行タグ<BR>以外のタグは不要▼）

HTML Rule Memor@ndum ** <BR>
HTMLルール備忘録<BR>
スクリプトエラー警告雨嵐、テーブル迷路で右往左往、手探り書き分けその先は、スタイルシートで難所越え<BR>
・・・「未知の苦HTML解道」つまず紀行！

色々装飾してみます。▼

　次に、フォントカラーをブルー系に、サイト名を太字で大きく、 　サブタイトルを他の色に変え、コメント部分を斜体にしてみます。▼

　HTML Rule Memor@ndum **
　HTMLルール備忘録
　スクリプトエラー警告雨嵐、テーブル迷路で右往左往、手探り書き分けその先は、スタイルシートで難所越え
　・・・「未知の苦HTML解道」つまず紀行！

　▼最初にタグを分別して説明します▼
<FONT COLOR="#3366FF">　文頭から文末までのフォントカラーの指定　</FONT>
　・・・"#3366FF" はカラーコード名・・・
　文字の装飾指定
<STRONG><BIG>文字を強調して大きく</BIG></STRONG>
　文章途中の文字色
<FONT COLOR="#CC3366"> 文字色を変えたい箇所の色 </FONT>
　・・・"#CC3366" はカラーコード名・・・
　文字の書体指定 （作例の"EM"タグは本来強調タグですが「斜体」になります。）
<EM>　斜体の場合、論理的タグは"EM"　</EM>
　・・・<I>"I"タグは物理的フォントタグ</I>

　▼ソース表示▼

<FONT COLOR="#3366FF"><STRONG><BIG>HTML Rule Memor@ndum **</BIG></STRONG><BR>
<FONT COLOR="#CC3366"><STRONG>HTMLルール備忘録</STRONG></FONT><BR>
<EM>スクリプトエラー警告雨嵐、テーブル迷路で右往左往、手探り書き分けその先は、スタイルシートで難所越え<BR>
・・・「未知の苦HTML解道」つまず紀行！</EM></FONT>


ひとつ前のページを「スタイルシート・TABLE・BORDER」等を組合せ、更に見やすいよう工夫してみました。
当サイト内「MEMO」ページは更に「TABLE」テンプレートに「TABLE in TABLE」の構成にしています。>>TABLE要素


<<　BACK　　NEXT　>>段落要素<P>タグと<DIV>タグ

　Home　

HTML Rule Memorandum**　Copyright © Yahcom, all right reserved, since 2004.