初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。このページを利用するに当たって、是非メールマガジンを購読することをお勧めします。

なお、未だ購読されていない方は こちらから登録 できます。念のため無料です。

今週のおさらいバックナンバーはこちらから
第１号  第２号  第３号  第４号  第５号  第６号  第７号  第８号  第９号  第10号
第11号  第12号  第13号  第14号  第15号  第16号  第17号  第18号  第19号  第20号
第21号  第22号  第23号  第24号  第25号  第26号  第27号  目次

プレーンテキスト版バックナンバー

今週＜第28号＞マガジンのおさらい

　　　　　　　　　　　　　　　　　 毎週金曜日配信　What's New 2002/11/22
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　今週の課題 ■ 枠線の応用

■ border

枠線を表示するスタイルシートを利用することにより、色々な表現が可能です。基本的に枠線は、ほとんどの要素にも適用でき、工夫によって印象的な枠線らしくない表現をもたらします。

今回は、その枠線の応用について詳しく解説します。

◆ 枠線の種類

スタイルシートによって枠線の種類を指定します。

分かりやすく見せるために、濃い灰色で着色しています。

border-style	solid	直線
	double	二重線
	dotted	点線
	groove	溝線
	ridge	稜線
	inset	沈んだような線
	outset	浮いたような線
	dashed	破線
	none	非表示

◆ 枠線の表示位置

枠線の表示位置を指定します。同様に、濃い灰色で着色しています。

border-top-style: solid	上側
border-right-style: dotted	右側
border-left-style: inset	左側
border-bottom-style: dashed	下側

◆ 枠線の太さ

枠線の太さを指定します。ただし、この属性だけを指定しても枠線は表示されません。

必ず、border-top-style などとともに用います。

border-top-width	thin	細めの線
	medium	普通の線
	thick	太目の線
	ピクセル単位	10ピクセルの線

◆ 枠線の色

枠線に色を指定します。ただし、border-style 属性とあわせて設定する必要があります。

指定方法は、

border-top-color: #f00 （上側のみの指定）や

border-color: #f00; border-style: dotted （上下左右の指定）など

  （残念ながら、Macintosh版 MSIEでは表示されません、あしからず。)

border-color: #f00	上下左右に赤
border-color: #f00 #009	上下に赤、と左右に青
border-color: #f00 #009 #090	上に赤、左右に青、下に緑
border-color: #f00 #009 #909 #009	上、右、下、左の順

◆ 枠線をまとめて設定する

位置を指定して、枠線の表示設定をまとめて指定します。

border-top	thin #00f solid	上側の枠線をまとめて設定
border-right	medium #00f solid	右側の枠線をまとめて設定
border-bottom	thick #00f solid	下側の枠線をまとめて設定
border-left	10px #00f solid	左側の枠線をまとめて設定
border	3px #00f double	上下左右をまとめて設定

■ 枠線の応用

上記の設定方法を踏まえて、枠線表示の応用について解説します。

◆ 見出し要素に枠線を設ける

枠線を見出しの表示のワンポイントで利用します。

h1 { border-left: 2em solid #090; border-top: thin solid #090; 
     border-bottom: thin solid #090; color: #090; font-size: large }

＜結果＞

初心者のためのホームページ作り

このままではテキストが窮屈になるので、これにパディングを設定します。

h1 { border-left: 2em solid #090; border-top: thin solid #090; 
     border-bottom: thin solid #090; color: #090; font-size: large;
     padding: 3px }

＜結果＞

初心者のためのホームページ作り

もっと変形させると、

h1 { border-left: 2em solid #090; border-top: thin solid #090; 
     border-bottom: thin solid #090; border-right: 2em solid #090;
     color: #090; font-size: large; padding: 3px; text-align: center }

初心者のためのホームページ作り

枠線の表示だけでも色々とバリエーションがあり、工夫次第で魅力的な表示が可能になります。

◆ 画像の枠を飾る

画像の周りに枠線を設定し、額縁のように見せる方法です。

img { border: 15px inset #f63 }  あるいは img { border: 15px outset #f63 }

＜結果＞

メールマガジン・サンプル   （HTML文は今週のメールマガジンをお読みください。）