CSS初心者のみなさん、コーディングやってますか？
わかってしまえばなんてことないCSSハックでも、初心者のうちは一晩中部屋をのた打ち回ったり・ググれどもググれども欲しかった情報が手に入らなかったり…
そんな経験をして手に入れた、どうしても困った時のコーディング対処方法を紹介しておきます。
1. サイドバーの背景をフッターまで伸ばしたいとき
こんな感じのやつです。
レベルコミュニケーション様
というかこのサイトのソースを見ればわかりますね。
ざっくりですんません。
2. インライン要素をブロック要素扱いにしたい時
「インライン要素」というのは、主としてブロックレベル要素の内容として用いられますが、それ自体は高さ・幅などを持たない要素です。
a,span,strong,sup
などのインライン要素のタグはそのまま使うと時にデザイン崩れの原因になることもあります。
そんな時はスタイルシートでブロック要素に変えてあげましょう。
解決方法はこれ！
a {
display:block;
}
これで高さや幅が得られ、デザイン崩れに対応できます！
3. 要素を中央寄せにしたい時
解決方法はこれ！
.div {
margin:auto 0;
}
IEには効かないので
text-align:center
を入れると完璧です。
つまり、、、
これが最強
.div {
margin:auto 0;
text-align:center
}
4. footerに回り込みをさせたくない時
まあたいがいこんな感じの骨組みですよね↓↓
<body>
<div id="header"><p>ヘッダー</p></div>
<div id="content">
<div id="left"><p>左部分</p></div>
<div id="main"><p>メイン</p></div>
</div>
<div id="footer"><p>フッター</p></div>
</body>
これでこのままコンテンツ入れていくと、、、
フッター部分がコンテンツを飛び越してヘッダーやサイドバーあたりに回りこんできます。
解決方法はこれ！
#contents {
overflow:hidden;
}
※親要素の背景色が下までいかないときも、、、
overflow:hiddenを指定しておくといいですよ。
CSSでお世話になっているサイト、「CSS HappyLife」さんのサイトで仕組みについて詳しく解説してくれてます。
overflow: hidden;のサンプル｜CSS HappyLife
5. 要素を半透明にして背景画像を透かしたい時
それも
IE・Firefox・Opera・Netscape・Safari
など、ほとんど全ての様々なブラウザで。
解決方法はこれ！
.div {
filter: alpha(opacity=25);
-moz-opacity:0.25;
opacity:0.25;
}
0.25となっている部分の数値で透過度を調節します。
IEに対応したコード
alpha(opacity=透明度);
100が100％となる。25％の場合は、25
Firefox・Netscapeに対応したコード
-moz-opacity:.透明度;
1.0が100％となる。25％の場合は、.25
Opera・Safariに対応したコード
opacity:透明度;
1.0が100％となる。25％の場合は、.25
6. 画像をボックスの右下とかに載せたい時のCSS
http://www.webword.jp/cssdetail/back/index5.html
7. 画像の横にあるテキストを上下中央にするCSS
http://css-happylife.com/log/css-template/000349.shtml
http://www.yomotsu.net/wp/?p=387
こちらの記事もあわせてどうぞ
