TD要素内でDIV要素を高さいっぱいにした時につまずいたこと

この記事はスマホから閲覧した場合、一部表示がおかしくなる箇所があります。アメーバブログの仕様のようですのでご了承ください。

こんにちは、takahiroです！

随分更新しておりませんでしたね.....ww

過去記事を見てみると最後に更新したのはなんと2013年という.....∑(ﾟДﾟ)

当時はまだ中高生だった自分ももう二十歳を過ぎた大人になってしまいました。。。

さて、ほぼ完全に更新停止したこのブログに今更なにを書くのかといいますと、

タイトルの通り、TD要素内でDIV要素を height:100%; とした時に、Chromeとそれ以外のブラウザ（IE・Firefox）でレンダリングの挙動が違うことに気が付きまして、そこで1・2時間ほど唸っていたという話です。

まあもちろん単に唸っていたのではなく解決したんですが。。。

そこで今回は個人的な忘備録も兼ねて、問題点と解決法をまとめておきたいと思います。

 

---

まず、問題となったHTML構造とCSSを示します。

HTMLソース（抜粋）

<table class="table">
    <tbody>
        <tr>
            <td>
                <div class="td1">TD要素１</div>
            </td>
            <td>
                <div class="td2">TD要素２</div>
            </td>
        </tr>
    </tbody>
</table>

スタイルシート

.table{
    height:0;
    border-collapse:collapse;
    border-spacing:0;
}

.table td{
    padding: 0;
    height:100%;
    border: solid 1px red;
}

div.td1{
    background-color:green;
    width:200px;
    height:200px;
    border: solid 3px black;
}

div.td2{
    background-color:blue;
    width:auto;
    height:100%;
    border: solid 3px black;
}

なんてことはなく、ただ２つのDIV要素をテーブルを使って並べただけです。

ただ2つ目のDIV要素については高さの指定に height:100%; を使っています。

そして、これをブラウザで表示させると、こうなります。

表示結果

#exe1 .table{ height:0; border-collapse:collapse; border-spacing:0; } #exe1 .table td{ padding: 0; height:100%; border: solid 1px red; } #exe1 div.td1{ background-color:green; width:200px; height:200px; border: solid 3px black; } #exe1 div.td2{ background-color:blue; width:auto; height:100%; border: solid 3px black;}

TD要素１

TD要素２

Chrome と Firefox、IE で表示して見比べると表示が違います。

Google Chrome（Webkit）とそれ以外のFirefox、IE等とでは、表示に差があるのです。

一応、それぞれのブラウザで表示した結果も載せておきます。

Chromeでの表示

Firefoxでの表示

Chorme だとピッタリ表示されてますが、Firefox、IEでははみ出しています。

ただそれもそのはずですね。ボーダーの太さ分高さがかさ増しされるので、この場合だと、

　高さ100% (206px) + ボーダーの太さ (3px) ×２　＝　212px

になるはずでしょうから。

Chrome だとどういうわけかぴったり表示されていますね。

あくまで憶測ですが、Chromeでは高さ100%を計算するのに１つ目のDIV要素の高さを利用しているのだと思います。

それに対してFirefoxやIEではDIV要素の高さではなく、テーブルの高さをそのまま計算に利用しているのだと思います。（あくまで憶測ですが。。。）

このままではマズイのです。以下は解決策です。

---

さて、その解決策ですが、

２つ目のTD要素に

• padding:0;
• margin:0;
• border-width:0;
• heignt:100%;

を指定したダミーのDIV要素を記述して、

その中に実際に高さいっぱいに表示したい要素を記述すればブラウザ間での表示の差異はなくすことができます。

ただ、これだけではさっきのようにボーダーとパディング分、要素がはみ出してしまいます。

そこで、２つめのDIV要素（div.td2）に box-sizing を追加で指定します。

知ってる人は知ってるかもしれませんが、box-sizing とは要素の大きさを 要素の中身 基準で計算するか、ボーダーとパディングを考慮して計算するかを決めるものです。

　content-box だと、中身の大きさを基準として、大きさを計算する。

　border-box だと、ボーダーとパディングを考慮して計算する。

となります。

ここではボーダーの高さ分はみ出しているので、下のように指定しましょう。

　box-sizing : border-box;

下に変更した後のソースを載せます。

HTMLソース（変更後）

<table class="table">
    <tbody>
        <tr>
            <td>
                <div class="td1">
                    TD要素１
                </div>
            </td>
            <td>
                <div class="dummy">
                    <div class="td2">
                        TD要素２
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

