FireFox3もしくは2のみのCSSハック
Posted by admin | Filed under css, ネタ
FireFox3もしくは2のみのCSSハックが気になったのでしらべてみた。
/*FireFox以外のもの*/
.sample {
color:#ff0000;
}
/*FireFox2以降対応*/
.sample, x:-moz-read-only {
color:#00ffff;
}
/*FireFox3以降対応*/
.sample, x:-moz-broken {
color:#0000ff;
}
<p class="sample">test</p>
～ まとめ ～
【FireFox2以降のみ対応させる】
クラスとかIDとか, x:-moz-read-only {
スタイルの内容;
}
【FireFox3以降のみ対応させる】
クラスとかIDとか, x:-moz-broken {
スタイルの内容;
}
これでおっけい！
hrタグにCSS指定
Posted by admin | Filed under css
大したことじゃありません
水平線にスタイル指定するときのメモでし
hr {
background-color: red;
color: red;
border: none;
height: 3px;
}
background-color
水平線の内側の色を指定します
プロパティの指定では、水平線の内側の色を指定することになります。
そのため、水平線の枠線は表示されたままになります。
color
水平線全体の色を指定します(IEのみ)
※ここが注目ポイント
水平線の枠線を消したい場合は、border: none を指定しておきます。
しかし、IEではこの指定が無視されるようなので、IEでも枠線を表示させたくない場合には、
color プロパティも同時に指定しておきます。
参照ページ
水平線に色を付ける
Tags: css
CSSでフッターを常に底配置
Posted by admin | Filed under css
調子に乗って連発でCSSネタを
本文の内容が少なくてフッターが上にきすぎ！
どの解像度のモニターでもfooterがブラウザウインドウの一番下にくっついてほしい時！
そんなあなたに朗報。
まずはCSS側
html {
height:100%;
}
body {
height:100%;
}
#container {
position:relative;
min-height: 100%;
}
#main {
padding-bottom:10px;
}
#footer {
position:absolute;
bottom:0px;
height:30px;
width:100%;
}
そしてｈｔｍｌ側
<div id="container">
<div id="main">
<h1>CSSでフッターを常に下に配置</h1>
<p>本文はここに</p>
</div>
<div id="footer">フッターの内容をここに記述</div>
</div>
よく使う割にコピペで済ますからわすれちゃうんだよねぇ。
ソース見れば思い出すんだけどさ。
Tags: css
ＣＳＳを使った縦中央横並び
Posted by admin | Filed under css
結構頻度高いのにわすれちゃってめんどくせとか思っちゃうからメモ。
※IE5.5,6,7 firefox3確認済み
まずtableでつくるとこんな感じ
 |
ＧＫ乙！ |
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img title="mario" src="http://sopeo.pocotan.com/wp-content/uploads/2008/10/mario.gif" alt="" width="144" height="192" /></td>
<td>ＧＫ乙！</td>
</tr>
</table>
んで見た目一緒だけどＣＳＳ配置した場合がこれ
cssの部分
.centerItem {
display: table-cell;
vertical-align: middle;
/*IE用*/
>display: inline;
>zoom: 1;
}
htmlの部分
<div>
<div class="centerItem"><img title="mario" src="http://sopeo.pocotan.com/wp-content/uploads/2008/10/mario.gif" alt="" width="144" height="192" /></div>
<div class="centerItem">ＧＫ乙！</div>
</div>
これだけ。
簡単なのになぜかめんどくさーとかおもっちゃうんだよね。
※IE用の部分は「IEだけにCSSを適応させる方法」の記事を参照してね。
