2007年02月23日
【Firefox】Captioon要素内でインライン要素をつかうと・・・
今年も思わぬところで悩まなければいけなくなりそうだ・・・。
現在やっている案件で、caption要素の文章中にインラインを入れて「注釈」的表現にしなければいけないのだが、em要素やspan要素を入れた途端Firefox上では浮いてしまった。
つまり、caption要素ないでインライン要素を使うと幅が保てず文字が重なってしまう現象が起きてしまった。
バグなんだろうか・・・。
迂闊にblock要素を指定することもできないので、ひとまず今回はcaption内のインライン要素（今回はem要素）に対してだけ注釈的文字分のpaddingを与えて広げるしか方法が分からなかった。
IEやOperaなどでは、インライン入れても問題ないので調整も厄介になりそうだ。
ネット上を彷徨ってみたけども、解決策になりそうな情報もないですよ。
誰か解決策知らないですかね・・・。（汗）
去年の今頃はCSSレイアウトサイトの印刷制御に前途多難でしたが、今回はコレですか・・・ orz
【追記：2007.02.23】
昨晩、結局ずっと悩む結果に・・・
最終的には、Mozilla系を無理くり表示できるようにするためにcaption要素内のインラインに対して、今回必要なだけのpadding-leftの数値で広げてみた。（苦肉の策）
ちなみに、インライン要素の右側はちゃんとなってるのでpadding-leftだけで何とかなる。
ただ、これをするとIE7も普通に適用してしまう。IE7専用のCSSハックを用いても、Operaが回避できない。
#IE6以前は、コンディショナルコメントをつかってるからそっちて調整すれば問題なし・・・（以前の記事より）
さて、問題のOpera用向けをどうするか・・・、ということで調べてみたところ、Opera9に対してにはCSSを特別に当てられそうな情報がちらほら。
私の環境でやってみたところ、
caption em{
padding-left: 27px;
text-align: left;
}
*+html caption em {padding:0;} /* IE7 only */
html:first-child caption em{padding:0;} /* Opera9 only */
と、*+html ～ と html:first-child ～ ってーのを組み合わせると、Opera9だけにもCSSが反応してくれた。
あまり良ろしくないハックだとは思うけど、やらねばならない状況はこれでどーにか・・・
投稿者 Manabu : 04:21 | コメント (0) | トラックバック
2007年02月22日
【JS】HoverLightbox Redux
改良版"Suckerfish HoverLightbox"が登場したそうです。
簡単に英語を読んでみると、以前あった"Suckerfish HoverLightbox "をつかって更に改良を加えたモノのようです。
» Suckerfish HoverLightbox Redux - Monday By Noon
Lightboxと記述されている通り、画像の見せ方そのものはLightboxですが、着目するのはそこではなくてサムネイル一覧の見せ方側です。
元のSuckerfish HoverLightboxをCSSでもう少しナビゲーションっぽくあしらっています。
(X)HTMLは、通常の<li>要素内に<img>要素を<a>で囲むシンプルなソース。
ギャラリーが複数ある場合は、<ul>要素の入れ子になります。
<div id="gallery">
<ul>
<li id="first"><a>Vacation Gallery1</a>
<ul>
<li class="overview">グルーピング説明文</li>
<li><a rel="lightbox[グルーピング名]" title="画像説明"><img /></a></li>
<li><a rel="lightbox[グルーピング名]" title="画像説明"><img /></a></li>
</ul>
</li>
</ul>
<ul>
<li id="first"><a>Food Pictures</a>
<ul>
<li class="overview">グルーピング説明文</li>
<li><a rel="lightbox[グルーピング名]" title="画像説明"><img /></a></li>
<li><a rel="lightbox[グルーピング名]" title="画像説明"><img /></a></li>
</ul>
</li>
</ul>
</div>
ソースの属性を一部省略しましたが、ナビゲーションの構造は<ul>要素のID="gallery"を指定してあげれば、CSSが効くようになっていて、一部画像を換装すれば"Suckerfish HoverLightbox "の見せ方もカスタマイズできるみたいです。
折りたたみなどの動きは、もちろんJavaScriptです。
画像とグルーピングの説明には、class="overview"を<li>要素に追加すればOK。
#画像の一覧と上記説明文が同じ<li>要素でよいのか・・・という疑問は、ひとまずスルーしときましょう。
意外にサムネイル一覧というのは、画像を小さくさせども場所をそれなりにとりますし、数が多くなる人なんかいんはこんなプルダウンっぽいギャラリーサムネイルもいいかもしれませんね。
例えば、イベントや旅行の写真一覧をブログのレポート上に置く場合とかに、場所とらずにギャラリーを見せられそうです。
日付ごとや場所ごとなどのグルーピングで分けてもイイ訳ですよ。
» Suckerfish HoverLightbox Redux ファイルの一式ダウンロードなどはこちら
投稿者 Manabu : 11:06 | コメント (0) | トラックバック
2007年02月16日
【ツール】URL圧縮 Firefox2検索用プラグイン
久々にツールのご紹介。
先日、mixiコミュニティでもんじゃ会を開いたのですが・・・
その際に、地図へのリンクアドレスがめちゃくちゃ長いのでURL圧縮のサービスを利用したんです。
#利用したのは、「mooo.jp」。
» URL圧縮と解析 mooo.jp
でわ、これをもっと手軽に圧縮できないものかと、Firefoxの検索窓用をつくってみたですよ。
ついでだったので、mooo.jpにも一報をいれてみたところ、好評だったのと許可がでたので、正式に公開します。
例のように「Firefox 2.0 検索プラグイン」ページにアップしましたので、そちらで追加してください。
» Firefox検索プラグイン追加ページ / KOMOREBI||blog
なぜ、このmooo.jpをつくったか・・・に関してですが、単に「”牛”がかわいかったから」という、安直な理由です。www
あとは、会員登録（無料）を行った人は、以下のサービスもあるので利用してみました。
- 圧縮するURLを任意で決められる
- アクセス解析が取れる
アクセス解析については、日付で何人がそのURLを通ったか（クリック数）・・・しか分からないのですが、メルマガなど配信している人は、クリック数って重要ですから重宝できるのではないでしょうか。
ちなみにこの検索プラグインは、無会員用の通常のランダムURL版です。
 | Firefoxの改造テクニック!―カスタマイズ&拡張機能開発ガイド 大浦 淳 by G-Tools |
