毎日1人に2000ポイントが当たる楽天ブログラッキーくじ
>>
人気記事ランキング
ブログを作成
楽天市場
158516
ホーム
|
日記
|
プロフィール
【フォローする】
【ログイン】
Purple town
応用編 その8【border】
ブログで使えるタグ講座入門編
|
応用編その1
|
応用編その2
|
応用編その3
|
応用編その4
|
応用編その5
|
応用編その6
|
応用編その7
|
応用編その8
|
応用編 スタイル宣言 その8 罫線表示あれこれ【border】
いろんな罫線の前に、その7で解説していなかった補足を先にいきます。
<div style="cursor:ne-resize;
width:90px;height:50px;background-color:#f8dce0;
">90×50のBOXで北東方向のリサイズカーソル表示。</DIV>
赤文字の箇所ですね。
width(横幅)、height(縦幅)、background-color(背景色)の組み合わせを使うことにより<TABLE>指定を使うことなく囲みを作ることが出来ます。
ただし文字の量が多すぎると枠を越えて表示されてしまいます。
90×50のBOX表示。90×50のBOX表示。
この場合スクロールバーをつけることではみ出しを回避することが出来ます。
スクロールバーのスタイルは【overflow】。hidden(スクロール無)、auto(スクロール有)で【overflow:hidden;】のように指定します。
<div style="width:150px;height:50px;background-color:#f8dce0;
overflow:hidden;
"> ~ </DIV>
『hidden』指定。150×50のBOX表示。150×50のBOX表示。
<div style="width:150px;height:50px;background-color:#f8dce0;
overflow:auto;
"> ~ </DIV>
『auto』指定。150×50のBOX表示。150×50のBOX表示。
ではいよいよ【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:[色の指定は
タグ講座その1
参照]"> ~ </既存タグ>
【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>
応用編その2で出てきたボーダーの指定に今回のを少しプラスしてます。今まで解説してきたスタイルが宣言されてます。
文字白抜きのバックグランド塗り
点線
点線
色を一つにまとめることによってまるで1つのテーブル指定の様にみえませんか?
ジャンル別一覧
出産・子育て
ファッション
美容・コスメ
健康・ダイエット
生活・インテリア
料理・食べ物
ドリンク・お酒
ペット
趣味・ゲーム
映画・TV
音楽
読書・コミック
旅行・海外情報
園芸
スポーツ
アウトドア・釣り
車・バイク
パソコン・家電
そのほか
すべてのジャンル
人気のクチコミテーマ
スピリチュアル・ライフ
2025年を穏やかに乗り切る鍵は、…
(2024-04-30 08:00:10)
新型コロナウイルス
新型コロナ政策による予防接種中断で…
(2024-04-28 07:43:56)
こころの健康
30年ぶりの再会
(2024-02-27 07:30:09)
© Rakuten Group, Inc.