変更後のスタイルシート

.table{
    height:0;
    border-collapse:collapse;
    border-spacing:0;
}

table td{
    padding: 0;
    height:100%;
    border: solid 1px red;
}

div.td1{
    background-color:green;
    width:200px;
    height:200px;
    border: solid 3px black;
}

div.td2{
    background-color:blue;
    width:auto;
    height:100%;
    border: solid 3px black;
    box-sizing: border-box;
}

div.dummy{
    margin:0;
    padding:0;
    border-width:0;
    height:100%;
}

そうして実際に表示してみると、、、

変更後の表示結果

#exec2 .table{ height:0; border-collapse:collapse; border-spacing:0; } #exec2 .table td{ padding: 0; height:100%; border: solid 1px red; } #exec2 div.td1{ background-color:green; width:200px; height:200px; border: solid 3px black; } #exec2 div.td2{ background-color:blue; width:auto; height:100%; border: solid 3px black; box-sizing: border-box; } #exec2 div.dummy{ margin:0; padding:0; border-width:0; height:100%; }

TD要素１

TD要素２

Chromeでの表示

Firefoxでの表示

このように、ChromeでもFirefoxでも差異なく表示することができます。

それにしても、Chromeとそれ以外のブラウザとのレンダリングの挙動はどちらが正しいのでしょうか？

うーむ。。。。。

[JavaScript 解説] Hello world! と表示する

長い間更新とまってました。。。

エディター使おうとするとブラウザフリーズしたり

PC自体調子悪かったりで全然更新できなかったのです

っていうのは言い訳か（＾＾；

放置していた今回のテーマも少しばかり更新しようと思います。

JavaScript って？

"JavaScript" というのは簡単に言うと、

「ブラウザ上で動作するプログラミング言語」

です

元は、ウェブページに動きを加える目的で存在します。

例えば、

　・画像の上にマウスを重ねると画像が変化する

　・ウェブページに雪や雨を降らせる（たまにこんなページ見かけます）

　・メニューをクリックするとサブメニューがバッと出る

これらは全て JavaScript を利用して作られています。

そして、 JavaScript は実はそれ単体では動きません。

ブラウザ上なので、"HTML" というものが必要です。

（これもプログラミング言語の一種）

JavaScript は、この HTML の中に貼り付けられ、

HTML形式のファイルをブラウザで読み込むことで

実行出来ます。（多少語弊あり）

JavaScriptで簡単なプログラミング

俺のブログの右サイドにある暇つぶしコーナー　（表示されない人もいるかも(＞＜;)

あれは全部JavaScriptっていうプログラミング言語で作ってるんですが・・・。

このテーマでは、そのJavaScriptをある程度まで解説してみようと思います！。

（普通の人はそう使うものではないけど・・・）

・・・・不定期に。（忙しいからね

とりあえず次回から（ぇ

プラグイン試しに作ってみた(^.^;

文字列をレインボーカラーにするプラグインｗｗ

 

使わないなこれはｗ

 

こんな感じ↓↓

 

RAINBOW

～ソース～

<script type="text/javascript">

function Rainbow(classname, col){
 var color=new Array("red","orange","yellow","green","blue","navy","purple");
 var color_count = color.length;
 var target = document.getElementsByClassName(classname);
 var target_count = target.length;
 var str = "";
 var item;

	for(var i=0 ; i < target_count ; i++){
     item = target[i];
	 item.innerHTML = RainbowText(item.innerHTML, col);
    }

	function RainbowText(str, col){
     var str_len = str.length;
     var str_res = "";
     var i;
     var col_i = col;
     	for(i=0 ; i < str_len ; i++){
        	if(col_i >= color_count)	col_i = 0;
          str_res += '<span style="color:' + color[col_i] + ';">';
          str_res += str.charAt(i);
          str_res += '</span>';
          col_i++;
        }
     return str_res;
    }

}

 Rainbow("rainbow", 0);

</script>

↑をコピーして、

[プログを書く]→[サイドバー][プラグインの追加]→[フリープラグイン]と順にクリック。

んで貼り付け。

 

使うときは、

 

<span class="rainbow"> ～ここに好きな文字～</span>

するとこんなかんじに↓
 

～ここに好きな文字～

ちなみに、Rainbow("rainbow", 0); の最後の数字は

何番目の色から装飾し始めるかを決めるものです。

例えば、１にすると最初の文字をオレンジ色から装飾し始めます。ｗ

誰得だよこのプラグイン。。。。

Testing...

Plugin Test

kinsinaide...

testing