terkel.jp

先月あたり、CSS による画像置換テクニックの話題がにわかに盛り上がりを見せていました。その経緯について まとりさんの記事 で紹介されていますが、僕からも簡単に補足してみます。

CSS でテーブルセルに対して vertical-align: baseline を指定したときの挙動はちょっと面白いです。そのセルが属するテーブル行で vertical-align: baseline が指定されたセルのうち、テキストの最初の行のベースラインの位置がもっとも低いセルによってそのテーブル行のベースラインが決まり、セルのテキストの最初の行のベースラインがそこに合わせられます。また、これを応用して、横に並べたフォントサイズの異なる異なるボックスのベースラインを揃えることができます。

サイトをリデザインした のにともない、全体的にマークアップについても見直しているのですが、ちょっと悩んだのがホームやアーカイヴ・ページなどにある「ブログ記事の概要や抜粋のリスト」です。

およそ 2 年ぶりにこのサイトを全面的にリデザインしました。印象としてはさほど大きく変化していないと思うんですが、内部的にはけっこういじってます。細かい部分は追って別の記事にするとして、とりあえずおもな変更点などをざっとまとめてみました。

IE7 には、label 要素の for 属性に対する CSS の属性セレクタが無効になるバグがあります。

ちょっとわかりにくいタイトルになってしまいましたが、つまり Wikipedia のやつ (Fig 1) みたいに、「画像 (またはビデオなどの埋め込みコンテンツ) の下にキャプションをレイアウトするとき、キャプションが複数行にわたる場合は画像の幅に合わせて折り返したい (ただし画像の幅はバラバラ)」というのをシンプルかつ汎用的なかたちで実現する CSS を考えてみました。というか、このブログのレイアウト用にけっこう長いことあれこれ考えてたもののこれといった手が思いつかなくて放置していたんですが、上手い解決を Stack Overflow でみつけた のでパクった、という話です。

年末だからというわけでもないのですが、いつものサイト作りに使う CSS リセットについて見直してみました。今までもちょっとずつ手を入れてはいたのですが、今回はかなり大きく修正しています。というのも、Nicolas Gallagher と Jonathan Neal の両氏による normalize.css を知り、大きく影響を受けたからです。

この記事では Less & Sass Advent calendar 2011 の 16 日目として、Sass の @extend 機能について書いてみます。が、諸事情により締め切りを過ぎてからあわてて書いており、かなりとっ散らかったものになるであろうことをあらかじめお断りしておきます。