第2回「文字を枠線でかこってみよう」

作品表示

第2回「文字を枠線でかこってみよう」

■border-styleタグ

前回の文字色をかえるのスタイルシートはどうでした？
本来なら、どのように文字色を指定するとか、スタイルシートの書式などを判りやすく説明するところから始めなければならないと思いますが、プロのウェブデザイナーになるのなら本格的にスタイルシートの勉強が必要だと思いますが、趣味としてホームページを作るのなら、とりあえずサンプルをペーストして利用して、興味があったら参考書なり、関連のサイトを見ればいいと思います。

今回は、テキストのまわりに枠線を入れるスタイルシートです。
ＨＴＭＬだけでテキストのまわりに枠線を入れたい時には、TABLEタグを使って枠線を入れてました。しかしこのようなTABLEタグの使い方は、一種の裏技で本来のTABLEタグの使い方ではないのです。なんてこと言ってますが、このページのレイアウトも実はテーブルで組んであったりします。

スタイルシートで枠線を入れる時は、border-styleタグを使用します。
このタグは、枠線のスタイルを上下左右まとめて指定する属性です。
指定する価の数によって、効果が適用される枠線の組み合わせが変わります。
以下に価の数と枠線の対応表を示します。

価の数	効果が適用される枠線
border-style:☆;	☆−上下左右
border-style:☆ ★;	☆−上下、★−左右
border-style:☆ ★ △;	☆−上、★−左右、△−下
border-style:☆ ★ △ ▲;	☆−上、★−右。△−下、▲−左
☆ ★ △ ▲・・・（１）キーワードによる指定　（２）none

指定するキーワードの種類とその説明
キーワード	枠線に適用される効果
solid	直線
double	二重線
groove	溝線
ridge	稜線
inset	セルが沈みこんだように見える枠線
outset	セルが浮き上がったように見える枠線
none	この属性の初期値です。noneを指定すると枠線は表示されません

このborder-styleに対応しているブラウザは、IE4以上、NN4以上です。
枠線関連のスタイルシートはブラウザによってはすべてのボックス属性で枠線をつけられる訳ではありません。border属性を使用する場合は、適用させるボックス属性で正常に枠線が表示されるかどうか確認した方がいいです。

なお、NN（ネットスケープ）ではborder-width、IE（インターネットエクスプロラー）ではborder-styleの指定をしないと、枠線を表示させることが出来ないです。

border-style対応タグ
タグ名	IE	NN	タグ名	IE	NN
BLOCKQUOTE	○	○	ISINDEX	○	×
BODY	○	○	LI	○	×
button	○	×	MARQUEE	○	×
CAPTION	○	×	OBJECT	○	○
CENTER	○	○	P	○	○
DD	○	×	PRE	○	○
DIV	○	○	SPAN	×	○
DL	○	○	TABLE	○	×
DT	○	×	TD	○	×
FORM	○	○	TEXTAREA	○	○
Hn	○	○	TR	○	×
IFRAME	○	×	UL	○	○
IMG	○	×

下のここからコピーという部分をコピーして貴方のホームページの書類の
<HEAD>〜</HEAD>の間にペーストしてください。

そして枠線で囲みたい文章を<p>〜</p>タグではさみます。
そうすれば、その囲んだ文章にスタイルが適用されます。

−−−ここからコピー−−
<STYLE TYPPE="text/css">

</STYLE>
−−−ここまでコピー−−−
参考：border-style1

borderにbackground-color（背景色）とwidth（枠線の横の長さ）padding
（枠線と枠内の文字との間隔）のスタイルを設定したバリエーションです。

−−−ここからコピー−−−
<STYLE TYPPE="text/css">

</STYLE>
−−−ここまでコピー−−−

参考：border-style2

作品名: 第2回「文字を枠線でかこってみよう」
登録日時: 2007/02/11(日) 00:52
分類: コピーして使えるスタイルシート

この作品のURL

THE ROAD OF WEB MASTER

目次

作品表示

第2回「文字を枠線でかこってみよう」