【3/18〜】Amazon、VMwareが語る『クラウドの未来』 スラッシュドット    はてなブックマーク  Yahoo!ブックマークに登録  印刷
Webブラウザ別CSSハック＆フィルタTips
連載インデックスへ
 Webブラウザ別CSSハック＆フィルタTips（1）

IE 6で泣かないための、9つのCSSハック

有限会社タグパンダ
喜安 亮介
2009/10/8

【3】min-heightを対応させる方法

- PR -

　「min-height」をIE 6で実装する場合も「インポータントハック」を使用します。

　まず、先にモダンブラウザへの記述を書き、その下に「min-height」と同じ値を「height」に記述します。IE 6はボックスが中身に応じて拡張するため、100px以下のときは100px。それ以上のときは、その中身のサイズになります。よって、「min-height」と同じ挙動になるということです。

■ 構文

p {
    min-height:100px;
    height:auto !important;
    height:100px;
}

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>min-heightを対応させる方法</title>
 
  <style type="text/css">
 
    p {
        min-height:100px;
        height:auto !important;
        height:100px;
        background:#f00;
    }
 
  </style>
</head>
<body>
  <p>内容が100px以下のとき</p>
  <p>内容が100pxを超えるとき<br />
    min-height<br />
    min-height<br />
    min-height<br />
    min-height<br />
    min-height<br />
    min-height<br />
    min-height<br />
    min-height<br />
    min-height<br /></p>
</body>
</html>

【4】heightを100％にする方法

　親要素に対しての100％なので、ページ分の高さにするなら、<html>タグや<body>タグに対して「height:100%;」を指定する必要があります。

■ 構文

html, body{height:100%;}
 
p {
    height:100%;
}

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>heightを100％にする方法</title>
 
  <style type="text/css">
 
    html, body{height:100%;}
    p {
        height:100%;
   }
 
  </style>
</head>
<body>
  <p>height100%</p>
</body>
</html>

【5】フロート時の2倍マージンを通常に戻す方法

　IE 6では下記のように、フロートleftを指定しているものにmargin-leftを指定すると、その値が2倍になります。逆に、float:right;のものにmargin-rightを指定しても同じです。

図1　IE 6だと、マージンが2倍になる
図1　IE 6だと、マージンが2倍になる

　下記のように、対策方法は3つあります。

  1. 「display:inline;」を追記
  2. 「margin」の代わりに「padding」を使用
  3. 「* html」ハックを使い、IE 6だけ「margin」の値を半分に

　ハックを使わずmarginをpaddingに変更する必要もないので、「display:inline」を使用するのがよいと思われます。モダンブラウザでは、floatしている要素のdisplayの指定を無視するので、問題ありません。

■ 構文

p{  
    float:left;
    width:80px;
    margin-left:20px;
    display:inline;
}
p{  
    float:left;
    width:80px;
    padding-left:20px;  
}
p{  
    float:left;
    width:80px;
    margin-left:20px;  
}
 
* html p{margin-left:10px;}

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>フロート時の2倍マージンを通常に戻す方法</title>
 
  <style type="text/css">
 
    p{  
        float:left;
        width:80px;
        margin-left:20px;
        display:inline;
    }
 
  </style>
</head>
<body>
  <p>margin</p>
</body>
</html>

【6】リストの縦並びメニュー

　<a>タグに「display:block;」を指定すると、IE 6は各リストの下にスペースができてしまいます。

　下記を追記することで修正できます。

  • <li>タグに「line-height:0;」を指定
  • <a>タグに「line-height:normal;」を指定
図2　IE 6だとリストの縦並びメニューの間にスペースができる
図2　IE 6だとリストの縦並びメニューの間にスペースができる

■ 構文

ul {
    margin:0;
    padding:0;
    list-style:none;
}
 
li {line-height:0;}
 
