www.retujyou.com どうにもならない劣情の種子を植え付けられたばかりに » HTML http://www.retujyou.com どうにもならない劣情の種子を植え付けられたばかりに Fri, 04 Mar 2011 09:14:27 +0000 ja hourly 1 http://wordpress.org/?v=3.0.1 IEでは hr タグの border を消せない。そもそも hr はタダの水平線だった。 http://www.retujyou.com/2007/07/20/html-hr-border-ie/ http://www.retujyou.com/2007/07/20/html-hr-border-ie/#comments Thu, 19 Jul 2007 16:00:27 +0000 rui_mashita http://www.retujyou.com/2007/07/20/html-hr-border-ie/ IE6 (Internet Explorer 6) では、線を引くブロック要素 hr タグのボーダー (border) を CSS で { border :0px none; } としても消せません。

IEでは hr タグのボーダーを消せない
参照：ヨモツネット 実験室 » hr要素をかっこよく使う

IEでは<hr>のボーダーを消せない例

このBlogのtopページでは今まで、素のhrタグで区切りの線を表示してて、新しく区切り線の画像を作ったのでhrにCSSで背景画像をつけて区切り線にしようと思ったんですが、以下の画像の様にIE6ではhrタグのborderが消えずに変な事になってしまいました。

IE6の場合
ie-hr-border

FIrefoxの場合
ie-hr-border

hr { border :0px none #000; } 

とやっても、画像の周辺にボーダーが出来てしまって、border-cololrでの色の変更もうまくいきません。

そもそも<hr>はタダの水平線だった

またIE6のバグかぁ、と思ったんですが、これはバグとゆうよりは hr タグの解釈の仕方の問題なのかもしれません。

(x)html に於ける h1 や blockquote などのタグにはそれぞれ意味があって、h1なら一番めの見出しとゆう意味、blockquoteなら引用文とゆう意味です。これは紙に書いた文字と違って、デザインや見た目などに頼らず、文章の意味を理解しやすくするためにあって、ロボットや視覚障害者を助けます。

で、僕は今まで hr タグは (x)html 言語としての意味のある”区切り”の事だと思ってた、つまり、h1 blockquote などのタグと同様にhtmlページ内における意味がタグに込められているものだと思っていたんですが、そうでは無くて、hr は見栄えのためだけのタグだったんです。

hr タグにはhtmlページに於ける”区切り”とゆう意味はなく、ただの見た目に水平線が描かれるだけの意味は全くないタグなのでした。

hr 要素はb要素やi要素などと同じく「見栄えのための要素」だという指摘を受けました。HTML4.01では非推奨要素にはなっていないものの、XHTML ではプレゼンテーションモジュール（Presentation Module）に分類されていて、「見栄え」のための要素だとのこと。HTML4.01の仕様でも、「水平線を描く」としか書かれておらず、「区切る」とは説明されていません。XHTML2.0では「区切り」を表現するために、separator要素が加わることになってるようです。

1本だけ線を引く – スタイルシートTIPS ふぁくとりー

hr はタダの水平線なので、その定義に沿ってborderを消さない (borderを消すと線じゃなくなる) とゆうIE6の解釈は、あってもいいのかもしれません。余計なお節介でもありますが。

結局僕は、<hr>をdivの空要素<div></div>に変更しました。

参考・参照

IEでは hr タグのボーダーを消せない
ヨモツネット 実験室 » hr要素をかっこよく使う

hr タグは、 XHTML ではプレゼンテーションモジュール（Presentation Module）「見栄え」のための要素
1本だけ線を引く – スタイルシートTIPS ふぁくとりー

photo by docman

]]> http://www.retujyou.com/2007/07/20/html-hr-border-ie/feed/ 0 3カラムにデザインをマイナーチェンジしました http://www.retujyou.com/2007/07/11/new-3column-webdesign/ http://www.retujyou.com/2007/07/11/new-3column-webdesign/#comments Wed, 11 Jul 2007 12:34:00 +0000 rui_mashita http://www.retujyou.com/2007/07/11/new-3column-webdesign/ 個別記事のページの中段部分（記事本文の下、フッターの上）をリキッド（可変）レイアウトの3カラムにして、デザインをマイナーチェンジしました。左から順に、コメント・トラックバック、関連記事、最近の記事って順番に並ぶようにしています。

new-design

可変３カラムを作る時の注意点

可変３カラムを作る時の注意点をいくつかあげてみます。

floatするボックスには、paddingとborderを指定してはいけない

可変３カラムを作るのfloatを多用します。その時に一番に注意すべき点がこれだと思います。

floatするボックスにpaddingとborderを指定してはいけないのは、IEバグへの対処で以下の２点の理由からです。

よってfloatするボックスにはwidthを絶対指定しなければならず、widthを指定したので、paddingとborderを指定してはいけません。

IE6 では min-width、max-widthに対応してない

リキッドレイアウトでは最大幅と最小幅が結構重要になってきますが、IE6 では min-width、max-widthに対応してないので（XML宣言すると対応しなくなるので）、使わないか、もしくは代用方法をとります。

CSSのみで対応させる（試したけど僕の環境ではうまくいかなかった。）
Lucky bag::blog: IE で min-width を指定する方法

スクリプトを使う方法
あるＳＥのつぶやき: minmax.js – IEでCSSのmax-widthなどを使えるようにするライブラリ

ブロック要素のセンタリング

margin-left: auto; margin-right: auto; を指定すると、そのボックス内のブロック要素（divなど）がセンタリングされるはずなのですが、IE6 ではそれが効きません。

