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

2005.05.25
XML
カテゴリ: 【実験中】
ボックスの構成の基本

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

ボーダー(境界線)はひとことで言えば「枠」だといえると思います。
つまりブラウザに表示されて目で見える範囲のコンテンツを囲む一番外にあるものです。
ボックス(箱)という考え方は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
となっています。



*****************************************************

なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ

ランキング



リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります)





お気に入りの記事を「いいね!」で応援しよう

Last updated  2005.05.25 14:25:56
コメント(4) | コメントを書く
[【実験中】] カテゴリの最新記事


【毎日開催】
15記事にいいね!で1ポイント
10秒滞在
いいね! -- / --
おめでとうございます!
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x
X

PR

Keyword Search

▼キーワード検索

Comments

主婦が携帯スマホで月収100万を稼ぐ方法@ 主婦が携帯スマホで月収100万を稼ぐ方法 主婦が携帯スマホで月収100万を稼ぐ方法 …
fipyaqh@ fipyaqh BanUgR &lt;a href=&quot; <small> <a hr…
krjxyqcvrh@ krjxyqcvrh kOkt2k &lt;a href=&quot; <small> <a hr…

© Rakuten Group, Inc.
X
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: