スマートフォン対応アプリなどは、ほとんどがHTML５で制作されています。
新たなWEBの時代の流れに取り残されぬよう、今からコツコツと勉強を進めていきましょう！
＜HTML５とは？＞
HTML５は下位互換性を持っており、HTML4.01やXHTML1.0の機能は基本的にHTML５でもそのまま利用できるようです。※廃止されたタグは使用出来ません。
＜CSS3とは？＞
CSS3は下位互換性を持っておりCSS2.1の機能がそのまま利用できます。CSS3ではデザインの自由度が上がりスタイルシートの設定のみで、角丸やグラデーションが設定出来るようになりました。＜HTML５への移行方法＞
① DOCTYPE宣言を変更
変更前<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
変更後
<!DOCTYPE html>
この変更だけで、このサイトはHTML5で制作しているという宣言になります。
② xmls属性の指定を削除する
変更前<html xmlns="http://www.w3.org/1999/xhtml">
変更後
<html>
③ エンコードの種類指定を変更する
変更前<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
変更後
<meta charset="utf-8">
④ type属性の指定を変更する
変更前<style type="text/css">
</style>
変更後
<style>
</style>
⑤ JavaScriptの指定を変更する
変更前<script type="text/javascript">
</script>
変更後
<script>
</script>
⑥ コピーライトのマークアップを修正
変更前address
※HTML5からaddressは連絡先情報示すものと定義されました。
変更後
small
※HTML5ではsmallが但し書きや注釈を示すものとして定義されました。
＜完了＞
簡単なHTML5への移行はこの程度で完了します。さらにHTML５の新タグによるマークアップを行えば、サイトの完成度がUPします。
＜HTML5の新タグ紹介＞
<article> 独立したコンテンツ<nav> ナビゲーション
<aside> 補足や関連情報
<section> 一般的なセクション（区切られた部分）
<hgroup> 見出しのグループ
<header> ヘッダー
<footer> フッター
<figure> 図表
<figcaption> 図表の見出し
<time> 日時
これらのタグを使いこなし、HTML５のサイト制作を目指しましょう！
この本参考になります。
0 件のコメント:
コメントを投稿