しかし、text-align:center; してやると、本来は適用しないブロック要素までセンタリングするので、それで代用します。

%での幅指定とカラム落ち

ボックスをあんまりカツカツに詰めすぎるとカラムが落ちてしまいます。そうならないように、足して100%にならないようにします。

例えば左フロートはwidth:50%; なら右フロートはwidth:49%; で足して99%。

HTMLとCSSの例

新しくデザインを変更した部分は、特にたいした事をしてないリキッド（可変）レイアウトの３カラムです。記事の本文とかは900pxの固定幅のレイアウトなんだけど、新しいデザインの部分は可変レイアウトで、min-widthとmax-widthで最大最小幅を決めています。

HTMLとCSSはそれぞれこんな感じにしました。


<body>

<div id="container">

    <div id="middle">

        <div id="middle_left">
          コメント・トラックバック
        </div>

        <div id="middle_right">

            <div id="middle_right_left">
              関連記事
            </div>

            <div id="middle_right_right">
              最近の記事
            </div>

        </div><!--middle_right 閉じ-->
  
    </div><!--middle 閉じ-->

</div><!--container 閉じ-->

</body>




* {
    margin:0;
    padding:0;
}

#container{
        width:100%;  
        margin:0px auto;
        text-align:center; 
/*text-align:center;は、#middleのセンタリング*/
}

#middle {
    min-width:900px;
    max-width:1200px;
    margin:0 10px;
}

#middle_left{
    width:49%;
    float:left;
}

#middle_right{
    width:50%;
    float:right;
}

#middle_right_left {
    float:left;
    width:49%;
}

#middle_right_right {
    float:right;
    width:49%;
}

参照・参考

CSSレイアウトの定石　WinIE6バグ回避法

CSSによる段組（マルチカラム）レイアウト講座

Cascading Style Sheets, Level 2

]]> http://www.retujyou.com/2007/07/11/new-3column-webdesign/feed/ 0 IEで全ての要素に:hover擬似クラスセレクタを適応させるスクリプト http://www.retujyou.com/2007/03/20/csshoverhtc/ http://www.retujyou.com/2007/03/20/csshoverhtc/#comments Tue, 20 Mar 2007 10:52:51 +0000 rui_mashita http://www.retujyou.com/2007/03/20/ie%e3%81%a7%e5%85%a8%e3%81%a6%e3%81%ae%e8%a6%81%e7%b4%a0%e3%81%abhover%e6%93%ac%e4%bc%bc%e3%82%af%e3%83%a9%e3%82%b9%e3%82%bb%e3%83%ac%e3%82%af%e3%82%bf%e3%82%92%e9%81%a9%e5%bf%9c%e3%81%95%e3%81%9b/ 圧倒的なシェアを誇るIE 6 (Internet Explorer 6) では、CSS2で定義されたはずのa要素以外でのhover擬似クラスセレクタに対応してません。で、それを解決する csshover.htc ってスクリプトをWhatever:hoverで配布しているので導入してみた。
hoverはマウスポインタ等が要素の上に乗っかった時に適用される擬似クラス。

hover擬似クラス使用例

例として、id=testのspan要素に：hover擬似クラスを使って、テキストの色を#ff0000に変える場合の表示例とコードを以下に示してみます。
“このテキストの色が変わる”って文字列の上にカーソルを持っていくと、文字の色が赤色に変わる。

表示例:このテキストの色が変わる

コード:

<span id=test>このテキストの色が変わる</span>

span#test:hover { color : #ff0000 ; }

こんな感じに:hoverはどの要素にも適応される決まり1 になってるけど、IE6ではリンクアンカーa要素以外の:hoverはサポートされてない。

ちなみに最新のIE7では、:hoverと:activeには対応してるけど、:focus擬似クラスと:before、:after擬似要素には対応していない。2

csshover.htc導入手順

Whatever:hoverで配布されてるcsshover.htcには２つの種類があって、

  1. :hoverと:activeをIEで適応させるもの (ver1)
  2. :hoverと:activeと:focusもIEで適応させるもの (ver2)

今回はver1の方 (ver1.42.060206) を導入した。

導入にはbody要素にIE独自のCSSプロパティ behavior を使って、HTCって聞きなれないスクリプトファイルを読み込みだけ。

body { behavior:url("csshover.htc"); }

ただ注意すべきは、 behavior の url にはcssファイルからの相対パスじゃなくて、そのcssファイルを読み込んでる　html からの相対パスを書かなくてはいけないって事。なんかややこしいので、僕は絶対パスにしてhead部分に導入しました。

<head>
<style type="text/css">
<!--
body { behavior : url ("絶対パス/csshover.htc") ; }
--> 
</style>
</head>

WordPressではheader.phpに。
僕は適応してるテーマファイル以下にscriptsディレクトリを作って、そこでスクリプトを管理しているので、以下のようにしました。

<style>
body { behavior : url ( "<?php bloginfo('template_directory'); ?>/scripts/csshover.htc" ) ; }
</style>

参照・参考・注釈

csshover.htc導入
jmblog.jp – IEでa要素以外に:hover擬似クラスを適用させる

CSSプロパティ behavior について
?D of K – behaviorに関してのまとめ

  1. CSS2では動的擬似クラスとしてどの要素にも適応されるよう定義されてる。
    Selectors [back]
  2. IE7のCSS対応状況
    【特集】正式版完全対応! Internet Explorer 7 CSS攻略法 (MYCOMジャーナル)
    【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (MYCOMジャーナル) [back]
]]> http://www.retujyou.com/2007/03/20/csshoverhtc/feed/ 1