さて
先程 の続きです。実践編。
要素を作ってやれば対応出来そうなので、それを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> ふむふむ、と思った方はポチっとオネガイします☆