リストタグの中に画像入れたけど下に隙間ができちゃったときの対処(IE6)

リストタグに画像を入れてナビゲーションバーにすることもあると思います。
※Daniel Nolan氏のImage Rollover Codeなどを利用する場合。
しかし、IE6では、画像の下に隙間が出来ちゃいます。
これは、確か画像がインライン要素で、行間をもってるからだったような・・・。
そんなときは、隙間ができちゃう画像にdisplay: block;するといいみたいです。
簡単な例は、下記の通りです。

■HTML

■CSS

NetScape7.1でbackground-position :0 bottom;に配置した背景が出ない

忘れがちなのでメモ
背景をボックスの下部に配置しようとして、下記のようなCSS書くこともあると思うんだけど、
なんでかNetscape7.1でbackground-position: 0 bottom;がダメみたい。
対応策は、0をなくして記述。忘れるなよオレ。

■Netscape7.1でうまくレンダリングしてくれない例

■対応策

SEO対策がFirefoxで簡単にできるようになる「SEO for Firefox」

これまでは、RankQuest SEO Toolbarというアドオンをインストールしてました。
けど、高機能すぎて?よく使い方わかんないし、ツールバーの面積は取るしで、あんまし使ってなかったんです。
SEO専門の方には、いいのかも知れませんが。
SEO for Firefoxをk氏に教えてもらいました。
これは、切り替えもウインドウの右下のロゴで切り替えもできるし、いいっ!
GIGAZINEの記事よりSEO対策がFirefoxで簡単にできるようになる「SEO for Firefox」

Vim7のOmni補完の候補の選択

今まで、Omni補完の候補を選択するとき、矢印キーとか使ってたんだけど、EmacsとかCocoaアプリみたいな、キーバインドが効くんだ。orz
↓:C-n
↑:C-p

HTML.vimでVimでのHTML編集が楽になる

最近、Vimが良いとの事で、使い始めたが、正直なにがいいのか?今ひとつピンと来てなかった。
前のエントリーでclosetag.vimについて書いたが、基本的な使い方がわかってなかったorz
Vim使いの人は、HTMLの編集には、HTML.vimとか使ってるんだな。
オレのVim環境は、杉山さんに作ってもらった環境なんで、HTML.vimはインストールしてあったけど、Last modified: Jan 03, 2007 ってなってたので、最新のファイルをダウンロードした。
ダウンロードしたファイルを開いて、サイトに書いてある通り、『:source %』って入力したら、自動でインストールできた。スゲ。

これで、filetypeがこのプラグインが動く状態になっていれば、HTMLの編集は、かなり楽になるはず。
ちなみに、オレの環境はfiletypeはhtmlでもxhtmlでもプラグインは機能してるみたい。
あとは、HTML.vimのヘルプテキスト見ながら、;○○っていうのを打ち込めば、タグが勝手に出て来て、その時のカーソルの位置もいい感じ。
例えば、;af って打てば、↓ここまで出て来て、カーソルは””の中間に来てる。
しかも、ショートカットの設定というか、キーのマッピングが直感的にわかりやすい。
知らなくても、これかな?って打ったら出てくるじゃん。
こりゃちょっと慣れたら、Dreamweaverより早いな。
次はCSSファイルだな。

構造のマークアップなしでフロートをクリアする方法(clearfix)

前のエントリーでクリアツールについて、書いたんですが、別の方法もあります。
構造のマークアップなしでフロートをクリアする方法
思い出してみれば、Movable Typeの3.2のデフォルトcssを見て、なんだろーなーとは思ってたw
探したら、その当時から解説してた方もいらっしゃいますね。しかもわかりやすい!
最近はIE7も気になるのですが、やっぱり同じような記事もありました。
clearfixハック
【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版]
これまた以前のエントリーで紹介したYahoo! UI Library Grids cssこのページのQuick Links:の Download:からパッケージをダウンロードしてみるとわかるのだが、build/grids/grids.cssにも似たような記述の部分もある。
しかし、clearfixもホーリーハック使ってあるし、grid.cssもdivを入れ子にしないと、マージン/パディングは無理そうだしな。
んー要は使いどころですかね。
css3では、もっと簡単になったり、便利になったりしないかなー。

葬儀に参列

親戚の葬儀に参列させてもらった。
毎度のことだが、葬儀に参列すると、人生についてのこととか、豊かさとは?とか考えさせられる。
日々大事にして生きて行かないとなー。

Yahoo! UI Library

これもg氏に教えてもらったネタ。
知ってる人は知っている、Yahoo! User Interface Library
その中で、YUI Library CSS Toolsは下記の通り。
Reset css
Fonts css
Grids css
Grids cssについての日本語の解説は、phpspot開発日誌 Yahoo!が提供するレイアウト用CSSライブラリがわかりやすかった。
Yahoo! UI Library Grids CSSを使ってページレイアウトこのページも凄くわかりやすい。

クリアツール作って使おうか

これは、Mac IEで、 clearを設定した要素の子要素では同じ方向のfloatが効かない(5.x)というバグがあるためです。
直前のフロートをクリアしたいボックスの中(子要素)でもフロートさせたい時は当然ある訳でして。そんな時に、クリアするためのツールを作って、フロートをクリアしたいボックスの次に入れてます。
以前は、brでクリアツールを作ってましたが、最近では、divの中にhrだけあるクリアツール使ってます。
これ、g氏に教えてもらった。これはCSSを切った状態でも線で仕切られて自然な場合も多いためです。
このツールのCSS
/*
clear tool
*/
.clear{
clear:both;
height:0;
visibility:hidden;
}
hr {
display:none;
}

widthを記載したボックスには、左右のボーダーとパディングは避けよう

これには、色んな理由があります。
ひとつは、古いブラウザのボックスモデルの解釈が違うため。 次に、Win IEでの 左右ボーダーとパディングを設置した要素に後続する部分がずれる(5.5/6.0)とか。
CSS3になると、ボックスサイズの算出時にボーダーまでを含めるらしいので、最近ではあまりハックを使ってない。ボックスモデルを含めたハックは最終手段と考えています。