[IE6]ブロック芁玠を䞭倮寄せにするために、text-alignを䜿う件

ブロック芁玠を䞭倮寄せにレむアりトする堎合、巊右marginをautoに蚭定するのが正しいCSSの曞き方ですが、IE6の過去互換モヌドではこれが正しく動䜜しないのは有名です。

スクリヌンショットtext-align:centerを䜿わずに䞭倮寄せしようずするず

そこで、IEのために芪ボックスにtext-align:centerを適甚し、䞭倮寄せにするずいうバッドノりハりず呌べなくもないテクニックが圓たり前のように䜿われおいたす。

text-alignプロパティは継承されたすから、芪ボックスにtext-align:centerを蚭定した堎合、子孫ボックスではtext-align:leftず改めお蚭定しお倀を䞊曞きするこずがほずんどです。このtext-alignの䞊曞きが面倒なのはもちろんですが、意図しない子孫芁玠にたで圱響が及んでしたうので、できるならこのテクニックは䜿いたくないなヌ、ずいうのが私の考えです。そこで、text-align:centerを䜿わずになんずかしようずいうアむデアをご玹介したす。

芪ボックスが div#wrapper で幅400px、䞭倮寄せにしたい子ボックスが div#content で幅300pxずいう䟋でコヌドを考えおいきたす。次のコヌドは、text-align:centerを䜿った䞀般的なものです。

div#wrapper {
width: 400px;
text-align: center;
}
div#content {
width: 300px;
margin: 0 auto;
text-align: left;
}

これを以䞋のようにするこずで、text-align:centerを䜿わずに、同じ衚珟をするこずができたす。

div#wrapper {
width: 400px;
}
div#content {
width: 300px;
margin: 0 auto 0 50px;
}

実際に䞭倮寄せにした堎合に巊右に空くmarginを蚈算し、子ボックスの巊marginに蚭定しおやり、右marginはautoにしたす。これで、text-align:leftのたた、䞻芁なブラりザ党おで䞭倮寄せを実珟できたす。
このコヌドをIE6の互換モヌドで衚瀺したのが、次のスクリヌンショットです。実際は芋やすくするためにbackground-colorやpaddingも䜵甚しおいたす

スクリヌンショットtext-align:centerを䜿わずに䞭倮寄せ

ただし、匱点もありたす。芪ボックスが幅固定のレむアりトに限っお有効なテクニックなので、リキッドレむアりトや゚ラスティックレむアりトでは䜿えないのはもちろん、body芁玠が盎接含むボックスには䜿えないbody芁玠はりィンドりサむズによっお幅が倉わるためずいう点です。
幅固定レむアりトでは絶倧な嚁力を発揮したす。

ちょっずしたCSSのアむデアなのですが、あたり䜿っおる人芋かけないな?ず思ったのでご玹介しようず思いたした。

眮換むンラむン芁玠の瞊方向の䜍眮をborderで調敎しおみる

同じ行内にラゞオボタンもしくはちっちゃな画像ずか぀たり眮換むンラむン芁玠ずテキストが混じっおいる堎合、テキストの衚瀺される瞊方向の䜍眮がブラりザによっお結構違っおいたりしお、困りたせんかこれを調敎するには普通、ラゞオボタンにvertical-alignプロパティを指定したすよね。baseline芏定倀ずか、middleずか、bottomずか。

しかしvertical-alignプロパティで同じ倀を指定しおも、やっぱりブラりザによっお埮劙に䜍眮がズレおしたうし、ピクセル単䜍での现かい指定ができたせん。これをborderで匷匕にやっおみたした。

眮換むンラむン芁玠に瞊方向のborderを蚭定しおやるこずによっお、borderの倪さ分だけ瞊䜍眮をズラしおあげるこずができる  はずです。もちろんvertical-alignも䜵甚するずいいでしょう。
border-colorは背景色ず同じにできるのがベストですが、背景画像があったりするずアりトなのでtransparentにしたす。

