スタイルシートの達人を目指してCSS

テクニック

Blog デザインを ス マ ー ト にかっとばそう！
第6回

ブラウザーの違いにハックで対処

by スタイルシート・スタイルブック
http://www.stylesheet-stylebook.com/

みなさんはきちんとソフトウェアアップデートをして最新のブラウザーを使っています

主宰者の執筆したCSSの書籍『スタイルシート・スタイルブック』（翔泳社刊）の発売と同時にオープンした、CSSをみんなで楽しく学べるコミュニティーサイト。CSSのテクニックだけでなく、CSSにまつわる最新情報も随時更新しています。
また、情報交換広場にもたくさんのCSS関連のサイトのリンク集が用意されているので、ぜひそちらもチェックしてみてください。

か？ セキュリティーのためにも最新ブラウザーを使うことをお勧めしますが、それでもさまざまな事情でアップデートしていない方もいることでしょう。スタイルシート・ス
タイルブックのサイトでも約 6パーセントのユーザーが IE 5.xを使っていますが、そういったユーザーに対して自分の都合でアップデートを強要することはできません。
CSSは古いブラウザーと新しいブラウザーでCSSの解釈が若干異なり、そのせいでレイアウトが崩れてしまうという問題が発生してしまうケースがあります。今回はその解釈の違いの一部を解説し、対処方法と実用例を紹介していきたいと思います。

今月のイケてるCSSデザインサイト

1

個性的なナビゲーションでも使いやすく
Playground Blues2

カッコいいデザインをたくさん見てセンスや技を学ぶのが、デザイン力アップの第一歩！

アイコンを効果的に
OOO H3KM
http://www.kromaizol.ru/

http://playgroundblues.com/

ミズーリ州でデザイナーをしているNathan Borrorさん

紙パイプを生産しているロシアの企業のサイト。CSSサイのサイト。左側に並んでいる4本のカラーコードがナビゲー

トではブロックを積み重ねたようなサイトが多く見られますが、ションになっています。一見すると丸が並んでいるだけでわ丸みのある装飾をほどこしたり、画像の切り抜きを工夫したかり難く感じますが、マウスオーバーすればメニューが表示りしてひと味違った作りになっています。上部にあるナビゲされ、色によってコンテンツやレイアウトもカテゴリー分けーションもCSSをオフにすると普通の<ul>リストになっていされているので非常にわかりやすいです。CSSをオフにすたり、画像とテキストの重ね方も工夫が凝らされていたりと、るときちんとテキストで表示されるようにもなっています。

新しい発見が随所に見られるサイトかもしれません。

ナビゲーションだけでなく、丸みを活かした全体のデザインも参考になります。

企業イメージの紙ロールの画像を使ったナビ
ゲーションもCSSで作られています。

イケイケデザイン＆テクニック募集中
あなたのイケてるブログサイトやCSSテクニックを募集しています。
「いいデザインができたかも」と思ったら、ガンガン応募してください。イケてるデザインやテクニックは、このコーナーで紹介します。みんなで参考にし合っておもしろいサイト作りましょう！ 応募先：im-ikeike-css@impress.co.jp（スタイルシート・スタイルブックのサイトでも募集しているよ）

120 +++ iNTERNET magazine 2004.10 +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

ブラウザーによって違う幅で表示される原因を知る
1

widthの解釈の違い

by 長谷川恭久

自分のメインブラウザーではうまく表示さIE5.x

れているのに、別のブラウザーで確認す
ると、サイドバーが下にずれ込んでしまう、意図しない部分が重なって表示されるな
ど、レイアウトが崩れてしまう経験をした人は 少 なくないでしょう。画 面のように、HTMLもCSSも同じものを使っていても、IE 5.xのほうが横幅が狭くなってしまいま

IE6

す。ブラウザーごとの解釈の違いも理解しなければいけませんが、その前に、レイアウトを組むときCSSがどのように横幅を解釈 しているかを理解しておきましょう。

目盛りはピクセル単位での大きさを見るために背景に設定したもの。左がIE 5.xでの表示、右がIE 6での表示。同じwidth設定でも表示される幅が違いますね。

HTMLCSS#box{<div id="box">Éミコちゃんも僕と同様、日本の夏にビックリしbackground: #efefef;ているみたいです……</div>

border: 5px solid #000;
padding: 20px;
width: 400px;}

C S S

テ ク ニ ッ クのキ モ

横幅を指定する「width」プロパティー

ティーの数値はコンテンツエリアの横幅が どの横幅 を指しているかを知っておを指します。つまり、今回の CSS 指定できましょう。

モダンブラウザーの解釈

ウィンドウズ版IE5.Xの解釈

Width

Widthは表のようになり、まったく同じCSSでもウィンドウズ版IE 5.xでの「width」プロ50ピクセルの誤差が生じるのです。

パティーは、文章が書かれているコンテ

ちなみに「margin」プロパティーは新旧ンツエリア、枠線（border）、コンテンツとブラウザーともに同じように解釈されま枠線の間の詰め（padding）の3つの部分す。
paddingの合計を指します。
それに対してモダンブラウザー（IE 6、Mozilla、Opera 7.0以上、Mac版IE 5.0
以上、Safari など）では、「width」プロパ

border padding

border

全体の幅

コンテンツエリア

border

ウィンドウズ版IE 5.x400（width）

350

5×2

20×2

モダンブラウザー

450400（width）

5×2

20×2

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&Dpadding+++ iNTERNET magazine 2004.10 +++121どのブラウザーでも意図した横幅で表示させる
2

ハックでwidthをブラウザーごとに複数定義

by 長谷川恭久

前ページの解説で、ブラウザーによってBefore「width」プロパティーの解釈の仕方が異なることを解説しました。では、ブラウザーが変わっても表示が変わらないようにするには、具体的にどうすればいいのでしょAfter

