テンプレートとアクセスアップのでめらら楽天日記

< 新しい記事

新着記事一覧(全372件)

過去の記事 >

2005.05.25

スタイルシート（24）

(4)

テーマ：アクセス向上(301)

カテゴリ：【実験中】

ボックスの構成の基本

スタイルシート>>基本>>ボックス>>ボーダー
////////////////////////////////////////////////////////////////////

ボーダー(境界線)はひとことで言えば「枠」だといえると思います。
つまりブラウザに表示されて目で見える範囲のコンテンツを囲む一番外にあるものです。
ボックス(箱)という考え方はHTMLタグではテーブルでなければ囲ったり枠を付けることができませんが、スタイルでは＜td＞＜tr＞などテーブルタグはもちろん＜h1＞＜h2＞･･･＜p＞＜div＞などのタグをもひとつのボックス(箱)として装飾することができるのが凄く大きな利点のひとつだと思います。

□マージンはコンテンツ要素と周りの距離を調節することが本来の役目です、色をつけたり装飾的な役割はなくあくまでも「余白」です。
□パッディングも距離の調整がわりにはなります(着色せずに幅を変える)が本来の役目は背景色や背景画像などを設定する「詰め物」になります。
□ボーダーでも距離の調整は可能ですが(着色や形式を設定せず太さを変える)本来の役目はコンテンツを装飾する「境界線＝枠」だといえます。

■border-width: ***; border-***-width: ***; 枠線の太さを指定する
■border-style: ***; border-***-style: ***; 枠線の種類を指定する
■border-color: ***; border-***-color: ***; 枠線の色を指定する
■border: ***; border-***: ***; 枠線の設定をひとまとめに行う

【ボックスのイメージとボーダーの位置】

余白（margin）

↑
↓

←→

境界（border）

↑
↓

←→

詰め物（padding）

↑
↓

←→

コンテンツ

←→

↑
↓

←→

↑
↓

←→

↑
↓

■border-width: ***; border-***-width: ***; 枠線の太さ
ボーダーの太さを指定する CSS プロパティが border-width です。四方をまとめて指定する方法と個別に指定する方法があります。

【border-widthの単位】
●三段階の値
□thin 細い線
□medium 中くらいの線

●詳細設定の場合
□length（単位数値の指定）「相対値指定の単位、em、ex、px」「絶対値指定の単位、in、cm、mm、pt、pc」

□inherit 親要素での指定を継承

【border-widthの設定方法】
1.）太さを上下左右に個別に設定することが出来ます。
□border-top-width: thin;
□border-right-width: medium;
□border-bottom-width: thick;
□border-left-width: 12px;

2.）太さをまとめて設定できます。ただし以下の4つの方法が考えられます。
□border-width: 2px; … ［上下左右］を指定
□border-width: 2px 4px; … ［上下］と［左右］を指定
□border-width: 2px 4px 6px; … ［上］と［左右］と［下］を指定
□border-width: 2px 4px 6px 8px; … ［上］と［右］と［下］と［左］を指定

【実例】

□thin細（style="border: thin dotted blue;"）

□medium中（style="border: medium dashed blue;"）

□thick太（style="border: thick solid blue;"）

■border-style: ***; border-***-style: ***; 枠線の種類を指定する
ボーダーの種類を指定する CSS プロパティが border-style です。四方をまとめて指定する方法と個別に指定する方法があります。

【border-styleの値】
□none ボーダーなし。隣接する要素で重なるボーダーが存在すればそのボーダーが表示されます。
□hidden ボーダーなし。隣接する要素で重なるボーダーが存在しても強制的に非表示になります。
□solid 実線
□dotted 点線
□dashed 破線
□double 2重線
□outset 凸
□inset 凹
□ridge 山
□groove 谷
□inherit 親要素での指定を継承

【border-styleの設定方法】
1.）種類を上下左右に個別に設定することが出来ます。
□border-top-style: solid;
□border-right-style: dotted;
□border-bottom-style: dashed;
□border-left-style: double;

2.）種類をまとめて設定できます。ただし以下の4つの方法が考えられます。
□border-style: outset; … ［上下左右］を指定
□border-style: inset ridge; … ［上下］と［左右］を指定
□border-style: solid dotted dashed; … ［上］と［左右］と［下］を指定
□border-style: double outset inset ridge; … ［上］と［右］と［下］と［左］を指定

【実例】

□none（style="border: 5px none LimeGreen;"）

□hidden（style="border: 5px hidden LimeGreen;"）

□solid 実線（style="border: 5px solid LimeGreen;"）

□dotted 点線（style="border: 5px dotted LimeGreen;"）

□dashed 破線（style="border: 5px dashed LimeGreen;"）

□double 2重線（style="border: 5px double LimeGreen;"）

□outset 凸（style="border: 5px outset LimeGreen;"）

□inset 凹（style="border: 5px inset LimeGreen;"）

□ridge 山（style="border: 5px ridge LimeGreen;"）

□groove 谷（style="border: 5px groove LimeGreen;"）

■border-color: ***; border-***-color: ***; 枠線の色を指定する
ボーダーの色を指定する CSS プロパティが border-color です。四方をまとめて指定する方法と個別に指定する方法があります。

【border-colorの値】
□ カラーコードかネームで記述します
□transparent 透明
□inherit 親要素での指定を継承する指定

【border-colorの設定方法】
1.）カラーを上下左右に個別に設定することが出来ます。
□border-top-color: red;
□border-right-color: yellow;
□border-bottom-color: green;
□border-left-color: blue;

2.）カラーをまとめて設定できます。ただし以下の4つの方法が考えられます。
□border-color: #F4A460; … ［上下左右］を指定
□border-color: #87CEEB #7B68EE; … ［上下］と［左右］を指定
□border-color: #FF69B4 #ADFF2F #FFFAF0; … ［上］と［左右］と［下］を指定
□border-color: #6495ED #FF6347 #FF4500 #90EE90; … ［上］と［右］と［下］と［左］を指定

■まとめて表示
四方が全て同じ指定値で、個別に指定する必要がなければ、省略プロパティとして、'border' が使えます
（border: 幅種類色;）
□border: 10px solid red;

四方それぞれに幅種類色をまとめて指定もできます。
（border-指定箇所: 幅種類色;）
□border-top: 1px solid red;
□border-right: 1em solid #c00;
□border-bottom: 1px solid blue;
□border-left: 2em double maroon;

▲直接指定の記述方法
三つの指定「幅、種類、色」をそれぞれ上下左右に個別に設定すると合計12の指定を際限なく組合すことが出来ます。

<p style="border-top-width: 5px; border-right-width: 8px; border-bottom-width: 11px; border-left-width: 14px; border-top-style: solid; border-right-style: dotted; border-bottom-style: dashed; border-left-style: double; border-top-color: Red; border-right-color: Yellow; border-bottom-color: Green; border-left-color: Blue;">
このブロックのボーダー(境界線)＝枠の設定は
「太さ」 上＝5px 右＝8px 下＝11px 左＝14px
「種類」 上＝solid 右＝dotted 下＝dashed 左＝double
「色」 上＝Red 右＝Yellow 下＝Green 左＝Blue
となっています。
</p>
↓こんな感じですね（＾＾）

このブロックのボーダー(境界線)＝枠の設定は
「太さ」 上＝5px 右＝8px 下＝11px 左＝14px
「種類」 上＝solid 右＝dotted 下＝dashed 左＝double
「色」 上＝Red 右＝Yellow 下＝Green 左＝Blue
となっています。