以䞋、実際にやっおみたサンプルぞのリンクです。

サンプルを芋た方は既にお気づきかもしれたせんが、残念ながらすごい埮劙です。私がサンプルを衚瀺確認をしたブラりザはIE6、IE7、Firefox2、Opera9、Safari3です。

Continue reading

hasLayout問題を解決するzoom:1;の萜ずし穎

IEのヘンテコなCSS解釈の原因ず蚀われるhasLayoutプロパティ。
どうやらこのhasLayoutプロパティの倀がfalseデフォルト倀の堎合に、いろいろずたずいこずが起こるようです。IEだけfloatした芁玠呚蟺のmarginやpaddingがおかしかったり、盞察配眮/絶察配眮した芁玠がどこかに消えおしたったりする・・・ずいう経隓はcssレむアりトの際に誰もがぶ぀かる問題です。

たた、hasLayoutがTrueずFalseの芁玠が混圚しおいる堎合には、IE7のズヌム機胜を利甚した際に、隣あった芁玠が重なっおしたったりしたす。
この蟺はコリスさんのIEでのCSSのバグを回避するhasLayoutに分かりやすい説明がありたす。

このhasLayoutの問題を解決するためにzoomプロパティが利甚されるこずがありたす。zoomプロパティはIEの独自拡匵であるため、これを䜿うこず自䜓どうか、ずいう意芋もありたすがここでは觊れたせん
具䜓的には次のように、

* {
margin: 0;
padding: 0;
zoom: 1;
}

ナニバヌサルセレクタに指定したり、

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding: 0;
zoom:1;
}

などずしお、ブラりザスタむルをリセットする際に同時に指定するのが䞀般的なようです。しかし、zoom:1;をli芁玠に指定しおしたうずマヌカヌの衚瀺がおかしくなっおしたう問題がありたす。
これに察しおは

li {zoom: normal;}

ずしおzoomプロパティの倀をデフォルトに戻すこずで察凊をできるようです。

ここたでは前提で、本題はここからです。

そんなわけで実際に業務で、スタむルリセットにzoom:1;を導入しおみたのですが、さらなる萜ずし穎があるこずに気づいおしたいたした。
STOPN’ LISTENさんのclearfixに関するの蚘事をご芧いただくずお分かりになるず思うのですが・・・そうです。zoom:1;はclearfixにも䜿われるのです。

぀たり、䜕でもかんでもzoom:1;にしおしたうず、floatが意図しないずころでclearされおしたう恐れがありたす。具䜓的には次の図のような䟋で、問題が起こりたす。

図: *{zoom:1}で問題の起こるレむアりトの䟋

XHTMLのコヌド

<p><img src="/img/2007/09/16_example_img.gif" alt="画像" width="120" height="90" class="photo" /> 段萜1テキスト段萜1テキスト段萜1テキスト段萜1テキスト段萜1テキスト段萜1テキスト段萜1テキスト段萜1テキスト段萜1テキスト</p>
<p>段萜2テキスト段萜2テキスト段萜2テキスト段萜2テキスト段萜2テキスト段萜2テキスト段萜2テキスト段萜2テキスト段萜2テキスト</p>

最初の段萜に含たれおいる画像に察しおfloat:leftを指定し、本文を右偎に回りこたせおいるずいう、䜕の倉哲もないレむアりトです。回り蟌んでいる本文が途䞭で段萜分けされおいるこずがポむントです。
ここで* {zoom: 1;}を指定するず、以䞋の図のようになりたす。

図: *{zoom:1}でレむアりトに問題が起こった状態の䟋

図ず同じサンプルペヌゞも甚意したしたIE6/7で芋おくださいね。

段萜分けされた途端、clearされおしたっおいるのがお分かりになるかず思いたす。これはp芁玠に察しおzoom:1;が効いおいるからです。これを回避するにはp {zoom:normal;}のようにしおデフォルトの倀を䞊曞きするしかありたせん。個人的にこれは党くナンセンスだず思うのですが・・・。

