So-net無料ブログ作成

ボーダー 2 [CSS ボーダー]

今回も前回に引き続きボーダーの
説明をさせていただきます。

今回はボーダーの要素の2番目
幅についてです。

前回のスタイル
solid double


dotted dashed


ridge groove


inset outset

この中に使いたいものがあっても
もう少し細い線や太い線がいいと
思うこともあるとおもいます。
その時に使うのがborder-widthです。
使い方はborder-width:★;
※★には太さに単位が入ります。
太さの単位には:mm(ミリメートル)、cm(センチメートル)、in(インチ)、pt(ポイント)、px(ピクセル)
thin,midium(デフォルト)、thickなどがあります。

なお
border-width:★の場合は4方をに対しての指定となり
border-width:★ ☆の場合は★が上下 ☆が左右の指定となります。
border-width:★ ☆ △の場合は、★が上 ☆が左右 △が下の指定です。
border-width:★ ☆ △ ▲の場合は順に上、右、下、左の指定です。
この指定は次の枠線の色でも同様です。



それでは要素の3番目色です。
枠線の色を決めるには
border-color:★;となります。
※★には色名または#000000~#ffffffまでの間の値です。
どの枠線に指定するかは枠線の幅と同様です。
時よ止まれ
上の枠線の指定はこのようになっています。
<span style="border-style:dotted;border-width:2px;border-color:orange;">時よ止まれ</span>


しかし、なんどもborderと打ち込むのも疲れますよね。
そんな時にはborder要素をまとめて指定することも可能です。
時よ止まれ
<span style="border:dotted 2px orange">時よ止まれ
(同じ結果が得られますが、この場合は4辺個別の設定は出来ません。
個別の設定がしたいときは、
border-top:,border-right:;border-bottom:;border-left:;を
使うことでできるのではないでしょうか。)
時よ止まれ
<span style="border-top:dashed blue 7px">時よ止まれ</span>

時よ止まれ
<span style="border-right:double gray 3px">時よ止まれ</span>

時よ止まれ
<span style="border-bottom:dotted orange 5px">時よ止まれ</span>

時よ止まれ
<span style="border-bottom:solid black thin">時よ止まれ




  
時よ止まれ(2)  コメント(0)  トラックバック(0) 

時よ止まれ 2

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

トラックバックの受付は締め切りました
URYYYYYY

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。