RenzSpace Free Style Blog

IEにもHTML5

2月 2nd, 2011 Author :: / Categories :: ホームページ制作でのあれこれ / トラックバックURL / No Comments »

Twitt

IEはHTML5が未だにサポートされておらず…なので、あきらめて除外してしまうか。と思いきや、Javascriptで解決!

参考サイトはこちら

HTML5から使用されるタグをIEにもタグと分からせるためのスクリプトですね。

とても助かります。

2月 2nd, 2011 Author :: / Categories :: ホームページ制作でのあれこれ / トラックバックURL / No Comments »

PCサイトiPhoneサイトCSS切り替え

2月 2nd, 2011 Author :: / Categories :: ホームページ制作でのあれこれ / トラックバックURL / No Comments »

Twitt

結構落とし穴があったので、忘れないようにメモメモ。

まずはヘッダにお決まりの切り替えソース。

<meta name="viewport" content="user-scalable=no, width=device-width" />
<link rel="stylesheet" href="iPhone用CSSパス" type="text/css" media="only screen and (max-width:480px)"/>
<link rel="stylesheet" href="PC用CSSパス" type="text/css" media="screen and (min-width:481px)" />

これだけで、PCサイトとiPhoneの切り替えはOK。

ただ、これをやるとIEにCSSが適応されないバグが発生。原因は不明。多分media=”"の部分だろう。

なので、以下を追記。

<!--[if IE]>
<link rel="stylesheet" href="PC用CSS" type="text/css" media="screen" />
<![endif]-->

これで、OKでした。

以上、メモ。

2月 2nd, 2011 Author :: / Categories :: ホームページ制作でのあれこれ / トラックバックURL / No Comments »

IEのみに適応させたいCSSのちょっとした方法

11月 20th, 2010 Author :: / Categories :: ホームページ制作でのあれこれ / トラックバックURL / No Comments »

Twitt

ブラウザ依存により表示がずれてしまった場合に、
IE用のCSSをわざわざ用意して、振り分けを行わずにちょこっと追加してあげるだけで問題解決。

例えば、margin:20px;をIEではmargin:15px;にしたい場合は 。

div.box{margin:20px; _margin:15px;} 
//↑marginの前に『 _ 』をつけるだけ。

これで、OK。

だいぶ楽です。

11月 20th, 2010 Author :: / Categories :: ホームページ制作でのあれこれ / トラックバックURL / No Comments »

MacとWin

11月 17th, 2010 Author :: / Categories :: ホームページ制作でのあれこれ / トラックバックURL / No Comments »

Twitt

Webを作るにあたって、むか〜しから一番面倒くさいのはブラウザによる表示のズレ。

しかし、現段階では新しいブラウザだけだと、もうその心配もなくなって来た。

が、今でも結構多くの人がやってしまうコーディングの落とし穴をちょこっと紹介。

Divでレイアウトをする際に、やっては行けない事。

1:widthを設定したレイヤーにmarginやpaddingは使わない。
→これは、winとmacのmarginの数値の認識の違い(特に古いIE)から絶対にズレますので、 使わない事をお勧めします。そうしないと、winとmacの二つのcssを用意しなければならなくなります。

2:テキストエンコーディングを揃える。
→当たり前な事ですが、html,css,Javascript全て同じエンコードにしないとどこかで必ずズレます。

が、特に注意すべき点でしょうか。

11月 17th, 2010 Author :: / Categories :: ホームページ制作でのあれこれ / トラックバックURL / No Comments »