| ここに文字や画像をﾍﾟｰｽﾄします。 改行
→ 高さが変わります。
|
ｾﾙの背景画像の指定（例） | …… | …… |
| ……
|
 画像挿入（例） |
||
| ……
|
|||
| ……
|
ﾎｰﾑ へ ｻﾝﾌﾟﾙﾍﾟｰｼﾞ ﾊｲﾗｲﾄ表 1a highlight_table1.htm
(0)〜(7)のﾊｲﾗｲﾄ表のｻﾝﾌﾟﾙ。 ﾏｳｽｵｰﾊﾞｰ/ｵﾌ時にｾﾙ背景色が指定色に変わり、痕跡を遺します。 ﾃｷｽﾄｴﾃﾞｨﾀｰでの作成方法があります。 中央配置の表に背景画像を挿入や、ﾏｳｽｵｰﾊﾞｰ時のﾘﾝｸ下線表示、前景・背景変化 の（例）も。 ｺﾋﾟｰ、編集し、簡単にWebで応用可能。
| (0) | 表/配置：中央(横)、ﾌﾛｰﾄ：標準、罫線：1、ｾﾙｽﾍﾟｰｽ：2、ｾﾙ間ｽﾍﾟｰｽ：0、背景色：#FFFFFF、明罫線：=#EDE6FF、暗罫線：#C1B7DF、幅：90%、。 ｾﾙ/配置：横・縦標準、背景色：#FFFFFF、幅：25% |
| ここに文字や画像をﾍﾟｰｽﾄします。 改行 → 高さが変わります。 | ……
|
……
|
……
|
| ……
|
……
|
……
|
……
|
| ……
|
……
|
……
|
……
|
| ……
|
……
|
……
|
……
|
| (1) | 表/配置：中央(横)、ﾌﾛｰﾄ：標準、罫線：0、ｾﾙｽﾍﾟｰｽ：0、ｾﾙ間ｽﾍﾟｰｽ：1、背景色：#530080、幅：90%。 ｾﾙ/配置：横・縦標準、背景色：#FFFFFF、幅：25% |
| ここに文字や画像をﾍﾟｰｽﾄします。 改行
→ 高さが変わります。 ｾﾙ背景色無変化ﾀｸﾞ（例）
|
…… | …… | …… |
| ……
|
……
|
……
|
……
|
| ……
|
……
|
……
|
|
| ……
|
……
|
| (2) | 表/配置：中央(横)、ﾌﾛｰﾄ：標準、罫線：0、ｾﾙｽﾍﾟｰｽ：0、ｾﾙ間ｽﾍﾟｰｽ：2、背景色：#FFFFFF、幅：90%。 ｾﾙ/配置：横・縦標準、背景色：#F3F3F3、幅：25% |
※：ﾏｳｽｵｰﾊﾞｰ時にｾﾙ背景色が指定色の色違い。
| ここに文字や画像をﾍﾟｰｽﾄします。 改行
→ 高さが変わります。
|
ｾﾙの背景画像の指定（例） | …… | …… |
| ……
|
画像挿入（例） |
||
| ……
|
|||
| ……
|
| (3) | 表/配置：中央(横)、ﾌﾛｰﾄ：標準、罫線：0、ｾﾙｽﾍﾟｰｽ：0、ｾﾙ間ｽﾍﾟｰｽ：1、背景色：#530080、幅：600ﾋﾟｸｾﾙ、高さ：50ﾋﾟｸｾﾙ。 ｾﾙ/配置：中央(横)、縦(中央)、背景色：#FFFFFF、幅：25% |
| ここに文字や画像をﾍﾟｰｽﾄします。改行 → 高さが変わります。 | …… | …… | …… |
| ……
|
|||
| ……
|
|||
| ……
|
| (4) | 表/配置：中央(横)、ﾌﾛｰﾄ：標準、罫線：0、ｾﾙｽﾍﾟｰｽ：0、ｾﾙ間ｽﾍﾟｰｽ：2、背景色：#FFFFFF、幅：600ﾋﾟｸｾﾙ、高さ：50ﾋﾟｸｾﾙ。 ｾﾙ/配置：中央(横)、縦(標準)、背景色：#F8EEFF、幅：25% |
| ここに文字や画像をﾍﾟｰｽﾄします。改行 → 高さが変わります。 | …… | …… | …… |
| ……
|
|||
| ……
|
|||
| ……
|
| (5) | 表/配置：標準(横)、ﾌﾛｰﾄ：標準、罫線：0、ｾﾙｽﾍﾟｰｽ：1、ｾﾙ間ｽﾍﾟｰｽ：0、背景色：#630198、幅：100%、高さ：。 ｾﾙ/配置：標準(横)、縦(標準)、背景色：#F8EEFF、幅：25% |
|
下は、上のﾀｸﾞを4回繰り返し。
|
|
|
|
| (6) | 表/配置：中央(横)、ﾌﾛｰﾄ：標準、罫線：0、ｾﾙｽﾍﾟｰｽ：0、ｾﾙ間ｽﾍﾟｰｽ：0、背景色：#630198、幅：99%、高さ：。 ｾﾙ/配置：、縦(標準)、背景色：#F8EEFF、幅：16% |
|
| (7) | 表/配置：中央(横)、ﾌﾛｰﾄ：標準、罫線：0、ｾﾙｽﾍﾟｰｽ：1、ｾﾙ間ｽﾍﾟｰｽ：1、背景色：標準、幅：100%、高さ：。 ｾﾙ/配置：、縦(標準)、背景色：標準、幅：指定値 中央配置の表に背景画像を挿入した（例） ： 表配置 : 中央横、幅 : 100%、ｾﾙ幅 : 70%、高さ : 任意（改行で可変）、背景画像 : あり（下記） |
※：背景画像ｻｲｽﾞを ”ﾋﾟｸｾﾙ”で指定する場合の（例） ： <td width="300" background="http:/…… blst01.gif" height="300">
| 背景画像 ： blst01.gif
|
<ご使用方法>
| ・ ﾛｰｶﾙ（=PC）への保存は、 | をｸﾘｯｸします。 〔このﾎﾞﾀﾝの実装方法は、ここの(*3) で。〕 |
あるいは、 highlight_table1.htm を右ｸﾘｯｸします。 [対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……などで行います。 ※1:ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は多少ある）。 ※2:hogehoge.html ： 制作者が名付けた挿入先ﾌｧｲﾙの総称。
・ PCに保存したﾌｧｲﾙを WordPad や SmipleText などのﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰ で開き編集します。 これらの表の実装方法は、highlight_table1.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、挿入先（新しいﾍﾟｰｼﾞ 1 や hogehoge.html） の、<body> 〜 </body>の任意の行に、(0)〜(7)から選びそれぞれの、 <div align= 〜 </center></div> 部分をﾍﾟｰｽﾄします。
・ ﾊｲﾊﾟｰﾘﾝｸの下線非表示、ﾏｳｽｵｰﾊﾞｰ時の下線表示と文字・背景色の変化の実装は、 <head> 〜 </head> の間の任意の行に (*1) をﾍﾟｰｽﾄします。
･ 編集方法 ： 下記の（例）(*1)と、(*2) を参考に太字部分の編集を行います。 ﾏｳｽｵｰﾊﾞｰ時のｾﾙ背景色の指定は、ﾏｳｽｵﾝ/ｵﾌ時の背景色変化ﾀｸﾞ、および ｾﾙ背景色無変化ﾀｸﾞ で。 色記号の獲得はここで 背景画像の変更は、画像ﾌｧｲﾙのURLや、ﾌｧｲﾙ名の変更で。 (0) 〜 (7) から選び、<!-- ★-----↓ この間をコピー---★ --> から <!-- ★----- ↑ この間をコピー ----★ > 迄のｺﾋﾟｰ、ﾍﾟｰｽﾄ、編集で。
・ 作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 4.x〜 などで開きます。 ﾌﾞﾗｳｻﾞｰなどのｷｬｯｼｭに残っている前ﾃﾞｰﾀを更新するため、目的のﾍﾟｰｼﾞを表示させた状態で、Internet Explorer でｱﾄﾞﾚｽを確認、再読込みのために、Ｆ５ｷｰを押し最新ﾃﾞｰﾀを読み込みます。（≠再ｱｸｾｽ） NetscapeNavigatorは、Ctrl+Ｒｷｰを押す。
･ ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ、ﾃﾞｨﾚｸﾄﾘｰ〕に、新たに追加した画像があれば転送/配置後に実施します。
･ 関連情報 ： 色記号6、2、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門が便利！。 Web& Internet Samples、Web Development、XML、DHTMLとは？、ColorTable、HTMLの色指定、色見本。
(*1) ： highlight_table1.htm （例） 下線 挿入先の <head> 〜 </head> の、〜 部分にﾍﾟｰｽﾄします。
| HTMLの編集方法 | (*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、編集し使用。 |
| 〔この列ﾍﾟｰｽﾄ不要〕
ｼﾌﾄJIS使用（削除不可） ｉｅなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可） <style type 〜 </style>は（削除可） ﾏｳｽｵｰﾊﾞｰ時のﾃｷｽﾄ 背景 下線非表示
非ﾏｳｽｵｰﾊﾞｰ時の下線表示（逆も可）
ﾍﾟｰｼﾞﾀｲﾄﾙ |
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> <link REL="SHORTCUT ICON" href="faviconj.ico"> <style type="text/css"><!-- A:hover { COLOR: #8000e2; BACKGROUND-COLOR: #f3edee; TEXT-DECORATION: none } A { TEXT-DECORATION: underline } --> </style> <title>サンプルページ ハイライト表 1a</title> <script language="JavaScript1.2"> //Highlight Table Cells Script-- By Dynamic Drive ==== この間､説明を省略｡ ==== source.style.backgroundColor=originalcolor } </script> |
※： ﾏｳｽｵｰﾊﾞｰ時、通常の下線表示/非表示の設定は、 TEXT-DECORATION: underline 、 none 部分で記述します。 色記号は、φ(.. )ここ で。
(*2) ： highlight_table1.htm （例） 表 挿入先の <body> 〜 </body> の、〜 部分にﾍﾟｰｽﾄします。
| HTMLの編集方法 | (*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、編集し使用。 |
<補足> 適時参照あれ！。