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

TOP > スポンサー広告 > title - 水平線に色をつけるには?応用編TOP > タグのお勉強 > title - 水平線に色をつけるには?応用編

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ

水平線に色をつけるには?応用編

水平線の見本

基礎編では色をつけても1色しかつけれなくて、飾りっけがなかったですよね。少し複雑になるけど、中の色と外の線の色を変えたりする事もできます。

ちなみにどんな感じにできるかというと、
この様にする事ができます。これも個別に色を変える事もできるし、スタイルシートを編集する事によって全ての水平線に一括で色をつける事もできます。

個別に色・太さ・種類を変える方法

前回紹介した<hr STYLE="color: #66CCFF; background-color: #66CCFF; border: 0;">のborder:に手をくわえます。borderは、枠線を決まるタグなんです。

実際に何をするのかというと、border:数値+単位(枠線の太さ)#色の値(枠線の色)solid(線の種類);と指定します。

つまり上と同じ水色の水平線をつくりたいなら、
<hr STYLE="height:10px; color:#ccff66; background-color:#ccff66; border:2px #339966 solid;">
と記入します。
さらに枠線の太さ・色・種類をもっと詳細に指定出来るので、表にしてタグを紹介したいと思います。

枠線の太さ
個別に指定する方法
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(中が浮き上がっている様に見える線)

実際に作ってみると・・・

どんな指定がしてあるのかというと、
<hr STYLE="
height: 20px;  /水平線の太さ
color: #FFA07A;    /中の背景色(IE用)
background-color: #FFA07A;  /中の背景色(NN用)
border-style: dashed ridge;  /上下が破線で左右が浮き上がり線
border-width: 3px;       /上下左右とも3pxの線の太さ
border-top-color:#0000CD;    /上の線は青色
border-left-color:#cc0066;">   /左の線は紫色
(指定していない右と下は色がない)
となっています。
ただ当てはめていくだけなので、ごちゃごちゃしてるけど簡単ですよね。

一括で全ての水平線を変える方法

基礎編の色々な水平線を簡単に使い分ける方法で紹介したやり方と全く同じなので、そちらを参考にしてやってみて下さい。


関連ページ)
水平線に色をつけるには? 基礎編
・水平線に色をつけるには?応用編
水平線に画像を使うには?


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

http://rgrg.blog61.fc2.com/tb.php/129-4d207bc0   

Template Designed by DW99

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。