応用編 その８【border】
応用編 スタイル宣言 その８ 罫線表示あれこれ【border】
いろんな罫線の前に、その７で解説していなかった補足を先にいきます。
<div style="cursor:ne-resize; width:90px;height:50px;background-color:#f8dce0; ">90×50のＢＯＸで北東方向のリサイズカーソル表示。</DIV>
赤文字の箇所ですね。
width（横幅）、height（縦幅）、background-color（背景色）の組み合わせを使うことにより<TABLE>指定を使うことなく囲みを作ることが出来ます。
ただし文字の量が多すぎると枠を越えて表示されてしまいます。
この場合スクロールバーをつけることではみ出しを回避することが出来ます。
スクロールバーのスタイルは【overflow】。hidden（スクロール無）、auto（スクロール有）で【overflow:hidden;】のように指定します。
ではいよいよ【border】の話を。
実はこのスタイル宣言のやり方を解説しようと思って始まったこの応用編だったりします。
楽天のブログの設定ページでよく見かける囲み罫。テーブルタグを使うとどうもうまくないですよね。
そこで使われているのがボーダータグなのです。
その前におさらい。margin＆paddingの指定はボーダーを中間に置いて考えるとわかりやすいと思います。
文字の外スペースが【padding】、罫線【border】、罫外のスペースが【margin】です。
まずは罫線の形容です。記入方法は以下の通り。
<既存タグ style="border:［指定スタイル］"> ～ </既存タグ>
もしくは
<既存タグ style="border-style:［指定スタイル］"> ～ </既存タグ>
【border】はスタイル・太さ・色の指定。【border-style】はスタイルの指定。
【border-color】は色の指定。
<既存タグ style="border-color:［色の指定は タグ講座その１ 参照］"> ～ </既存タグ>
【border-width】は太さの指定。
間に【top、bottom、left、right】を入れることにより上下左右個別に指定することができます。
まとめ
<div style="background:#add8e6;color:#ffffff;text-align:center;padding:3px">
文字白抜きのバックグランド塗り
</div>
<div style="border:5px dashed #add8e6;padding:20px;border-top-style:none;">
点線
</div>
<div style="border:5px dashed #add8e6;padding:20px;border-top-style:none;">
点線
</div>
応用編その２で出てきたボーダーの指定に今回のを少しプラスしてます。今まで解説してきたスタイルが宣言されてます。
色を一つにまとめることによってまるで１つのテーブル指定の様にみえませんか？
<div style="cursor:ne-resize; width:90px;height:50px;background-color:#f8dce0; ">90×50のＢＯＸで北東方向のリサイズカーソル表示。</DIV>
赤文字の箇所ですね。
width（横幅）、height（縦幅）、background-color（背景色）の組み合わせを使うことにより<TABLE>指定を使うことなく囲みを作ることが出来ます。
ただし文字の量が多すぎると枠を越えて表示されてしまいます。
90×50のＢＯＸ表示。90×50のＢＯＸ表示。
この場合スクロールバーをつけることではみ出しを回避することが出来ます。
スクロールバーのスタイルは【overflow】。hidden（スクロール無）、auto（スクロール有）で【overflow:hidden;】のように指定します。
<div style="width:150px;height:50px;background-color:#f8dce0; overflow:hidden;
"> ～ </DIV>
『hidden』指定。150×50のＢＯＸ表示。150×50のＢＯＸ表示。
<div style="width:150px;height:50px;background-color:#f8dce0; overflow:auto;
"> ～ </DIV>
『auto』指定。150×50のＢＯＸ表示。150×50のＢＯＸ表示。
ではいよいよ【border】の話を。
実はこのスタイル宣言のやり方を解説しようと思って始まったこの応用編だったりします。
楽天のブログの設定ページでよく見かける囲み罫。テーブルタグを使うとどうもうまくないですよね。
そこで使われているのがボーダータグなのです。
その前におさらい。margin＆paddingの指定はボーダーを中間に置いて考えるとわかりやすいと思います。
文字の外スペースが【padding】、罫線【border】、罫外のスペースが【margin】です。
まずは罫線の形容です。記入方法は以下の通り。
<既存タグ style="border:［指定スタイル］"> ～ </既存タグ>
もしくは
<既存タグ style="border-style:［指定スタイル］"> ～ </既存タグ>
【border】はスタイル・太さ・色の指定。【border-style】はスタイルの指定。
| ［none］ ボーダーなし。ボーダーが重なり合う場合は他の値が優先されます。初期値。 |
［hidden］ 規定の太さ。ボーダーが重なり合う場合はこの値が優先されます。 |
［solid］ 1本線で表示されます。 |
［double］ 2本線で表示されます。 |
|---|---|---|---|
|
［groove］
立体的に窪んだ線。 |
［rigde］ 立体的に隆起した線。 |
［inset］ 上と左のボーダーが暗く、下と右のボーダーが明るく表示。 |
［outset］ 上と左のボーダーが明るく、下と右のボーダーが暗く表示。 |
|
［dashed］
破線。 |
［dotted］ 点線。 |
【border-color】は色の指定。
<既存タグ style="border-color:［色の指定は タグ講座その１ 参照］"> ～ </既存タグ>
【border-width】は太さの指定。
| ［1em］ pxやemやexなどの単位。 |
［thin］ 細い。 |
［medium］ 普通。 |
［thick］ 太い。 |
間に【top、bottom、left、right】を入れることにより上下左右個別に指定することができます。
| ［border-top-width:thick］ 上だけ太い。 |
|---|
| ［border-bottom-width:thick］ 下だけ太い。 |
| ［border-left-width:thick］ 左だけ太い。 |
| ［border-right-width:thick］ 右だけ太い。 |
| ［border-top-color］ 色だけ別指定。 |
| ［border-top-style］ スタイルを一部変更。 |
| ［border-right:スタイル 太さ 色］ 部分的にスタイル・太さ・色の指定。 |
まとめ
<div style="background:#add8e6;color:#ffffff;text-align:center;padding:3px">
文字白抜きのバックグランド塗り
</div>
<div style="border:5px dashed #add8e6;padding:20px;border-top-style:none;">
点線
</div>
<div style="border:5px dashed #add8e6;padding:20px;border-top-style:none;">
点線
</div>
応用編その２で出てきたボーダーの指定に今回のを少しプラスしてます。今まで解説してきたスタイルが宣言されてます。
文字白抜きのバックグランド塗り
点線
点線
色を一つにまとめることによってまるで１つのテーブル指定の様にみえませんか？
ジャンル別一覧
人気のクチコミテーマ
-
-
- 入浴後の体重
- 2025/06/30（月）・06月「０・７増」…
- (2025-06-30 17:00:00)
-
-
-
- 聖地・神社仏閣・パワースポット
- 萬松山龍潭寺（りょうたんじ）～井伊…
- (2025-11-26 06:00:06)
-
-
-
- 今日の健康状態は？
- 静岡の理学療法士による自費リハビリ…
- (2025-11-26 17:04:05)
-
© Rakuten Group, Inc.
