css
以前から使っているcssの角丸だけど、おさらいというか、Googleさんに感謝を込めて♪
ここから↓ダウンロード
Rounded corner HTML elements using CSS3
使い方デモまで用意してありとっても便利です
border-radius.htcをcssと同じフォルダに入れて、角丸の大きさを指定するだけです
これで、cssに反抗的なIEにも簡単に角丸を実装
GWの予定をたてるのが遅すぎてどこにも行けないかもしれない…むしろ行きたくない…ひきこもりたい…今日この頃です
そんな時に出会ったのが、この画像置換用css↓
Replacing the -9999px hack
今までは、
<h1>タイトルだよん</h1>
として、
h1 {
background:url(img/logo.png) no-repeat;
width:310px;
height:80px;
text-indent:-99999px;
}
なんてやってたのを、↓で、OK！
h1 {
background:url(img/logo.png) no-repeat;
width:310px;
height:80px;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
マイナス指定しないとこがすっきり♪
javascriptでなんやかんやするのもあり、cssをさわるもありですね
基本的な構造で、
<html>
<body>
<div id=”height100″></div>
</body>
</html>
だったとして、
cssはこんな感じで↓
html,body {
height: 100%;
}
#height100 {
height: 100%;
min-height: 100%;
}
body > #height100 {
height: auto;
}
ＩＥが悪いのか、わたしの好き嫌いなのか…
相変わらずＩＥに泣かされています
【ＩＥ9に有効なハック】
#kokoniID :not(:target) {
width:140px0\9;
}
【Firefox3に有効なハック】
Firefox2用を書いてFirefox3用で上書き
#kokoniID, x:-moz-any-link {
width:140px;
}
#kokoniID, x:-moz-any-link, x:default {
width:140px;
}
Web Designer Wallさんの記事より、私的に楽しかった「ページＴＯＰへ」のするするアニメーション♪
「ページＴＯＰへ」のボタンが、ページをスクロールするまでいないんです
でも、スクロールすると、ふわんと現れて、クリックして、ページの先頭に戻ったら、また消えるんです
↓
なんだか豪華なパーツです
colissさんが紹介されていました
時代は進化するのですね
A new micro clearfix hackのデモをIE6、IE7見ましたが、短いコードで、実際floatが解除されていました！バンザイ！
相変わらずＩＥ6とうまくやっていけていません
「昼は○○思いっきりcss」の、みのさんに相談したいくらいです（※大嘘番組です。そんな番組も、そんな番組に、みのもんたが出演するわけもありません）
ちょっとfloat使ったくらいで、最後の文字が二重に表示されるなんて、IEも器が小さいったら！
つまり、こんな感じ↓になるわけです
- – - – - – - – - – - – - -
IE6とは仲良くできません
せん
- – - – - – - – - – - – - -
↑
「せん」が意味不明に二重に表示されるんです
回避方法はいろいろあるようですが、コメントの記述が良くないから消しちゃえ！とか、clearを二重表記されるとこの後に書くんだ、とか
floatしている要素の幅が親要素の幅と一致しているのが良くないのらしいのですが、そんなの今更変えるのもつらかったりする時があるものです
とりあえず、
1.閉じタグの前にコメント多用
<div style="float:left;">IE6とは仲良くできません<!-- iya --><!-- ieme --><!-- yadayada --></div>
IE最後にある文字ならコメントでも複製するようなので…でも全く美しくないですねぇ
2.閉じタグの後ろに直書きclear
<div style="float:left;">IE6とは仲良くできません</div><br style="clear:both;" />
なんだかもう二重に表示されなければ何でもいい気になってしまうような…
ＩＥとはうまくやっていけないのだから、↓こう表記されてもいい気がしてくる今日この頃
- – - – - – - – - – - – - -
IE6とは仲良くできない
できない
- – - – - – - – - – - – - -
朝起きたら世界中のIE6が消えていたらどんなにかすばらしいことでしょう！
いっそのこと、アクセスしたらIE8になってしまうサイト（微妙にウィルスちっくですが…）があったらいいのに…
なんてグチったところで、IE6はなくならないから、あらゆる手段を駆使してなんとかしようとしなければいけません
有名なIE PNG Fix 2.0 Alpha 4は必需品です
もしくは、DD_belatedPNGでしょうか？
この、DD_belatedPNGはすぐれものさんで、背景画像にpngを使ったあげくに、上だの左だの繰り返しだの使えるだけでなく、jpgやgifと間違えないように認識もしてくれるようです
もちろん使い方も簡単！
ITキヲスクさんの、IE6用透過png対応策、DD_belatedPNGの使用法と注意点で、とても詳しい説明が掲載されています
さて、某サイトにて、とある修正に取り組んだ際のこと
とんでもなくtableが入れ子になったところに、近代的（？）なタグをうめこんだら、そのとんでもないtableの入れ子と複雑怪奇な設定に阻まれ、なかなか思い通りのものにならない…
それでもFirefoxは、どうにかこうにかまともなカタチに
けれどもやはりIEが、行く手を阻みました
さて、ＩＥなんです
6も7も8ですら、tableタグの前ではただのIEなのです！（←意味不明）
そこで、ＩＥ以外に発揮するハック↓
:root *> #iekirai { margin:50px; }
ばんざい！