投稿者 Manabu : 14:27 | コメント (0) | トラックバック
2007年02月09日
【執筆】変化の時間（トキ） ＃16 更新
ジムに行ったら、風邪引いてしまいました・・・。
身体が温まっているとことで、帰宅後に身体冷やしたのが失敗だった模様。
お陰で今日は、一日もう身体がダルくてしかたありません。
orz
それは、さておき。
月１更新のwithD『変化の時間（トキ） ＃16』が更新されました。
» 変化の時間（トキ） ＃16 | withD
最近、ネタがなくて困ってます（汗）
こんな拡張機能（アドオン）ありますよ！ってあったら教えてください。
投稿者 Manabu : 16:35 | コメント (0) | トラックバック
2007年02月07日
サイバーガーデンbiz in 大阪・名古屋
CSSniteに続いて、益子さんの(X)HTML+CSS実践講座も関西/名古屋版が開催になるそうですよ。
大阪が3月3日・4日の2日間、名古屋が3月31日・4月1日の2日間での開催で、XHTML+CSSによるWebサイト制作メソッドやテクニックを身につけるためのハンズオン形式実践セミナーだそうです。
いま、大阪方面は意欲満点な人たちが多いみたいですから、よいキッカケになりそうですね。
わたしも、2年近くデ○スケの登録スタッフ向けに(X)HTML+CSS、アクセシビリティの講義をしてますが、まだまだ「構造化」や「CSSでレイアウトする」という思考がなかなか出来ない人が多いです。
これまでテーブルレイアウト型に思考が出来てしまっている方には、CSSでレイアウト（設計）するときの発想が、根本的に違うせいなのかもしれないですね。キッカケを教えてあげると、随分変わるみたいんですが・・・
これが「ちょっと続きやってくれない？」とか「ここお願い」と簡単に引き渡せるような人材ができるまでは、いつになるでしょう。