センタリングとwidthの関係

ある領域をセンタリングしたい場合、
{
text-align:center;
margin:0 auto;
}
とするのは便利だが、
widthで値を指定してやらないとセンタリングされない。

当たり前のことかもしれないが、最初ちょっと思いつかず、
「なんでセンタリングされる場合とされない場合があるんだろう？！」と思っていた（笑）。

メモでした。

IE5のimgにfloatでカラム落ち。。

IE6までは大丈夫なのに、IE5.5ではカラム落ちする現象が発生し、悩みました。（どうもIE7でも落ちていた様子。自分の環境のIE７はIE testerなので再現せず。。）

親ボックスのwidthに対して、左右のボックスwidthをぴったり設定しているのに落ちるから、「なんでだろう！？」と思っていました。

判明した原因は、左と右にfloatでカラムを作った際、右はdivでくくっていたのに、左は単にimgにfloat:leftを振ってやっていたことが原因と判明。

IE5だと、imgのborder:0；にしておいてやっても、何かが邪魔するようです。。
margin-left:-5px;で落ちなくなったので、4px分何かが悪さしていたようです。。

vertical-alignをimgに当てたら、いい感じに。

今までvertical-alignをtextの方に宣言していました。

が、「どうもうまく画像と文字の上下バランスを調整できないなあ。。。」と思っていて、
ふと調べたら、
imgの方に割り当てることが書かれていました。
（「スタイルシート上級テクニック」河内正紀著P140)

すると、けっこううまく調整できました。。

よかった。

改行の恐怖。。

IE６以外のブラウザだと隙間があかないのに、
なぜかIE6だと、ブロックとブロックの間に隙間が出ている、という現象に少し悩まされました。

いろいろやってわかったのは、
二つの画像を横並びに配置しているレイアウトで、
その二つのimgタグを二行に分けて書いていたことが原因となっていました。

いろいろやっていて、ふと改行を加えず、二つのimgタグを一行にまとめてやると、marginが消えました。。

どうやら、改行が半角スペースとしてレンダリングされたことにより、
指定したwidthの範囲を超えたので、
下にmarginができた様子です。

改行（＋IE6)、気をつけねば。。。

cssでロールオーバー

かつてロールオーバーって、javascriptでしか実現できないかと思っていました。
しかし、CSSでかなり簡単に実現できると知って、
実際使ってみて、かなり幸せになりました（笑）。

ロールオーバー前と後の画像を一枚でまとめるて遷移させる手法が、自分の好みです。

縦30pxのボタンなら、上下に30px+30px=60pxの一枚続きの画像に仕立て、
それを配置して、a:hoverにてbackground-positionを-30pxとかしてやるという手法で。

最初の頃、javascriptを各ページのヘッダーに自動生成して書いてくれる某ソフトを使っていたのですが、
ソースがぐちゃぐちゃになってしまい、弱っていました。

ですので、スタイルシートでロールオーバーをこんなにシンプルに実現できるのが、うれしい限りです。素晴らしや。
（もちろんjsでも外部にソースをもっていってリンクはれば見すくなりますが、その当時は知る由もなく。。）

display:inline でつくる幸せナビ

一般に、HTMLの各構成要素（ブロック）は、ドンドコと縦に積み重ねられていきます。
が、display:inlineを使うと、横に並べていけます。

これ、自分はとても嬉しくて好きです。

ul(=unordered list=連番などが振られていないリスト）タグに、 このdisplay:inlineをスタイルシートで宣言してやると、
li（=list)タグの要素君たちが横並びになってくれます。 
よくある画面上部のナビ（グローバルナビとかヘッダーナビとか言われるようですね）が、 けっこう簡単に作れて、「いい仕事するなあ、display:inline　！」とか思ったりします（笑）。

 お粗末m(_ _)m

■追記
HTMLがそもそも横文字環境で作られた代物なので、デフォルト（初期設定）は縦に積み上げられる、という設計になってるのでしょうね。
日本語や他の縦書きアジア系言語なら、横（左）に置いていくようなものになるのかな。
将来的には、webでもっと縦書きがサポートされれば、その時はinline配置がデフォルトなのかもしれない、なんて夢想しました。。

いつかはbloggerテンプレも。

bloggerを多用しているのですが、
そのうち力入れて、bloggerのテンプレを、
オリジナルで作りこみたいところです。

今はデフォルトで選べるもののままで失礼しております。。