Download to read offline
![html5shivの使い方<!--[if lt IE 9]><script src="jsファイルを格納しているフォルダ/html5shiv.js"></script><![endif]--> これをhead内に書き込むと古いIEでもHTML5 の要素で崩れがでません。似た名前の「html5shim」もありますが、どちらも同じです。](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fgdg20130310-130311093446-phpapp02%2f75%2fGDG-Women-DevfestW-11-2048.jpg&f=jpg&w=240)
Uploaded byTomoko Sato
1,697 views
GDG Women DevfestW
3月10日にGDG京都さんのイベントの「GDG DevfestW Kyoto」で発表してきました。https://sites.google.com/a/kyoto-gtug.org/devfestw/HTML5でWebサイトを作ると制作者的に楽ですよ、と言うネタです。使えるタグとその覚え方、困ったことに対する処理方法の紹介です。
Recommended
More Related Content
What's hot
Similar to GDG Women DevfestW
GDG Women DevfestW
- 1.GDG Women DevfestW2013.03.10 HTML5でごく普通の Webページを作る 螺旋デザイン 佐藤とも子
- 2.
- 3.
- 4.
- 5.HTML5を取り巻く代表的なネガティブ意見！ HTML5ですよー。って言いたいだけでは！ IE6で使えない 記述ルールが変わる IE7で使えない HTML5 なぞの技術 IE8で使えない タグがムッチャ増えた Webアプリケーションはつくらないから関係ない
- 6.HTML5でWebサイトを組むメリット classやidの命名で悩む時間が減る ソースが見やすい divだらけにならない タグが増えた HTML5 data-**の属性を自由に作れる この仕様を利用したjQueryプラグインが 利用できる 万が一の時に頼れるjQueryプラグインの幅が広がる
- 7.実際に見比べてください！XHTML HTML5 <!DOCTYPE html PUBLIC "-// <!DOCTYPE HTML> W3C//DTD XHTML 1.0 <html lang="ja"> Transitional//EN" "http:// <head> www.w3.org/TR/xhtml1/DTD/ <meta charset="UTF-8"> xhtml1-transitional.dtd"> <title>タイトル</title> <html xmlns="http:// </head> www.w3.org/1999/xhtml"> <head> <body> <meta http-equiv="Content- Type" content="text/html; <header><h1><a charset=UTF-8" /> href="index.html"><img <title>タイトル</title> src="img/logo.png" alt="ロ </head> ゴ" width="417" <body> height="60"></a></h1> <address> <div class="header"><h1><a <p class="adr">〒 href="index.html"><img 000-0000<br>大阪市○○町 src="img/logo.png" alt="ロ 1-2-3</p> ゴ" width="417" <p class="tel"><img
- 8.注意点HTML5にすると！ 必ずしもスーパーな機能が 付くわけでは無いです！！新規やリニューアルの構築時、 ついでにHTML5化するのがおすすめです。「なんかHTML5がすごいらしいです」などと言ってHTML5化だけの リニューアル案件をとると後で困りそうなので気をつけてください！）
- 9.
- 10.
- 11.html5shivの使い方<!--[if lt IE9]><script src="jsファイルを格納しているフォルダ/html5shiv.js"></script><![endif]--> これをhead内に書き込むと古いIEでもHTML5 の要素で崩れがでません。似た名前の「html5shim」もありますが、どちらも同じです。
- 12.
- 13.HTML5で増えた主な要素 article section nav aside header footer figure figcaption time markruby rt rp wbr embed video audiosource track canvas datalist keygen output progress meter details summary command menu dialog
- 14.HTML5で増えた主な要素でdivの代わりに使えそうな物 article section nav aside header footer figure figcaption time大分減りました！これなら覚えられそうですね！！
- 15.HTML5で増えた要素header header headerヘッダーです。ページ全体のヘッダーにも使えます headerし、項目のヘッダーにも使えます。 footerfooter headerフッターです。ページ全体のフッターにも使えますし、項目のフッターにも使えます。 footer footer
- 16.
- 17.
- 18.HTML5で増えた要素 簡単な表示time時間をあらわします。 <time>2013年3月10日</time>世界標準時を基準にした非常に正確な 曖昧な言葉に正確な日にちを設定時間の指定もできます。 <time datetime="2013-03-10"> 今日</time>正しい時間が分からないものには使えません。 曖昧な言葉に正確な時間まで設定<time> <time datetime="2013-03-10T13:00+宇宙ができた時 09:00"></time> いま</time>
- 19.HTML5で増えた要素figure図であることを表します。 imgfigcaption figcaption図に対するキャプションです。<figre> <img src=”****”> <figcaption>キャプション</figcaption></figre>
- 20.HTML5で意味が変わったタグの一部small小さめの文字注釈や細目。コピーライトにも。em強調・斜体 強調strong強調・太字 さらに強い強調
- 21.HTML5KARUTAhttp://roadstohtml5.com/html5karuta/サイトに公開されているバージョンがちょうど普通にサイトを組むのにいいタグが出ています！
- 22.記述ルールの変更閉じタグの扱いが変わりました閉じアリ<img src="homuhomu" />閉じナシ<imgsrc="homuhomu"> どっちでもいいんです！
- 23.記述ルールの変更単純化された記述文字コードがUTF-8ですよ。って表示が！！XHTML <meta http-equiv="Content-Type"content="text/html; charset=UTF-8" />HTML5 <meta charset="UTF-8">非常に単純化されました。HTML宣言も短くなっています。
- 24.Dreamweaverのテンプレート 注意点＋短縮された文字コード指定＝文字化けします( ;´༎!Д༎!`)回避法1短縮された記述を使わない。<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />これでOK!
- 25.Dreamweaverのテンプレート 注意点＋短縮された文字コード指定＝文字化けします( ;´༎!Д༎!`)回避法2短縮された記述と長い記述を併用する。<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><meta charset="UTF-8">最終的にテンプレートタグを外す場合に。テンプレートを外したあとに長い方の記述をサイト内置換で削除する。
- 26.記述ルールの変更a要素が便利に！ブロック要素をマーキングしてはいけないルールが無くなったので、使い勝手が向上しました。<a href="#" ><h1>homuhomu</h1></a><ahref="#" ><table>…省略…</table></a>どちらもOK！！
- 27.
- 28.HTML5をXHTMLにするためには置換して、XHTMLにしてしまいましょう。正規表現を使うと少し楽です。HTML5の主な新規要素の閉じタグをまとめて閉じdivに /article|/section|/nav|/aside|/header|/footer|/figure |/figcaption ↓ /div開始タグは地道にいきましょう <article ↓ <div class=”article” <!-- 使ったタグだけがんばって置換 -->
- 29.