css
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; }
ばんざい！
なぜなら楽だから！
↑
いつも理由はコレ…
とにかく、いろいろな大人の事情で、ｃｓｓに変数を使いたい時があるんです
で、
参考にしたのがこちら↓
Embedding PHP In CSS
まず、htaccessに、「君はphpに見えるけど実はcssなんだよ」という呪文をかけてもらうために以下を記述
AddType application/x-httpd-php .css
そして、phpファイルの<head>内に、phpをスタイルシートとして読み込む記述
<link rel=”stylesheet” href=”style.php” media=”screen”>
そして、style.phpには、思い思いの変数を定義
サイトの例文では以下が書かれてました↓
<?php
/*** set the content type header ***/
header("Content-type: text/css");
/** set the paragraph color ***/
$para_color = '#0000ff';
p{
color: <?php echo $para_color; ?>;
font-weight: bold;
font-size: 1.2em;
text-align: left;
}
これで、自由自在！！！バンザイ！
※使い方はEmbedding PHP In CSSを見た方がわかりやすいです
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaa・・・</p>
↑なんて、改行の無い英字なんかがあると、せっかくwidthを指定していても、そんなの無視して
横長く表示されてしまう！
枠線とか背景とかあったりしたら、それこそ悲惨な結果に！
で、それを助けてくれる魔法の言葉がコレ
p {word-wrap: break-word;}
cssバンザイ！！
ある朝目が覚めると、世界中のIE6がなくなってたらいいのに…
さて、とんでもなく（？）機能が増えるcss3に、ＩＥが追いついてくれることを祈りつつ…（Windowsの標準をFirefoxにして欲しいな＠pc購入したら、ＩＥじゃなくてFirefoxが入ってるなんてどうでしょう？）
どうやら、css3に対応していない、IE5～8をcss3の擬似セレクタに対応させるｊｓがあるようです
You’ll need to download Robert Nyman’s DOMAssistant and my ie-css3.js and include them both in your pages tag as shown below — that’s all there is to it.
ということでどうやら、 DOMAssistant も必要とのこと
使い方は簡単 <head>～<head> に以下を書き込むだけ
<head>
<script type=”text/javascript” src=”DOMAssistantCompressed-2.7.4.js”></script>
<script type=”text/javascript” src=”ie-css3.js”></script>
</head>
ふ…（←意味不明な笑い）
結局全ての鍵はEnglishですね
今から英語を習おうかという子供たちに、「なぜ英語が必要なのか」を力説したいです
