さて先程の続きです。実践編。
要素を作ってやれば対応出来そうなので、それをJavaScriptを使って対応します。
JavaScriptとはなんぞや？と言う方は、またまたすみませんが、
初心者向けサイトは宇宙の広さほどありますので、そちらをご覧ｸﾀﾞｻｲ。
そっちの説明のほうが、優れていますしネ。
かいつまんで言うと、HTMLやCSSは動かない「静的」な物を作る為の技術ですが(文章だとか色の設定だとか）、
JavaScriptは、ちょっとしたプログラミングでして、動く「動的」な物を作ることが出来ます。
では、本題。
IEにHTML5を対応させる方法を書いていきますね。
まず、JavaScriptで要素ってどうやって作るの？ってことから。
JavaScriptでは、
document.createElement("ここには作りたい要素の名前を入れる");
というのがあります。そう、あるんです！！
これで、要素が作れちゃいます。なんと1行です。
コピペするだけ！！
プログラムなんて。。。って尻込みしなくても大丈夫！
プログラムの基本的な書き方は、決まっています。
なので、まずはその決まりを覚える必要があるってだけです。
ただし、1行でOKというのは、あくまでも作りたい要素が1つの場合。
今回は、HTML5の新しい要素（sectionとか、article等など）を作りたいんです。
だから、最低複数行（全部の新要素に対応させるならもっと）必要。
説明が長くなりそうなんで、とりあえずHTML5の新要素を
4つぐらいピックアップして、やってみますね。
document.createElement("header");
document.createElement("section");
document.createElement("article");
document.createElement("footer");
はい。
名前だけ変えただけです。
これを、JavaScriptタグの間に入れて、JavaScriptとしてブラウザに認識させましょう。
<script>
ここに入れてあげる
</script>
つまりこうなる
↓ ↓ ↓
<script>
document.createElement("header");
document.createElement("section");
document.createElement("article");
document.createElement("footer");
</script>
よし。では次にCSSで、作った要素をブロック化しましょう。
CSSに以下を追加。
header,section,article,footer {
display: block;
}
これで、終わりです。
これで、IEで表示を確認すれば、前回のように、CSSが反映されます。
リロードしても変わらない！！って場合は、ブラウザのキャッシュが原因であることが
殆どなので、Ctrlキー ＋ F5 を押してみましょう。
[ちょっと重要]
ちなみに、<script>タグをHTMLに書くときは、閉じbodyタグ、</body>の上に書きましょう！！
<head></head>の間に書かないように。ブラウザの速度に差が出ます。
</body>の真上あたりにJavaScriptを書くのが今のトレンド☆
[＝応用編＝]
プログラミングをちょっと分かってマス、って人は、ループとかするかな。
下は、JavaScriptとか分かっている人向け。新しい要素を追加するときは、
"追加要素名"を追加するだけ！！ document.create～～ ってもう書かなくて良いのが楽。
上と同じ結果になる事やってます。
なお、CSSは、上と同じように、ブロック化の設定が必要です。
<script>
var addElements = [
"header",
"section",
"article",
"footer"
ここ↑に、, (カンマ)を入れた後で "追加したい要素名" を書くだけ（新しく要素を追加したい場合）
];
for (var i = 0, len = addElements.length; i < len; i++) {
documentCreateElement(addElements[i]);
↑のdocumentCreate...は t.create です。アメブロの入力エラーになったので、
ちょっとごまかして書いてます。修正が必要です
}
</script>
ふむふむ、と思った方はポチっとｵﾈｶﾞｲします☆
要素を作ってやれば対応出来そうなので、それをJavaScriptを使って対応します。
JavaScriptとはなんぞや？と言う方は、またまたすみませんが、
初心者向けサイトは宇宙の広さほどありますので、そちらをご覧ｸﾀﾞｻｲ。
そっちの説明のほうが、優れていますしネ。
かいつまんで言うと、HTMLやCSSは動かない「静的」な物を作る為の技術ですが(文章だとか色の設定だとか）、
JavaScriptは、ちょっとしたプログラミングでして、動く「動的」な物を作ることが出来ます。
では、本題。
IEにHTML5を対応させる方法を書いていきますね。
まず、JavaScriptで要素ってどうやって作るの？ってことから。
JavaScriptでは、
document.createElement("ここには作りたい要素の名前を入れる");
というのがあります。そう、あるんです！！
これで、要素が作れちゃいます。なんと1行です。
コピペするだけ！！
プログラムなんて。。。って尻込みしなくても大丈夫！
プログラムの基本的な書き方は、決まっています。
なので、まずはその決まりを覚える必要があるってだけです。
ただし、1行でOKというのは、あくまでも作りたい要素が1つの場合。
今回は、HTML5の新しい要素（sectionとか、article等など）を作りたいんです。
だから、最低複数行（全部の新要素に対応させるならもっと）必要。
説明が長くなりそうなんで、とりあえずHTML5の新要素を
4つぐらいピックアップして、やってみますね。
document.createElement("header");
document.createElement("section");
document.createElement("article");
document.createElement("footer");
はい。
名前だけ変えただけです。
これを、JavaScriptタグの間に入れて、JavaScriptとしてブラウザに認識させましょう。
<script>
ここに入れてあげる
</script>
つまりこうなる
↓ ↓ ↓
<script>
document.createElement("header");
document.createElement("section");
document.createElement("article");
document.createElement("footer");
</script>
よし。では次にCSSで、作った要素をブロック化しましょう。
CSSに以下を追加。
header,section,article,footer {
display: block;
}
これで、終わりです。
これで、IEで表示を確認すれば、前回のように、CSSが反映されます。
リロードしても変わらない！！って場合は、ブラウザのキャッシュが原因であることが
殆どなので、Ctrlキー ＋ F5 を押してみましょう。
[ちょっと重要]
ちなみに、<script>タグをHTMLに書くときは、閉じbodyタグ、</body>の上に書きましょう！！
<head></head>の間に書かないように。ブラウザの速度に差が出ます。
</body>の真上あたりにJavaScriptを書くのが今のトレンド☆
[＝応用編＝]
プログラミングをちょっと分かってマス、って人は、ループとかするかな。
下は、JavaScriptとか分かっている人向け。新しい要素を追加するときは、
"追加要素名"を追加するだけ！！ document.create～～ ってもう書かなくて良いのが楽。
上と同じ結果になる事やってます。
なお、CSSは、上と同じように、ブロック化の設定が必要です。
<script>
var addElements = [
"header",
"section",
"article",
"footer"
ここ↑に、, (カンマ)を入れた後で "追加したい要素名" を書くだけ（新しく要素を追加したい場合）
];
for (var i = 0, len = addElements.length; i < len; i++) {
documentCreateElement(addElements[i]);
↑のdocumentCreate...は t.create です。アメブロの入力エラーになったので、
ちょっとごまかして書いてます。修正が必要です
}
</script>
ふむふむ、と思った方はポチっとｵﾈｶﾞｲします☆