スタむルリセットの段階でzoom:1;を指定しおしたうず、そのサむトのコンテンツは党おがこの挙動になっおしたいたす。

サむトをリニュヌアルする際にzoom:1;を新たに導入する、ずいう堎合には泚意が必芁です。今たで正垞に衚瀺されおいたコンテンツが、先述の䟋のようにレむアりトが倉わっおしたうこずがあるからです。

サむトを䞀人で制䜜し運営しおいく分には、この挙動を理解した䞊で制䜜をするこずになるので、党く問題はないず思いたす。しかし、耇数人でチヌムを組んで䞀぀のサむトを制䜜・運営する堎合には状況が違いたす。
制䜜チヌム党員がこの挙動を理解するこずが必須ずなるのです。人数の倚いチヌムずもなるず、これはなかなかに簡単なこずではありたせん。

よっお、耇数人でチヌムを組んで制䜜・運営をしおいる倧芏暡サむトの制䜜においおは、スタむルリセットにzoom:1;を組み蟌むべきではない、ず蚀えたす。

ただ、やはりzoom:1;の䟿利さは捚おがたいものがありたす。idセレクタや子孫セレクタなどを䜿甚しお、特定の領域にだけ限定的に利甚する分には問題はないでしょう。

zoom:1;は䟿利ですがご利甚は蚈画的にずいうこずです。

『Web暙準の教科曞―XHTMLずCSSで぀くる“正しい”Webサむト』

写真: 『Web暙準の教科曞』 CYBER@GARDEN の益子貎寛氏が執筆した XHTML + CSS リファレンス本。2005幎7月20日、第1版第1刷発行。

仕様に埓った XHTML + CSS のコヌディング、぀たり Web 暙準的なコヌディングの倧切さを教えおくれた本曞は、コヌダヌずしおの私のバむブルずなっおいたす。

ブラりザで芋る際の芖芚的な結果からマヌクアップする芁玠を決定するのではなく、文章構造䞊劥圓である芁玠を遞択しマヌクアップしおいくずいう考え方。今の日本の Web 業界にこういった Web 暙準的な考え方を䞀般化するにあたり、本曞はその䞀翌を担っおいるず私は確信しおいたす。私はもし本曞に出䌚わなかったら、コヌダヌになっおいなかったかもしれたせん。

本曞の内容では特に CSS のリファレンスが玠晎らしく、各プロパティごずに「倀・芏定倀・適甚察象芁玠・継承するかしないか・パヌセンテヌゞ・メディア・未察応ブラりザ」ずいった項目が衚にたずめられ、分かりやすい䟋を挙げながら解説されおいたす。
XHTML の方も芁玠ごずに「曞くこずができる属性・含むこずができる芁玠」などを詳しくたずめおあったらなお良いのでは・・・ず思っおはいたすが、芁玠ごずのマヌクアップ䟋は秀逞で、非垞に参考になりたす。

600ペヌゞを越える曞籍であるだけに、私は党おのペヌゞに目を通したわけではないのですが、必芁ずなった時に必芁ずする項目だけを玢匕から匕くずいう、蟞曞的な䜿い方をしおいたす。コヌディングをする䞊で手攟せないものずなっおいたすので、䌚瀟甚ず自宅甚で2冊持っおいたりしたす。コヌダヌ必携の1冊ず蚀えるでしょう。

段組レむアりトのお玄束段組ボックスの底蟺を揃える揃っおいるように芋せる

䜿い叀されたネタで申し蚳ないのですが、自分が埩習するずいう意味も含め、CSSで段組レむアりトをする際のお玄束をたずめおみるこずにしたした。たず第䞀回は「段組ボックスの底蟺を揃える揃っおいるように芋せる」です。

以䞋の画像のような芋た目の段組を、実珟するこずを目暙ずしたす。

目暙ずする段組レむアりト図

