HTML5
HTML5って何??
2011.09.03
2011年からHTML5が騒がれていますね。
2009年頃からgoogleが協力に指示をしはじめたのがきっかけと言われています。
それから世界中のデベロッパーに認知されはじめ、2010年にはMicrosoftがInternetExplorerでHTML5の機能を積極的に実装することが表明されました。
そこから急激に世界中へと広まったようなのですが、IE9にはHTML5のAPIが数多く実装されているにしろ過去のIEnのシェアはまだまだ大きい事が問題。
HTML5でサイトを作る上ではブラウザの互換性について、最も重視して作らなければならないです。
海外ではHTML5のサイトがどんどん増えていますが
日本でもちょこちょこコードを書き換えはじめています。
WEB業界の人しか興味の無い(というか知る必要が無い)事だとは思いますが
HTML5をしっかり抑えていればWEBの世界が大きく広がる事間違いないかと思います!!!
そこでHTML5に関してまとめてみました!
HTML5って?
何が出来るの?
今までとは何が違うの??
簡潔に言うと、WEBApplicationが実現できます。
画像が動いたりマウスで操作したり、HTML上で実現出来ちゃうって事。
例えばFlash。今まではFlashを用いて動く画像を表現したり
マウスで操作する複雑な動きもFlashやScriptが無くてはできなかったと思います。
が、これからはHTML5でApplicationが作れちゃう!!!
確かに、iPhoneやiPadではFlashがみれなかったりしますもんね。
後は、今まで難しかった事が簡単なコードで実現しちゃいます。
ビデオや音楽を再生したりグラフを描画することが出来ます。
どんな事ができちゃうのかは後ほどご紹介致します〜
ブラウザの実装状況
とはいえ、、実際まだまだHTML5の対応をしきれていないのが現実です。
safari、chrome、opera、firefoxはまだ対応出来ていても
IEに関しては厳しい状況です。
今すぐにHTML5に乗り換える必要があるのか!というと、、実際はそうでも無いような気がします。
HTML5はHTML4、XHTML1.0のマークアップも問題なく使用することが出来ます。
宣言だけHTML5にして、時期を見てマークアップを書き換える方法が良いかもしれません。
HTML4やXHTMLと何が違うの?
HTML5は新しく生まれ変わったというより昔の記述は残したまま(一部は廃止)
新しい要素が追加されたという考えです。
もちろん、今までのXHTML1.0やHTML4のマークアップも使用できます。
HTML5で廃止されるタグ
<acronym> …… 略語(頭字語)であることを表す ※<abbr>に置き換える <applet> ……… JAVAアプレットを挿入する ※<embed>や<object>に置き換える <basefont> …… テキストの基準サイズ・基準色・基準フォントを指定する ※fontプロパティで指定 <bgsound> …… 効果音・BGMを鳴らす(IE独自の仕様) ※<audio>に置き換える <big> ………… テキストのサイズをひとまわり大きくする ※font-sizeプロパティで指定 <blink> ……… 文字を点滅させる(NN独自) ※text-decoration: blinkで指定 <center> …… センタリングする ※margin:autoやtext-align: centerで指定 <dir> ………… リストを表示する ※<ul>に置き換える <font> ……… フォントの種類・大きさ・色を指定する ※fontプロパティで指定 <frame> …… フレームに表示するファイルを指定する ※<iframe>やCSSに置き換えるか、メニューなどの共通部分はサーバー側でインクルードする。 <frameset> … ウィンドウをフレームに分割する ※<iframe>やCSSに置き換えるか、メニューなどの共通部分はサーバー側でインクルードする。 <isindex> …… 検索キーワードの入力欄を作る ※<form>と<input type="text">に置き換える <listing> ……… ソースをそのまま表示する(タグは解釈される) ※<pre>や<code>に置き換える <marquee> …… 文字をスクロールさせる(IE独自) ※CSS3のマーキー系プロパティで指定 <nobr> ……… 改行なしで表示する(NN独自) ※white-space: nowrapなどのCSSで指定 <noembed> … プラグインが利用できない環境用の表示内容を指定する(NN独自) ※プラグインが利用できない環境用の表示が必要な場合には、<embed>の代わりに<object>を使用する <noframes> … フレームが表示できない環境用の表示内容を指定する ※<iframe>やCSSに置き換えるか、メニューなどの共通部分はサーバー側でインクルードする。 <plaintext> … ソースをそのまま表示する ※MIMEタイプに"text/plain"を指定する <rb> ………… ルビをふる文字を指定する(IE独自) ※<ruby>内に直接ルビベースを記述、<rb>タグは省略 <spacer> …… スペースを挿入する(NN独自) ※marginやpaddingプロパティで指定 <strike> …… 打ち消し線を引く ※削除を表す場合には<del>に置き換える、 正確ではなくなった内容を表す場合には<s>に置き換える、 それ以外の場合はtext-decoration: line-throughで指定 <tt> ………… 等幅フォントで表示する ※font-family: monospaceで指定 <u> ………… テキストに下線(アンダーライン)を引く ※text-decoration: underlineで指定 <xmp> ……… ソースをそのまま表示する ※<pre>や<code>に置き換える