HTML

: IEは鬼門

IE7/8に対応させる:2014/1/2

2014年スタートです。いつのまにか厄年も終わっていました。

さて、今年は趣味ブログ以外いにも技術系のブログも、もっと頑張りたいと思います。

今日は、スマホとPCサイトを作った際にやった事のまとめ。

1headの一番上に条件付コメントを拾ってくれる指示

content="IE=Edge"は、IEの最新版でレンダリングしてちょ～だいよという意味です。mj-wave.comで詳しく説明してくれています。
なぜ追加するかというと、条件付コメントのサポート終了したので、条件付きコメントが、その他のブラウザーの場合と同様に通常のコメントとして扱われてしまうからです。
でもこの条件付コメント、W3Cのバリデーデョンで、エラーになるという･･･。
HTML5へ遷移する時期の、とりあえずのIEのためだけの措置ですね。 microsoft

2スマホの表示を整えるために

これは、iphoneで見た時に、ウィンドウの横幅をデバイスの横幅と指定するものです。

3cssを二枚用意

リキッドレイアアウトで組むので、iphoneの横幅のcssとそれ以上のcssを2枚用意して、PC用.cssには必要に応じてipad用に振り分けの記述も入れます。 ipadのサイズはPC用に用意したものに@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)で振り分けるだけでよいと思います。

/*ipad用*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){
nav {
   ここにipad用に入れたいスタイルを記述
  }     
}

4IE用に条件付コメントの指示を書く

html5.jsはダウンロードしてサーバーにおいておくほうが、上記よりよいみたいです。ちなみにこれは下位のIEブラウザに figure, footer等のHTMLの要素を認識させるものです。

5cssに下記を追加

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

IE用に各要素をdisplay: block;に

あとはお好みで、IE用のCSSハックを使ったりするようです。

それでは、皆様おつカピ様でした～～。

Tweet to @kapibarafun