CSSの最近のブログ記事

いつも忘れるのでメモ

※ああああああああ
　ああああああああ

↑を表現するCSS
padding-left:1em;
text-indent:-1em;

　あああああああああ
ああああああああああ

↑を表現するCSS
text-indent:1em;

※8/14なんか適当に書いてました。正しいものに更新しました。

前回の記事で、左端のボックス固定のリキッドレイアウトを作成しましたが、
おおきな間違いを犯していました。

前回の記事はこちら→http://www.tamago-tama.com/archives/2009/06/3-2.php

上記の記事で何がいけないかというと、中央のカラムをabsoluteにしたこと。
absoluteにすると絶対位置なので、下にボックスがあるともぐりこんでしまいます。
中央カラムがメインコンテンツや右端のコンテンツより縦が長い場合、
フッターが中央カラムに食い込んでしまいます。

そこで、今回また考え直してみました。

※この記事は見た目は出来ていますが、実際に使えないレイアウトでした。
ちゃんとしたリキッドレイアウトはこちら
http://www.tamago-tama.com/archives/2009/06/3-3.php

人生で可変+固定の3カラムリキッドレイアウトを組んだことがありませんでした。
時間のあるうちに試してみようと思い、調べてながら組んでみました。

珍しくサンプルを作りました。
サンプル→http://www.tamago-tama.com/demo/3karam/

今回参考にさせていただいた記事はこちらです。
3カラムで中央可変（リキッド）なレイアウト
http://blog.magical-remix.net/igalog/archives/171

全てのカラムが可変なら全ての幅をうまくパーセントで指定すればいいのですが、
今回は左端のコンテンツ部分のみ可変で、残りの右2つのカラムは固定にするという仕様。

そのようなレイアウトを使うときは、
「floatしたボックスのマージンを自身の横幅以上にマイナスするとHTMLの記述上で上に書かれているボックスに重なってしまう」という現象を利用します。

こんな状態のことです。

恥ずかしながら今までちゃんと意識していなくて、
隙間があいたら無理やり高さを固定にして逃げていたのですが、
今回しっかり原因をつきとめてみました。

そもそもimgはインライン要素で行間をもっているため、
この現象が起きてるようです。

解消方法としては、リスト内のimgに対してCSSで以下の処置をすることです。

li img {
display: block;
}

もしくは

li img {
vertical-align:　　bottom;
}

今回この現象でちょっとつまずいてしまいました。
もっと勉強しないとだめですね。

おまけ
---------------------
たまーに画像をそのままbody内に置いてしまったりしていたのですが、
厳密にいうとbody内に直接かけるのは、
・ブロックレベル要素
・script要素
・挿入・削除を示すins, del要素
以上のタイプしか認められていないそうです。

なので、画像はpなどブロック要素の子要素として置くのが正しいのです。

知ってはいるのですが、結構悩むことがおおいのです。

THE HAM　MEDIAさんのこちらの記事を参考にさせていただきました。
http://h2ham.seesaa.net/article/117579108.html

ソース上での解消方法は
「改行をなくす」「改行をコメントアウトする」
の2つですが、
上記この方法は何となく使いたくないので、
なるべく「display:inline;」を使わないようにしていました。

今回THE HAM MEDIAさんで紹介されていたもので、
これから参考にしようと思う方法を2つ抜粋させていただきます。

HTMLソースは下記。

<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>

CSSは以下。
--------------------------------------------------------
li {
display:table-cell;
*display:inline;
*zoom:1;

}
--------------------------------------------------------
IE6、IE7、IE8、Firefox2、Firefox3.0、Opera9.6、Safari、Chrome全てで隙間がなくなります。

試してみようと思います。