タグ: IE対策

【レスポンシブOK】私はこれでhtml5とcss3をie8以下に対応させました。

クソッ!
IEのクソッ!!

失礼しました。

最近、Wordpressのテーマを作りました。

でもIEを考えてなかったので一応確認したら案の定レイアウトは崩れてます。

面倒くさいし、ブスだからインターネットエクスプローラーは無視しようと思ってたんですが、チラチラ|ω・`)(←IE)こっちを見やがるから、
いやいやだけど対応させてみました。

ということで今回は、html5とcss3で作ったレスポンシブサイトを、
ブラウザ界のブスことInternetExplorerにも対応させてみようって話。

手を煩わせるんじゃないよ。まったく。
あんたかわいくないんだよ!

続きを読む

HTML5で書く時

去年、html5を覚えてサイトを作成していたが、結構忘れている自分がいる。

つまり、まだ自分のスキルとして備わってないってこと だろう。

毎度本をみてマークアップをスタートしてるけど、自分のブログに残しておこうと思う。
まあ、結局ここからコピーするんだろうけど・・・。

嫌いなIE対応の記述もついでに。

参考程度に共有します。
間違いがあればご指摘ください。


ベース

まずはまとめです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>サイトの名称</title>
<meta name=”description” content=”サイトの説明文” />
<meta name=”keywords” content=”サイトのキーワード” />
<link rel="stylesheet" type="text/css" href="css/○○○.css"  />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper"><!--サイト全体-->
<header>
ヘッダーエリア
</header>
<article><!--コンテンツエリア-->
<h1>1</h1>
<h2>1-1</h2>
<p>ここに本文</p>
<h2>1-2</h2>
<p>ここに本文</p>
</article>
<footer>
フッターエリア
</footer>
</div><!--wrapper-->
</body>
</html>

こんな感じでしょうか。
間違いは・・・ないかな・・・?

DOCTYPE宣言

<!DOCTYPE html>

まずはお約束のDOCTYPE宣言です。
「これからhtmlでソースを書いてくよ~。形式は○○だよ~。」ってことをブラウザ?に理解させるためみたいだけど、
『いや、それくらい言われなくてもわかれよ。。。』ってのが最初勉強したときの印象。
まあ、自分が知らない存在意義があるのだろう。

以前に比べて簡潔になったようです。
「ようです」ってのは、僕がhtmlを覚えたのが比較的最近で、初めて手に取った本が「HTML5」だったから。
そりゃあ最新の本を手に取りますよね?

ということで、以降も、HTML4やXHTMLとの比較はあまり掘り下げることはできません(;一_一)
実際に下記のXHTML等と比べると、ものすごーく簡潔になってるのがわかります。
それも「え?」ってレベルで。
例)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

書かなくても作動するらしいけど、html5になって簡潔になったので難なくかけますね。

lang属性

<html lang="ja">

日本語のサイトだよってことを教えます。まあ問題なし。

meta

<meta charset="UTF-8" />
<title>サイトの名称</title>
<meta name=”description” content=”サイトの説明文” />
<meta name=”keywords” content=”サイトのキーワード” />

「meta」は「このサイトについての情報」ってとこでしょうか。

charset

文字コードの指定ですね。
このcharsetは早めに指定すること。

ってことで必ずtitleよりも上に書きます。

タイトルが文字化けしてちゃ先が思いやられるので。
ここではUTF-8としてますが、たぶん大抵は良いと思います。

description

サイトの説明ですね。

keywords

キーワードの指定。

cssファイルの読み込み

<link rel="stylesheet" type="text/css" href="css/○○○.css"  />

外部ファイルとして読み込むやり方。 ○○○○に読み込むスタイルシート名を指定する。

コンテンツ

<div id="wrapper"><!--サイト全体-->
<header>
ヘッダーエリア
</header>
<article><!--コンテンツエリア-->
<h1>1</h1>
<h2>1-1</h2>
<p>ここに本文</p>
<h2>1-2</h2>
<p>ここに本文</p>
</article>
<footer>
フッターエリア
</footer>
</div><!--wrapper-->

あとはヘッダーとコンテンツのarticleとフッター。
<section>やら<article>やら<aside>やらとかありますが、すべての使い方が正確に出来ているかと言うとかなり自信ない。
特に<section><article>の明確な違いがイマイチ(;一_一) 今後ブログでも学習していきます。
とりあえずここのソースではこんな感じに。


IE8以下の対策

さてさて、最後はIE対応です。

クソったれブラウザのIEさんは、どうやらHTML5とcss3を受け入れてくれません。
それはそれは酷いもんで・・・。へへっ。
まだまだIE8は使ってる方もいらっしゃるので、仕事関係だとなんとか表示させないといけないですよね。
なので、IEさんにHTML5を理解させてあげるように記述します。
またこれも後日詳しく書いてみたいのですが、今回ここでは【html5shiv】というjavascriptで行ないます。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<br /><![endif]-->

とりあえずこれでIE8,7も対応できます。
ここでは、直接読み込む方法です。
ただし、最近はアップロードするやり方が推奨されてるのかな?

現状はこちらでも大丈夫のようですが。

おまけ

ただね、勝手なこと言うと、デザイナーさん達ががんばって対応されてますが、それを繰り返してる限りIE8以下のシェアはなかなか減らないと思うんですね。

だって見れちゃうんだもん。

はっきりIE8以下は切り捨てちゃったほうが良いんでは?
あなたのブラウザでは見れませんよー。って。
見れないサイトを増やさないと・・・って・・・やり方はよくないよねー(笑)だよねぇ。。

まあ、素人の僕が言ってもしょうがないんですけど(;一_一)