うか。JavaScriptなどを使ってブラウザーの種類を判定して異なるCSSを読み込ませるという方法もありますが、それではあまりスマートではなく、この連載のテーマの1つである「お手軽」というコンセプトに反してしまいます。そこで、ブラウザーの挙動の違いを利用する「ハック」の手法を使います。ハックといってもいろいろな方法

1つ の CSSで、IE 5.x
でもモダンブラウザーでも、意図した横幅で同様に表示されるようにできます。
画面は IE 5.xでの表示です（121ページの画面も参照）。

HT

Mがあるのですが、今回はお手軽そうなのを1つ紹介したいと思います。

LCSS

#box{
<div id="box">Éミコちゃんも僕と同様、日本の夏にビックリしbackground: #efefef;ているみたいです……</div>

border: 5px solid #000;
padding: 20px;
width: 450px;
w\idth: 400px;}

C S S

テ ク ニ ッ ク

IE 5.xとモダンブラウザーでwidthの解釈がの

キ モ

IE 5.xのような古いブラウザーは、このようしましたが、対応する古いブラウザーの数を違うのならば、それぞれに適したwidthの値をにプロパティー名に「¥」が入っていると正しく増やすと、その分だけハックのやり方も複雑読み込ませればいいのです。ここで紹介する認識できないので、「w¥idth」の行は無視してになることになります。ハックはやはり正攻法

ハックはAndrew Clover氏が編み出した方法

最初の「width: 450px」を採用します。というわけではありませんので、あまりオススで、「¥」（円記号、文字コードによってはバックCSS では同じ CSS ファイルで同じプロパスラッシュ「\」）を使ってブラウザーごとに異なティーが2回以上指定されると後から指定されているユーザーが多い現状を切り抜けるにはる値を読ませるという方法です。

た値を使うので、「¥」があってもプロパティー必要な方法だと思います。

最初の「width」はすべてのブラウザーが理名を認識できるモダンブラウザーは、後から解できるので、ここに IE 5.x 用の値を書き込出てきた「w¥idth: 400px」を採用するのです。

みます。次の行でまたwidthプロパティーを定

今回はIE 5.xとモダンブラウザーという2グ義しますが、ここでは「w¥idth」とします。

122 +++ iNTERNET magazine 2004.10 +++メはできませんが、まだ古いブラウザーを使っもし他のハックの方法を知りたいという方は次のページを参考にしてください。
http://css-discuss.incutio.com/?page=BoxModelHack

ループに対して値を振り分けるやり方を紹介

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D「最近のエントリー」をタブ付きリストにする
3

widthの指定を工夫して各種ブラウザーに対応
Beforeby 長谷川恭久

ボックスモデルのコンセプトとハックを駆使すれば、IE 5.xのような古いブラウザAfterーでもモダンブラウザーと同じように表示させることができます。横幅が足りなかったり長過ぎたりするような問題もこれで解決するはずです。
今回はハックと一緒に最近のエントリーリストを<ul>を使って表示させてみましょう。
リストにタブのようなのを付けて1つのグループに見せられるように工夫もしてみましょう。若干複雑なレイアウトをCSS でIE 5ではデザインが崩れていたが、それもハックで解決できる。

HTM組んでもハックを使えばほとんど同じように見せることが可能です。

L<h4>最近のエントリー</h4><ul class="entry-list"><li><a href="……" title="この週末の過ごし方">この週末の過ごし方</a></li>
……
</ul>

.entry-list{
border: 1px solid #99BB8C;
font-size: 0.9em;
list-style: none;
margin: 0px;
padding: 0px;
width: 240px;}.entry-list li{ display: inline; }CSS.entry-list li a{
color: #666666;
border-bottom: 1px dotted #cccccc;
display: block;
padding: 5px 10px;
text-decoration: none;
width: 240px;
w\idth: 220px;}

h4{
background: #E1ECDE;
border-top: 1px solid #99BB8C;
border-left: 1px solid #99BB8C;
border-right: 1px solid #99BB8C;
margin: 0px;
padding: 5px 10px;
font-size: 1em;
width: 150px;
w\idth: 128px;.entry-list li a:hover{background: #F8F8EB;
border-bottom-color: #999999;
color: #333333;
}

}

C S S

テ ク ニ ッ クのキ モ

今回は HTML の構造化も考慮して「最近のすでに四方に枠線を付けているので、<h4>

マウスオーバーは文字だけでなく、リストにエントリー」という表記に見出しを表す <h4>の枠線は下側以外の三方のみに定義します。

なっている全エリアでできるようにしておきたを使い、エントリーのリストと組み合わせたレ<h4>などのヘッダータグは標準で前後に空いので、「display: block」を指定して、<li> にきを作ってしまうので、「margin: 0px」にしてお対してではなく<a> に「width」プロパティーをイアウトで表示させます。
<h4>とリストには横幅を指定しておきたい

かないと、ヘッダーとリストの間に間隔ができ定義しましょう。マウスオーバーの効果は今回ので、前ページで解説したように、それぞれモてタブのようなビジュアルが作れなくなるのでのように背景色、文字色、下枠線を変える方

ダンブラウザー用とIE 5.x 用の値を「¥」を使注意しましょう。

法がわかりやすいのですが、他の方法もいろったハックで定義しておきます。
「border」とリストは「list-style: none」を指定して、項目「padding」の値に気をつけてそれぞれ指定しに黒丸が付かないようにしておきましょう。まましょう。

た、標準では左側に空きを作るのでこちらも<h4>には枠線がありますが、.entry-listにもいろ試してみるとオリジナリティーを出せていいでしょう。

「margin: 0px」としておくことも忘れずに。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2004.10 +++123

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.