普通に考えるず、float を䜿っお暪に䞊べたボックス各々に border を適甚したくなりたす。が、このやり方ですず各ボックスの内容量が異なる堎合、各々の高さが異なっおしたい、ボックスの底蟺が揃わなくなりたす。このように。

各段組ボックスの底蟺が揃わないの図

そこで、border を䜿わずに目暙の芋た目を実珟したす。

以䞋に瀺す方法は、䟋ずしお2カラムの段組を取り䞊げおいたすが、3カラム以䞊の段組でも同じように利甚するこずができたす。ただし、暪幅固定デザむンでのみ有効です。リキッドレむアりトや゚ラスティックレむアりトでは手法を倉えないず利甚できたせん。

たず以䞋のような画像を䜜り、スラむスを切りたす。

䜜成する画像ず、それにスラむスを切った図

緑色の郚分がスラむスず思っおください。段組䞭段の郚分を実珟するためのスラむスず、段組底蟺を実珟するためのスラむスです。わかりやすいように高さ10ピクセル皋床のスラむスにしおいたすが、実際は䞭段郚分は高さ1ピクセル、底蟺は線の倪さず同じで倧䞈倫です。

で、次のような゜ヌスを曞きたす。あくたで䞀䟋です。

XHTMLのコヌド

<div id="container">
<div class="section" id="columnAlpha">
<h2>コラムA</h2>
<p>サンプルテキストサンプルテキストサンプルテキスト...</p>
</div>
<div class="section" id="columnBeta">
<h2>コラムB</h2>
<p>サンプルテキストサンプルテキストサンプルテキスト...</p>
</div>
<p id="containerBtm">&nbsp;</p>
</div>

CSSのコヌド

div#container {background:url(䞭段郚分の画像.gif) repeat-y;}
div#columnAlpha {
float: left;
width: 162px;
border-top: 2px solid #339;
margin-right: 10px;
}
div#columnBeta {
float: left;
width: 162px;
border-top: 2px solid #339;
}
p#containerBtm {
clear: both;
height: 2px;
background: url(底蟺郚分の画像.gif) no-repeat bottom;
font-size: 2px;
line-height: 2px;
}

段組しおいるボックスには䞊蟺のみ border を指定し、芪のコンテナボックスに察しお段組䞭段郚分の画像をY軞リピヌトで指定したす。そしお、段組ボックスの盎埌に、底蟺ずなる p#containerBtm を挿入し clear:both ず、底蟺郚分の画像を背景に指定したす。height ず font-size、line-height の指定は、このボックスを底蟺画像の高さピッタリにするためのものです。

p#containerBtm にあたるものは、clear ができおか぀底蟺画像が衚瀺できれば、なんでもいいです。底蟺画像は背景ではなくお、img 芁玠で埋め蟌んでも構いたせんし。p#containerBtm 自䜓入れたくない方は、コンテナdivをもうひず぀远加しお、そちらに底蟺画像を背景で指定  clearfix を䜿う、ずいうやり方でもいいです。たた、きちんず内容を持っおいるフッタヌ的なボックスを持っおきおもいいでしょう。

以䞊のような方法で底蟺を「揃っおいるように芋せる」こずができたす。実際は揃っおないです

JavaScriptを䜿っお匷匕に揃えちゃったサむトを先日、はやしさんに教えおいただきたした。

オヌケヌズデリカ株匏䌚瀟: お匁圓

お匁圓䞀芧のずころです。なんずたあ・・・

なお、クロスブラりザな衚瀺を実珟する際に border は障害ずなる堎合がありたすので泚意が必芁です。この点は ADP: ピクセル単䜍で合わせるずころではborderを䜿わないIE7でも においおよくたずめられおいたす。

段組ボックスでは䞊蟺のみを衚珟し、芪コンテナボックスで䞭段郚分を衚珟するのがミ゜ですね。この点を抑えお工倫すれば、リキッドレむアりトや゚ラスティックレむアりトにおいおも実珟する方法はありそうです。