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

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

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

今週のおさらいバックナンバーはこちらから
第1号  第2号  第3号  第4号  第5号  第6号  第7号  第8号  第9号  第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-stylesolid直線
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-widththin細めの線
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-topthin #00f solid 上側の枠線をまとめて設定
border-rightmedium #00f solid   右側の枠線をまとめて設定
border-bottomthick #00f solid   下側の枠線をまとめて設定
border-left10px #00f solid 左側の枠線をまとめて設定
border3px #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文は今週のメールマガジンをお読みください。)



Copyright(C) 2002-2003 banban@scollabo.com