ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > タグのお勉強 > title - 文字の背景色を変えるには? 枠線編

文字の背景色を変えるには? 枠線編

ボックスの枠線を変える

今回は背景色の枠線を変える紹介をしたいと思います。

枠線を赤色にしました。

どのように指定したのかと言うと・・・

<div style="background-color:#ffcccc;   /背景色を指定
border-width:5px;        /枠線の太さを指定
border-color:red;        /枠線の色を指定
border-style: solid;">     /枠線の種類を指定
枠線を赤色にしました。
</div>

この様に指定しています。
この3つを指定するのが基本です。さらに枠線の色・太さ・種類を個別に細かくも指定できますので、そのタグを紹介します。

枠線の太さ
個別に指定する方法
border-top-width:数値px; 上の枠線の太さを指定
border-bottom-width:数値px; 下の枠線の太さを指定
border-left-width:数値px; 左の枠線の太さを指定
border-right-width:数値px; 右の枠線の太さを指定
一括で指定する方法
border-width: 数値px; 上下左右の全てを指定
border-width: 数値px 数値px; 上下・左右を指定
border-width: 数値px 数値px 数値px; 上・左右・下を指定
border-width: 数値px 数値px 数値px 数値px; 上・右・下・左を指定

枠線の色
個別に指定する方法
border-top-color:#色の値; 上の枠線の色を指定
border-bottom-color:#色の値; 下の枠線の色を指定
border-left-color:#色の値; 左の枠線の色を指定
border-right-color:#色の値; 右の枠線の色を指定
一括で指定する方法
border-color:#色値; 上下左右の全てを指定
border-color:#色の値 #色値; 上下・左右を指定
border-color:#色値 #色値 #色値; 上・左右・下を指定
border-color:#色値 #色値 #色値 #色値; 上・右・下・左を指定

枠線の種類
個別に指定する方法
border-top-style:種類名; 上の枠線の種類を指定
border-bottom-style:種類名; 下の枠線の種類を指定
border-left-style:種類名; 左の枠線の種類を指定
border-right-style:種類名; 右の枠線の種類を指定
一括で指定する方法
border-style:種類名; 上下左右の全てを指定
border-style:種類名 種類名; 上下・左右を指定
border-style:種類名 種類名 種類名; 上・左右・下を指定
border-style:種類名 種類名 種類名 種類名; 上・右・下・左を指定

線の種類の紹介

・solid(実線)
・double(二重線)
・dotted(点線)
・dashed(破線)
・groove(窪んでいる線)
・ridge(浮き上がっている線)
・inset(中が窪んでいる様に見える線)
・outset(中が浮き上がっている様に見える線)


ボックスの枠線を変える方法

実際に作ってみると・・・
こんな事もできてしまいます。

どうやって指定しているのか説明すると・・・
<div style="background-color: #ffcc33;     /背景色を指定
border-width:5px 10px;         /枠線の太さを上下が5px、左右が10px
border-top-color:#ff00ff;       /上の枠線の色を指定
border-right-color:#cc6633;      /右の枠線の色を指定
border-style:dotted ridge dashed; ">    /枠線の種類を上が点線、下が破線、左右が浮上線で指定
こんな事もできてしまいます。
</div>
細かく指定すれば、この様にばらばらにすることもできてしまいます。(左と下の枠線の色は指定していないので、色が付いてないです。)

でもこれだと細かく指定したい時に、タグが長くなってしまって見づらくなってしまうので良い指定方法があります。

まとめて指定
個別に指定する方法
border-top:太さ 色 種類; 上の枠線の種類をまとめて指定
border-bottom:太さ 色 種類; 下の枠線の種類をまとめて指定
border-left:太さ 色 種類; 左の枠線の種類をまとめて指定
border-right:太さ 色 種類; 右の枠線の種類をまとめて指定
一括で指定する方法
border:太さ 色 種類; 上下左右の全てをまとめて指定

実際にどのように指定するのかというと、
border-top: 3px #ffff33 dotted;
上の枠線ならこの様に指定します。指定する種類の間に半角スペースを入れるのを忘れないで下さい。

名前をつけてスタイルシートに登録して、自分の気に入った物を簡単に繰り返し使える方法を次回、紹介します。  <つづく>


関連ページ)
文字の背景色を変えるには?基礎編
文字の背景色を変えるには? 応用編
・文字の背景色を変えるには? 枠線編
文字の背景色を変えるには? 一括編


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/132-2eb32bed   

Template Designed by DW99