この点線枠はスタイルシートを使っています。（例３のみTableの枠線にスタイルを適用している）
スタイルシートを使用するには３つの方法があり
１ 別ファイル ***.css を作成してｈｔｍに読み込む
2 そのページのはじめのmeta部分に宣言してタグに適用する
これには任意の範囲に適用する方法もある
3 タグに直接style文を書き込んでしまうインラインスタイルシート
ここでは２・３を使ったのいくつかを紹介します。
【例1】
本文をここに書く
改行してもっと書く
<STYLE type="text/css">
<!--
DIV.sotowaku {
background-color:"#ecffff";
text-align:left;
width:540;
border:dashed 4pt red;
padding:1.5em;
margin:3em;
}
DIV.sen {
width:100%;
border-bottom:dashed 2pt blue;
}
-->
</STYLE>
<TITLE>点線枠</TITLE>
</HEAD>
<BODY>
【 例1 】
<DIV class="sotowaku">
本文をここに書く
<br>改行してもっと書く
</DIV>
|
meta宣言部分に<style>として<DIV>タグに対して sotowaku
と sen
という2つのスタイルを作っておき、【例1】ではsotowakuのスタイルを使用しています。
Tableだと<tr><td>********</tr></td>
という具合に部品で囲われた中に文字を書きますが、スタイル枠ではスタイルの宣言だけで枠ができてしまい、下に書いた文字が枠の中に入るような感じになります。
border:dashed 4pt red; という部分、つまり dashed
が点線を意味します。
margin:3em; この em という単位はアルファベットの大文字
M の高さが 1emになるんだそうです。
【例2】
<DIV class="sotowaku" style="border-color:green;">
<DIV class="sen" style="border-color:red;">
<DIV class="sen" style="border-color:black;">
<br><b><FONT color="red" size=+2>1段目</FONT></b>
</DIV>
<br>2段目
</DIV>
<br>
３段目<hr>普通の水平線と
<br>４段目
</DIV>
|
これはちょっと複雑な使い方になりますが、Tableではないので表のセルの枠線を使うような事はできません。
もし使うとすれば<hr>で水平線を使う事になりますがこれでは点線は引けません。
そこで sen として宣言したスタイルを使用するのですが、見て分かる通り入れ子状態に使うわけですがその順番に注目して下さい。
枠
2番目の線（赤）
1番目の線（黒）
1段目の文字
2段目の文字
という妙な順番になります。
3番目の線は参考として<hr>で書いてみました。
【 例3 】
|
TDにdashedを仕込んだセル
|
となり普通のセル |
<TABLE border="0" cellpadding="10">
<TR>
<TD STYLE="border-style:dashed; border-color:#ff0000; border-width:4px;">
TDにdashedを仕込んだセル
</TD>
<TD>となり普通のセル</TD>
</TR>
</TABLE>
|
これはテーブルの枠線に直接スタイルを設定した例で、この場合はTDに使っているので隣のセルは枠線なしです。(NNでは働きません)
【 例4 】
DIV Styleで
直接設定
した例
<div style="border-style:dashed;
border-width:4pt;
width:240;
padding:1.5em;
margin:1em;
border-color:#0000ff;">
DIV Styleで<br>直接設定<br>した例
</div>
|
これは htmの冒頭でスタイル宣言をしないで任意の場所でDIVタグにいきなりスタイル文を記述してしまう例です。
直接的で簡単な方法ですが1行に書くと分かりにくいのでこのように改行しながら書くと分かりやすくなります。
【 例5 】
省略形style
枠の色・太さ・形状
いっぺんに書く
<DIV style="border: #00ff00 2pt dashed; width:240;">
省略形style<br>枠の色・太さ・形状<br>いっぺんに書く
</div>
|
これは4のインラインスタイルシートと同じですが、枠スタイルの色・巾・形状 をいっぺんに書いてしまうやり方で非常に簡単に設定する事ができます。(冒頭説明用画像ではwidthを設定していないので100％巾になっている)
このように点線枠は目新しいという点で使う価値ありますが、Ieでも5.5からの適用になり、ブラウザーによっては点線にならない、center が効かないなどという点で見え方が違ってしまうような事も起こります。
しかし、文字が全く見えなくなるというような不都合は生じないようなので「使っても良い部類」に入ると思いますが、個人ページのみにとどめ会社などの公式ページでは使わない方が無難でしょうね！
|
もどる
