www.retujyou.com どうにもならない劣情の種子を植え付けられたばかりに » IE http://www.retujyou.com どうにもならない劣情の種子を植え付けられたばかりに Fri, 04 Mar 2011 09:14:27 +0000 ja hourly 1 http://wordpress.org/?v=3.0.1 サイトデザインを新しくしたよ http://www.retujyou.com/2008/08/29/sitedesignrenew/ http://www.retujyou.com/2008/08/29/sitedesignrenew/#comments Fri, 29 Aug 2008 12:19:25 +0000 rui_mashita http://www.retujyou.com/?p=426 サイトデザインを新しくしました。一応ちゃんと見れるような所まで出来たから、取りあえずで。ナビゲーションとフッターは、もっと変えていきたいところ。

IE6完全非対応

今回のデザインは透過pngを使いまくっているので、IE6には非完全対応です。もう、gifに変換するのとか、IE PNG Fixも使えないし、IE6ハックやるのが面倒でしかたないし、シェアもだいぶ下がっているらしいから。

今、Google Analytics で今月のこのサイトの訪問者をブラウザ別で調べてみたら、訪問者数のうち 51.85% が IE でそのうちの 59.16% がIE6。大体1/4がIE6です。結構多いなぁ。予想以上だ。あーあ。

去年の８月もついでに調べてみると、IE 61.83% の、IE6 が 78.80% で、まぁそれに比べたら下がってる。みんななんでIE7にアップグレードしないのかな。

LinuxとWindowsXPのFirefox、WindowsXPのSafari、LinuxのKonquerorで、ちゃんと見れるの確認した。SafariのレンダリングはKonquerorと同じKHTMLベースだそう。IE7はさっき確認したらひどい事になってた。

Mac OS X の Firefox と Safari でもちゃんと見れた

ここを参考にIE7用のハックをほどこし、なんとか見れるようにしました。hasLayoutって概念を知らなかったけど、いままで_width:100%;とかやってたのは、hasLayoutの値をtureにしてたわけですね。

Safari・Konquerorのバグ？

Safari・Konquerorでは、子孫セレクタで再度 positon:relative; と指定しなきゃいけない、バグ？があった。

.entry {
position:relative;
}

としてるのに、

#main .entry {
margin:10px;
}

とか書くと position:relative; が無視されて解釈されてるみたいで、再度

#main .entry {
margin:10px;
position:relative;
}

としないといけなかった。

画像の素材を集める

コラージュっぽい感じでペタペタ画像を使ってるんだけど、素材を集めるのが大変でした。

無料で使える画像素材を探すのは、やっぱFlickrが一番探しやすい。権利別に検索出来る所が良い。あとはグループが使える。

CCライセンスのみのテクスチャ画像を集めたFrickrグループ。Flickr: Textures for Layers

他にクオリティが高い画像があるのは、stock.xchngと、deviantART。deviantARTはテクスチャカテゴリなんかが良い。あとは、足成が日本語で使いやすい。

日本の昔の絵画等のデジタル画像はこの辺り。

無為庵乃書窓は個人サイトだけど画像クオリティはかなり高いし、テキストも豊富で、すごく勉強になる良いサイト。

京都大学電子図書館は、何故かサイトなどでのデジタル画像の二次利用を拒否してるけど、もともと絵画などの平面図を写しただけの写真に著作権は発生しない。

サイトを作るにあたって使用した画像

サイトを作るにあたって使用した画像素材を列挙

画像の編集等は全てGimpで行いました

]]> http://www.retujyou.com/2008/08/29/sitedesignrenew/feed/ 2 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