GDG Women DevfestW
•
0 likes•1,687 views
3月10日にGDG京都さんのイベントの「GDG DevfestW Kyoto」で発表してきました。 https://sites.google.com/a/kyoto-gtug.org/devfestw/ HTML5でWebサイトを作ると制作者的に楽ですよ、と言うネタです。 使えるタグとその覚え方、困ったことに対する処理方法の紹介です。
Recommended
More Related Content
What's hot
What's hot (20)
Similar to GDG Women DevfestW
Similar to GDG Women DevfestW (20)
GDG Women DevfestW
- 1. GDG Women DevfestW 2013.03.10 HTML5でごく普通の Webページを作る 螺旋デザイン 佐藤とも子
- 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. 具体的なコーディング方法
- 11. html5shivの使い方 <!--[if lt IE 9]> <script src="jsファイルを格納しているフォルダ/html5shiv.js"></script> <![endif]--> これをhead内に書き込むと古いIEでもHTML5 の要素で崩れがでません。 似た名前の「html5shim」もありますが、 どちらも同じです。
- 13. HTML5で増えた主な要素 article section nav aside header footer figure figcaption time mark ruby rt rp wbr embed video audio source 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 し、項目のヘッダーにも使えます。 footer footer header フッターです。 ページ全体のフッターにも使えます し、項目のフッターにも使えます。 footer footer
- 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 図であることを表します。 img figcaption figcaption 図に対するキャプションです。 <figre> <img src=”****”> <figcaption>キャプション</figcaption> </figre>
- 20. HTML5で意味が変わったタグの一部 small 小さめの文字 注釈や細目。コピーライトにも。 em 強調・斜体 強調 strong 強調・太字 さらに強い強調
- 21. HTML5KARUTA http://roadstohtml5.com/html5karuta/ サイトに公開されているバージョンがちょうど 普通にサイトを組むのにいいタグが出ています！
- 22. 記述ルールの変更 閉じタグの扱いが変わりました 閉じアリ <img src="homuhomu" /> 閉じナシ <img src="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> <a href="#" > <table>…省略…</table> </a> どちらもOK！！
- 28. HTML5をXHTMLにするためには 置換して、XHTMLにしてしまいましょう。 正規表現を使うと少し楽です。 HTML5の主な新規要素の閉じタグをまとめて閉じdivに /article|/section|/nav|/aside|/header|/footer|/figure |/ figcaption ↓ /div 開始タグは地道にいきましょう <article ↓ <div class=”article” <!-- 使ったタグだけがんばって置換 -->
- 29. ご清聴ありがとうございました！！