li a {
    display:block; 
    padding:10px; 
    background:#ddd;
    line-height:normal;
}

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>リストの縦並びメニュー</title>
 
  <style type="text/css">
 
    ul {
        margin:0;
        padding:0;
        list-style:none;
    }
 
    li {line-height:0;}
 
    li a {
        display:block; 
        padding:10px; 
        background:#ddd;
        line-height:normal;
    }
 
  </style>
</head>
<body>
  <ul>
    <li><a href="#">list01</a></li>
    <li><a href="#">list02</a></li>
    <li><a href="#">list03</a></li>
  </ul>
</body>
</html>

2/3

　INDEX
Webブラウザ別CSSハック＆フィルタTips（1）　
IE 6で泣かないための、9つのCSSハック
  Page1
最も多く使われているのに……、いや、だからこそ
【1】透過PNGを表示させる方法
【2】min-width、max-widthを使いたい
Page2
【3】min-heightを対応させる方法
【4】heightを100％にする方法
【5】フロート時の2倍マージンを通常に戻す方法
【6】リストの縦並びメニュー
  Page3
【7】リサイズ時にずれる
【8】フロート時にテキストが3pxずれてしまっていた場合
【9】外側の要素にoverflow:auto;を指定していた場合
IE 6以外で使えるCSSハックも

Webブラウザ別CSSハック＆フィルタTips バックナンバー 連載インデックスへ»


「デザインハック」コーナーへ


リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

スキルアップ／キャリアアップ（JOB@IT）

＠IT Special -PR-
「いつかは壊れるサーバ」そんな故障に
迅速で安価に手軽に対応する方法とは？
New！
「特権ユーザー」の事件を防げ！
万能権限を持つユーザーの管理方法とは？
New！
仮想環境の構築とデータ保護の特効薬？！
実績と信頼性の高いパッケージで安心運用
仮想環境のバックアップもこれまでどおり
「まるごと取ってまるごと戻す」簡単運用
おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！
社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介
その数、なんと400台以上！ グループ内
サーバの「統合管理」によるメリットは？
美人!? まあまあ？ 気になる いやし系!!
PV急増で「美人時計」がとった手段とは？
進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か
運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

→＠IT Special ヘ

お勧め求人情報

キャリアアップ　〜JOB＠IT
＠IT Special -PR-
◆ 　 TomcatやJBossなどAPサーバ環境に関する
情報を集約！ “業務”用APサーバ大百科
New！
◆ 　 一気に解説！　最新のクラスタストレージ
「RAIDを超えたストレージ基準」……など
New！
◆ 　 クラウド的ユーザー体験の変化は脅威か？
仮想化技術を使いこなす運用管理術を紹介
New！

◆ 　 上司や部下、部署内メンバーとの情報共有
を“ガラッ”と変えるコラボツールとは？
New！
◆ 　 おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！
◆ 　 社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介

◆ 　 Twitterのアカウントはなぜ突破された？
メールによる新手の攻撃手法とその対策
◆ 　 もう仮想化のお試しフェイズは終わりだ！
Hyper-V 2.0が基幹システムも仮想化
◆ 　 美人!? まあまあ？ 気になる いやし系!!
PV急増で「美人時計」がとった手段とは？

◆ 　 クライアント企業から求められる人材
⇒IT技術と経営戦略を併せ持つ「戦略家」
◆ 　 .NET編集長が実践する「技術情報検索術」
サンプル・コードを簡単に探す“技”は？
◆ 　 業務効率と情報セキュリティ対策を両立！
手間なく確実に機密情報を守る方法とは？

◆ 　 進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か
◆ 　 運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

◆ 　 【CTC事例】約30の基幹システムを統合！
膨大なバッジジョブを制御した方法は？
◆ 　 仮想化すればコストは削減できるか？
仮想化に必要な「3つの視点」を解説する
◆ 　 その数、なんと400台以上！ グループ内
サーバの「統合管理」によるメリットは？

→＠IT Special ヘ