2009.01.12.
このページの一番下にフッターエリアがあります。最近のフッターは、いろいろ情報を詰め込んでいるものも多くなりましたが、このサイトではシンプルにコピーライトだけ。
スッキリ見せたいので、フッターは少し色を変えて、真ん中に簡潔なコピーライト。
この真ん中に文字を表示するというのを考えてみました。文字を特定のエリアで縦方向の中央寄せにする。
左右の中央に合わせるのは、簡単。次は上下の中央合わせ。ここで、ハテ？と行き詰まってしまった。
今まで、自分のサイトならコピーライトの文字数も行数も自分で決められるから、それに合わせて調整するのは比較的簡単でしたが、
一応フリーテーマで公開するものを作ろうと思ったら、これがなかなか難しい。
使う人によって一行なのか複数行なのかまちまちだろうから、どちらでも対応できるようにしておきたい。
さて、どうしたものか。
調べてみると、ヨモツネットというサイトの「CSS で簡単に上下中央揃えを実現する」という記事の方法が使えそうです。
要は、コピーライトを入れる要素にdisplay:table-cell;を指定することによってテーブルセルと見なす。そうするとそのセル内ではインライン要素である文章もvertical-alignを使って中央合わせが出来るようになる。なるほど、簡単。
とにかく、フッター用の標準のパターンとして考えてみた。
一行の場合
二行の場合
HTML<div class="footer-sample">
<div class="copyright-sample">コピーライトの例です。コピーライトの記号と年数、著作者名を入れます。</div>
</div>
“footer-sample”というクラス名のdivのなかに”copyright-sample”というクラス名を付けたdivを入れて、その中に実際のコピーライトを書きます。
CSSdiv.footer-sample {
background-color:#333;
height:70px;
width:500px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
div.copyright-sample {
color: #ccc;
font-size: 12px;
line-height: 1.2em;
}
フッターエリアを黒っぽく塗りつぶして、とりあえず高さは70px、幅は500px。
display:table-cell;を指定をしてフッターをテーブルセルとみなしてしまう。あとはテーブルセルとして中央寄せを設定してあげる。
一般的なブラウザーだとこれだけでOK。シンプルでスッキリ。
ところがいつものように、IEだけは、display:table-cell;に対応していない、と。
いいかげん、IEなんか使うのやめようよと言いたいのをぐっとこらえて、IE用も。
HTML<div class="footer-sample">
<!--[if IE ]>
<span class="dummy-h"></span>
<![endif]-->
<div class="copyright-sample">コピーライトの例です。コピーライトの記号と年数、著作者名を入れます。</div>
</div>
IEで開いたときだけ、”dummy-h”というクラス名を付けたspanを読み込むようにして、IEの場合はここで行数の違いを調整できるようにする。
CSSdiv.footer-sample {
background-color:#333;
height:70px;
width:500px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
div.copyright-sample {
color: #ccc;
font-size: 12px;
line-height: 1.2em;
}
*:first-child+html div.copyright-sample {
display:inline;
zoom:1;
vertical-align:middle;
}
*:first-child+html div.footer span.dummy-h {
display:inline;
zoom:1;
height:100%;
vertical-align:middle;
}
* html div.copyright-sample {
display:inline;
zoom:1;
vertical-align:middle;
}
* html div.footer span.dummy-h {
display:inline;
zoom:1;
height:100%;
vertical-align:middle;
}
*:first-child+html はIE 7用のハック。* html はIE 6用のハック。
IEには、display:table-cell; が効かないので、別の方法で同等の効果を与えています。
（これに関しては、上記のヨモツネットさんの記事がたいへん参考になります）
同時にダミー要素の span に height:100%; 高さを与えて、複数行でも対応できるように。この辺のことはネットをあっちこっちあさっていて、どこかで見た方法ですが、いろいろ試しながらやっているうちに、どこで見たのかわからなくなってしまいました。
一行の場合（IE対応版）
二行の場合（IE対応版）
IEの人もちゃんと表示されてるかな？
こんな画像を作って:beforeの中に入れて位置を調整してあげれば、
