2006年 03月 19日
39 水平線を変更してみましょう③ IE only (CSS)

記事と記事の間にちょっと区切りをつけたいとき <hr> と言うタグを使います。

前回は一つの <hr> タグでしたが、今回は複数の <hr> タグを設定してみましょう
今回はIEに搭載されているfilterを使ってみましょう。(IE専用です)
  

                ↑
            標準の水平線
           
CSSの一番最後に次の文を追記します。
*前回 hrタグを設定した方は一度その設定を消して下さいね

HR.s10 {
color: #ff0000;
background-color: #ff0000;
height: 3px;
border: 0px;
filter: Alpha(opacity=100, finishopacity=0, style=1);
width: 480px;
text-align: center;
}

解説
 ①  color: #ff0000;
   ここは線の色を設定します。
 ②  background-color: #ff0000;
   ここはIE以外のブラウザ用の線の色を設定します。(IE以外は色しか設定できません)
 ③  border: 0px;
   枠の設定です。(今回は枠を使わないので0pxに)
 ④  height: 12px;
   線の太さを設定します
 ⑤filter
   filterの設定です
 ⑥  width: 500px;
   線の長さを設定します
 ⑦  text-align: center;
   線の配置場所を設定します。
   中央:center
   左  :left
   右  :right

記事投稿の仕方
  
こんな風に区切りをつけたい場所に
<hr class="s1">
  と打つだけ



HR.s10 {
color: #ff0000;
background-color: #ff0000;
height: 3px;
border: 0px;
filter: Alpha(opacity=100, finishopacity=0, style=1);
width: 480px;
text-align: center;
}


HR.s11 {
color: #ff0000;
background-color: #ff0000;
height: 3px;
border: 0px;
filter: Alpha(opacity=0, finishopacity=100, style=1);
width: 480px;
text-align: center;
}


HR.s12 {
color: #ff0000;
background-color: #ff0000;
height: 10px;
border: 0px;
filter: Alpha(opacity=100, finishopacity=0, style=2);
width: 480px;
text-align: center;
}


HR.s13 {
color: #ff0000;
background-color: #ff0000;
height: 10px;
border: 0px;
filter: Alpha(opacity=0, finishopacity=100, style=2);
width: 480px;
text-align: center;
}


HR.s14 {
color: #0000ff;
background-color: #0000ff;
height: 1px;
border: 0px;
filter: Alpha(opacity=100, finishopacity=0, style=3);
width: 480px;
text-align: center;
}



HR.s15 {
height: 5px;
border: 0px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#ffff0000, EndColorStr=#ff0000ff);
width: 480px;
text-align: center;
}


HR.s16 {
height: 7px;
border: 0px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#99ff0000, EndColorStr=#33ffff00);
width: 480px;
text-align: center;
}


HR.s17 {
color: #ff0000;
background-color: #ff0000;
height: 5px;
border: 0px;
filter: progid:DXImageTransform.Microsoft.Shadow(Color=black, Strength=2, Direction=135);
width: 480px;
text-align: center;
}


HR.s18 {
color: #ff0000;
background-color: #ff0000;
height: 2px;
border: 0px;
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#3333ff, Strength=2, Direction=180);
width: 480px;
text-align: center;
}

[PR]
by chocobopapa | 2006-03-19 23:27 | スキン編集

記事更新停止中です;;
by chocobopapa
    
since 2005.9.17
Count Down
Ranking

第10位

マイペース
SunSet Swish

第9位

Around The World
MONKEY MAJIK

第8位

恋のダウンロード
仲間由紀恵
with ダウンローズ

第7位

太陽の下
レミオロメン

第6位

Kiss Me Good-Bye
アンジェラ・アキ

第5位

Startin'/Born To Be...
浜崎あゆみ

第4位

SEXY BOY-そよ風に寄り添って-
モーニング娘。

第3位

純恋歌
湘南乃風

第2位

一剣
氷川きよし

第1位

サヤエンドウ
はだしのシンデレラボーイ
NEWS
Chocobo Style
    
以前の記事
    
カテゴリ
    
最新のトラックバック
美容
from 美容
Η(・∀・)イイ!!
from しんや
キッズコスメ
from キッズコスメ
負けても勝ち組w
from ドンパッチ
ホワイトツリー ビタフォ..
from 韓国コスメでべっぴん肌
スーヒャンスノー インテ..
from 韓国コスメでべっぴん肌
【化粧水】雪花秀 滋陰水
from 韓国コスメでべっぴん肌
韓国コスメ「雪花秀」に興..
from 韓国コスメが売れる理由
陸上 自衛隊のサイト集情報
from 陸上 自衛隊メンバー
横幅に戸惑った話 ~2年..
from ここから
    
フォロー中のブログ
    
その他のジャンル
    
ファン
    
記事ランキング
    
ブログジャンル
    
画像一覧
Copy Right Chocobo Style Since 2006