‘xhtml+css’ カテゴリ内エントリ一覧
日曜日, 5月 2nd, 2010 |
ブラウザ別CSSハック
使わないに越したことはないのですが、使おうとする度に調べることが多いのでブラウザ別のCSSハック（IE6、IE7、IE8用）を覚書。世の中のすべてのブラウザがHTML5＆CSS3対応になればいいのにと夢のような事を。。。
FirefoxやSafari、Chromeはあまり必要性を感じないので、IE向けのハックで必要な物を簡潔に。たくさんありますけど、それぞれ個別に適用出来るハックが1つあればほぼ問題ないのでは？と思います。
すべてセレクタは#sample、プロパティはwidth:100%;としています。
【IE6以下に適用】
プロパティの前に”_”を付けるアンダースコアハック（invalid）
セレクタの前に”*html”を付けるスターハック（valid）
#sample{
_width:100%;
}/*アンダースコアハック */
*html #sample{
width:100%;
}/* スターハック */
【IE7のみ適用】
プロパティの前に”*:first-child+html”を付ける（valid）
プロパティの前に”*+html”を付ける（valid）
*:first-child+html #sample{
width:100%;
}
*+html #sample{
width:100%;
}
【IE8のみ適用】
未検証。要確認。なんだかかなり気持ち悪い感じ（invalid）
html>/**/body #sample{
width /*\**/:100%\9;
}
コンディショナルコメントで振り分ける
IEには条件分岐で特定のバージョンだけにスタイルシートを適用する方法があります。
あまり使ってないのですが、どこかで線引きをしてブラウザを切り捨てる事になった時に、こっちの方がさっぱりして気持ちいいかなと思います。head内で読み込みます（ファイル名とパスは適宜変更で）
【IEすべてに適用】
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
【IE以外に適用】
<!--[if !IE]>
<link rel="stylesheet" href="others.css" type="text/css" />
<![endif]-->
【IE7のみ適用】
<!--[if IE 7 ]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->
【IE6以下に適用】
<!--[if lte IE 6 ]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
”lte”の部分はcomparisonと言われる適用範囲を示す値で、lt、lte、gt、gteが指定できます。左から順に未満、以下、超、以上です。
指定した値を含まずそれ以上を表すのって「超」って言うんですね。1つ賢くなった。lteはless than equalらしいのですが、gは何の略だろうか？～より多いだとmore thanな気がするんだけど。。。ちなみにGoogle翻訳でless thanを通すと以下って出るけど、これ間違ってないか？
他にもIE7.js、IE8.js、IE9.jsを使うってのも1つの手ですね。
おまけでclearfix
floatした子要素を内包する親要素の背景が伸びない時は、overflow:hidden;ばかり使ってたのですが、印刷時に問題が出るようなので、印刷用のCSSでautoに戻すか、clearfixを使ったほうがいいかも。
clearfixの決定版を作るを参考に少し追加しました。ピリオドや空白よりいいかも。
.clearfix:after {
content:url(pixel.gif);
display:block;
clear:both;
height:0;
}
*html .clearfix{
zoom:1;
}
*:first-child+html .clearfix{
zoom:1;
}
益子 貴寛 堀内 敬子 小林 信次 千貫 りこ 伊藤 学 山田 あかね 西畑 一馬
毎日コミュニケーションズ
売り上げランキング: 2487
【 このブログ内の関連する投稿 】
Posted in xhtml+css | No Comments »
金曜日, 2月 19th, 2010 |
先日、@seltzerさんのUSTREAMを見てからすっかり zen coding に取り憑かれたボク。あ、もちろんPHP入門も素晴らしかったです（次回も楽しみにしています）
残念ながらMacユーザーじゃないので、Codaとか使えないわけですが、Windows環境でもDreamweaver CS4で使えるって事で入れてみました（他にも幾つか対応しているエディタはあります）
このページからZen Coding for Dreamweaver v0.5というバージョンのZen Coding.mxpを拾ってきて実行。そうするとEXTENSION MANAGER CS4が立ち上がるので、画面に従いインストールするだけで完了です。
早速幾つか入力。
DWは新規でhtmlやphpを作ると、設定されているドキュメントタイプのタグが入った状態になりますが、HTML5は設定が無い（どこかでEXTENSIONがあった気もする）ので
html:5
と入力してCtrl+カンマで展開するとさっと以下のようなタグが！！
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
さらにこんな感じで入力して展開すると
div#header>ul.menu>li.name$*3
<div id="header">
<ul class="menu">
<li class="name1"></li>
<li class="name2"></li>
<li class="name3"></li>
</ul>
</div>
どーん！素晴らしー！
独自の書き方は覚えなければいけないものの、直感的に分かる気がするのでなんとかなりそう。ただCSSに関しては標準の入力補完で十分かなって思いますね。
wikiっていうタブの中にタグの書き方が載ってます。
HTMLセレクタはこれ
あとlang属性がen-USが標準になっているので、以下のjsファイルの設定値を修正すればOKです。このファイルの中身を眺めてみると、展開する内容の修正も出来そうなので、head内でよく使うタグなんかは追加しておいてもいいかも。
Documents and Settings/ユーザー名/Application Data/Adobe/Dreamweaver CS4/ja_JP/Configuration/Commands/ZenCoding/zen_settings.js
WordPressであればプラグインもこちらにあります。
WP Zen-Coding
やっぱりMacを買おうかな～
Zen Coding
http://code.google.com/p/zen-coding/
【 このブログ内の関連する投稿 】
Posted in xhtml+css | 2 Comments »
月曜日, 6月 15th, 2009 |
やろうと思ったことがz-indexを利用しないとうまく出来ないなーと思いつつ、PNG画像を作ってサンプル書いてみたけど、まぁ～当然のように逝ってほしいIE6が立ちはだかる。はぁ～めんどい。
Googleが配布しているie7.jsなんかを使えば透過PNG以外にもイマドキな感じに改造してくれるけど、あまりいい印象が無いので（やたらと重かった？）、他を探してみたら簡単で使いやすそうなDD_belatedPNG.jsを見つけました。
まず配布サイトからjs（今日現在0.0.7a）を拾ってきてhead部分でIE6用に読み込みます。
<!--[if lte IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.png_img');
</script>
<![endif]-->
4行目のfix()内で要素名やid、classを指定します（ココではクラス名をpng_imgとしています）あとは該当のimgにこのクラスを指定するだけ。楽チン！
サンプルはこちら http://vayu.asia/sample/ie6png/
元画像にはクラス指定をしてないのでIE6では周囲がグレーになっていると思います。
ソースは以下のようになってます。
html
<div id="original">元画像（クラス指定なし）<br />
<a href=""><img src="img/sample.png" alt="" /></a></div>
<br />
<div id="block1">ブロック1</div>
<div id="block2">ブロック2</div>
<div id="block3">ブロック3
<a href=""><img class="png_img" src="img/sample.png" alt="" /></a>
</div>
css
#original{
background:#FFDFFB;
width:500px;
height:300px;
}
#original img{
border:none;
}
#block1{
background:#0C0;
width:500px;
height:300px;
}
#block2{
background:#FFF;
width:500px;
height:30px;
}
#block3{
background:#999;
width:500px;
height:300px;
position:relative;
z-index:1;
}
#block3 img{
position:absolute;
z-index:10;
top:-120px;
left:120px;
border:none;
}
このブログではPNG対策はしていないので、一番上の画像はグレーっぽいはずです。
【 このブログ内の関連する投稿 】
Posted in xhtml+css | No Comments »
火曜日, 2月 3rd, 2009 |
昨日に続いて若干修正。lintで一気に81点に。それなりに満足したのでしばらくはこのままいきます。
【 このブログ内の関連する投稿 】
Posted in xhtml+css | No Comments »
土曜日, 10月 11th, 2008 |
テキストリンクにマウスオーバーした時に画像やテキストをピョコっと出したいなぁ～と言う事で、スクリプトをいろいろ探したりしながら悩み探すこと数時間。割とシンプルなCSSでいい感じの物が出来たので載せておきます。
PHPSPOTさんのところで紹介してあるものを多少アレンジした物です。
以下のサンプルページのような感じになります。
CSSでツールチップのサンプルページ
IETesterで見たところ、IE5.5は不具合があるけどそれ以外は大丈夫そうです（IETesterの記事がまだ引っ越し後の整備が出来てない；；）
HTMLソース
<ul>
<li><a href="index.html" class="tooltip">テキスト<span><img src="exmple1.jpg" alt="例１" width="60" height="45" />ツールチップ内テキスト</span></a></li>
<li><a href="index.html" class="tooltip">テキスト<span><img src="exmple2.jpg" alt="例２" width="60" height="45" />ツールチップ内テキスト</span></a></li>
<li><a href="index.html" class="tooltip">テキスト<span><img src="exmple2.jpg" alt="例３" width="60" height="45" />ツールチップ内テキスト</span></a></li>
<li><a href="index.html" class="tooltip">テキスト<span>ココはテキストのみにしてみた</span></a></li>
</ul>
CSSソース
a:hover {
background:#ffffff;
text-decoration:none;
}
a.tooltip span {
display:none;
padding:5px;
margin-left:8px;
width:200px;
height:auto;
}
a.tooltip:hover span {
display:inline;
position:absolute;
background:#fffaf0;
border:3px double #a0522d;
color:#583822;
font-size:0.8em;
line-height:1.3;
}
a.tooltip:hover span img{
float:left;
border:none;
margin:0px 7px 5px 0px;
}
CSSはほとんどサイズ調整とか装飾なので必要なのは少しだけですね。スクリプト使わなくても意外とシンプルに出来るもんです。
2008/10/16追記
ロボットが隠しテキストと見なしてスパム扱いするかは不明ですので、ご注意を。ユーザビリティでした事であって、意図した隠しでなければ問題ないと思いたいです。
あと、音声ブラウザはdisplay:none;の中身を読まないみたいですが、今回みたいな指定の場合はどうなのでしょうか？その辺も不明です。
【 このブログ内の関連する投稿 】
Posted in xhtml+css | 2 Comments »
XHTML+CSSのバイブル的存在。
理解しやすい!
広く深く まとまりの無い教科書
