Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
GDG Women DevfestW 2013.03.10           HTML5でごく普通の            Webページを作る                          螺旋デザイン 佐藤とも子
自己紹介螺旋デザインという屋号でWebデザインやコーディング、執筆業をしています。
自己紹介Twitter…@tomokoNekoFacebook…いますがあんまり活動していません!(佐藤とも子で探してください)趣味はドラクエ10…本職は盗賊でLv47です。転職しつつ修行中です。
ごく普通のWebページとは普通、って人それぞれですが特に斬新な仕掛けなどのないWebページのことで進めて行きます。
HTML5を取り巻く代表的なネガティブ意見!  HTML5ですよー。って言いたいだけでは!  IE6で使えない                  記述ルールが変わる  IE7で使えない                         HTML5...
HTML5でWebサイトを組むメリット                      classやidの命名で悩む時間が減る                              ソースが見やすい    divだらけにならない         ...
実際に見比べてください!XHTML                         HTML5 <!DOCTYPE html PUBLIC "-//    <!DOCTYPE HTML> W3C//DTD XHTML 1.0          ...
注意点HTML5にすると!       必ずしもスーパーな機能が       付くわけでは無いです!!新規やリニューアルの構築時、      ついでにHTML5化するのがおすすめです。「なんかHTML5がすごいらしいです」などと言ってHTML5...
具体的なコーディング方法
IE6-8をHTML5に対応させるHTML5で増えた要素を古いIEは認識しません。これに対応させるJavaScriptがあります。html5shivhttps://code.google.com/p/html5shiv/ダウンロードしてIE9未...
html5shivの使い方<!--[if lt IE 9]><script src="jsファイルを格納しているフォルダ/html5shiv.js"></script><![endif]--> これをhead内に書き込むと古いIEでもHTML5...
注意点IE6-8のHTML5対応html5shivの効果は型崩れ防止なだけで、斬新な機能(canvasなど)がonになるわけではないです!それらの機能が必要な場合は別途、ライブラリを探しましょう。
HTML5で増えた主な要素 article       section    nav   aside      header footer        figure     figcaption     time     markruby    ...
HTML5で増えた主な要素でdivの代わりに使えそうな物 article   section    nav   aside   header footer    figure     figcaption   time大分減りました!これなら覚えら...
HTML5で増えた要素header             header                        headerヘッダーです。ページ全体のヘッダーにも使えます        headerし、項目のヘッダーにも使えます。   ...
HTML5で増えた要素section意味のあるひとまとまり。見出し要素があることが望ましいです。article独立した記事、投稿内容、コメント、ウィジェットなどに利用します。
HTML5で増えた要素navナビゲーションです。そのページでメインとなるナビゲーション群にマーキングします。asideメイン情報から外れる内容です。アフィリエイトなどのマーキングにいいでしょう。
HTML5で増えた要素                    簡単な表示time時間をあらわします。          <time>2013年3月10日</time>世界標準時を基準にした非常に正確な   曖昧な言葉に正確な日にちを設定時間の指...
HTML5で増えた要素figure図であることを表します。                                     imgfigcaption                                  figcaptio...
HTML5で意味が変わったタグの一部small小さめの文字   注釈や細目。コピーライトにも。em強調・斜体    強調strong強調・太字    さらに強い強調
HTML5KARUTA   http://roadstohtml5.com/html5karuta/サイトに公開されているバージョンがちょうど普通にサイトを組むのにいいタグが出ています!
記述ルールの変更閉じタグの扱いが変わりました閉じアリ<img src="homuhomu" />閉じナシ<img src="homuhomu">  どっちでもいいんです!
記述ルールの変更単純化された記述文字コードがUTF-8ですよ。って表示が!!XHTML <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />HTML5 <me...
Dreamweaverのテンプレート                                    注意点+短縮された文字コード指定=文字化けします( ;´༎!Д༎!`)回避法1短縮された記述を使わない。<meta http-equiv...
Dreamweaverのテンプレート                                    注意点+短縮された文字コード指定=文字化けします( ;´༎!Д༎!`)回避法2短縮された記述と長い記述を併用する。<meta http-...
記述ルールの変更a要素が便利に!ブロック要素をマーキングしてはいけないルールが無くなったので、使い勝手が向上しました。<a href="#" ><h1>homuhomu</h1></a><a href="#" ><table>…省略…</tab...
HTML5を使えない事情がある場合は…classの名前にHTML5の要素をつかってみる<div class="section">homuhomu</div><div class="article">homuhomu</div>このような調子で使...
HTML5をXHTMLにするためには置換して、XHTMLにしてしまいましょう。正規表現を使うと少し楽です。HTML5の主な新規要素の閉じタグをまとめて閉じdivに /article|/section|/nav|/aside|/header|/f...
ご清聴ありがとうございました!!
Upcoming SlideShare
Loading in …5
×

GDG Women DevfestW

1,530 views

Published on

3月10日にGDG京都さんのイベントの「GDG DevfestW Kyoto」で発表してきました。
https://sites.google.com/a/kyoto-gtug.org/devfestw/

HTML5でWebサイトを作ると制作者的に楽ですよ、と言うネタです。
使えるタグとその覚え方、困ったことに対する処理方法の紹介です。

Published in: Self Improvement
  • Be the first to comment

  • Be the first to like this

GDG Women DevfestW

  1. 1. GDG Women DevfestW 2013.03.10 HTML5でごく普通の Webページを作る 螺旋デザイン 佐藤とも子
  2. 2. 自己紹介螺旋デザインという屋号でWebデザインやコーディング、執筆業をしています。
  3. 3. 自己紹介Twitter…@tomokoNekoFacebook…いますがあんまり活動していません!(佐藤とも子で探してください)趣味はドラクエ10…本職は盗賊でLv47です。転職しつつ修行中です。
  4. 4. ごく普通のWebページとは普通、って人それぞれですが特に斬新な仕掛けなどのないWebページのことで進めて行きます。
  5. 5. HTML5を取り巻く代表的なネガティブ意見! HTML5ですよー。って言いたいだけでは! IE6で使えない 記述ルールが変わる IE7で使えない HTML5 なぞの技術 IE8で使えない タグがムッチャ増えた Webアプリケーションはつくらないから関係ない
  6. 6. HTML5でWebサイトを組むメリット classやidの命名で悩む時間が減る ソースが見やすい divだらけにならない タグが増えた HTML5 data-**の属性を自由に作れる この仕様を利用したjQueryプラグインが 利用できる 万が一の時に頼れるjQueryプラグインの幅が広がる
  7. 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. 8. 注意点HTML5にすると! 必ずしもスーパーな機能が 付くわけでは無いです!!新規やリニューアルの構築時、 ついでにHTML5化するのがおすすめです。「なんかHTML5がすごいらしいです」などと言ってHTML5化だけの リニューアル案件をとると後で困りそうなので気をつけてください!)
  9. 9. 具体的なコーディング方法
  10. 10. IE6-8をHTML5に対応させるHTML5で増えた要素を古いIEは認識しません。これに対応させるJavaScriptがあります。html5shivhttps://code.google.com/p/html5shiv/ダウンロードしてIE9未満のバージョンが読むようにリンクさせます。
  11. 11. html5shivの使い方<!--[if lt IE 9]><script src="jsファイルを格納しているフォルダ/html5shiv.js"></script><![endif]--> これをhead内に書き込むと古いIEでもHTML5 の要素で崩れがでません。似た名前の「html5shim」もありますが、どちらも同じです。
  12. 12. 注意点IE6-8のHTML5対応html5shivの効果は型崩れ防止なだけで、斬新な機能(canvasなど)がonになるわけではないです!それらの機能が必要な場合は別途、ライブラリを探しましょう。
  13. 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. 14. HTML5で増えた主な要素でdivの代わりに使えそうな物 article section nav aside header footer figure figcaption time大分減りました!これなら覚えられそうですね!!
  15. 15. HTML5で増えた要素header header headerヘッダーです。ページ全体のヘッダーにも使えます headerし、項目のヘッダーにも使えます。 footerfooter headerフッターです。ページ全体のフッターにも使えますし、項目のフッターにも使えます。 footer footer
  16. 16. HTML5で増えた要素section意味のあるひとまとまり。見出し要素があることが望ましいです。article独立した記事、投稿内容、コメント、ウィジェットなどに利用します。
  17. 17. HTML5で増えた要素navナビゲーションです。そのページでメインとなるナビゲーション群にマーキングします。asideメイン情報から外れる内容です。アフィリエイトなどのマーキングにいいでしょう。
  18. 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. 19. HTML5で増えた要素figure図であることを表します。 imgfigcaption figcaption図に対するキャプションです。<figre> <img src=”****”> <figcaption>キャプション</figcaption></figre>
  20. 20. HTML5で意味が変わったタグの一部small小さめの文字 注釈や細目。コピーライトにも。em強調・斜体 強調strong強調・太字 さらに強い強調
  21. 21. HTML5KARUTA http://roadstohtml5.com/html5karuta/サイトに公開されているバージョンがちょうど普通にサイトを組むのにいいタグが出ています!
  22. 22. 記述ルールの変更閉じタグの扱いが変わりました閉じアリ<img src="homuhomu" />閉じナシ<img src="homuhomu"> どっちでもいいんです!
  23. 23. 記述ルールの変更単純化された記述文字コードがUTF-8ですよ。って表示が!!XHTML <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />HTML5 <meta charset="UTF-8">非常に単純化されました。HTML宣言も短くなっています。
  24. 24. Dreamweaverのテンプレート 注意点+短縮された文字コード指定=文字化けします( ;´༎!Д༎!`)回避法1短縮された記述を使わない。<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />これでOK!
  25. 25. Dreamweaverのテンプレート 注意点+短縮された文字コード指定=文字化けします( ;´༎!Д༎!`)回避法2短縮された記述と長い記述を併用する。<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><meta charset="UTF-8">最終的にテンプレートタグを外す場合に。テンプレートを外したあとに長い方の記述をサイト内置換で削除する。
  26. 26. 記述ルールの変更a要素が便利に!ブロック要素をマーキングしてはいけないルールが無くなったので、使い勝手が向上しました。<a href="#" ><h1>homuhomu</h1></a><a href="#" ><table>…省略…</table></a>どちらもOK!!
  27. 27. HTML5を使えない事情がある場合は…classの名前にHTML5の要素をつかってみる<div class="section">homuhomu</div><div class="article">homuhomu</div>このような調子で使うと慣れてくるので移行時に楽だし、class名を考える手間が減ります!
  28. 28. HTML5をXHTMLにするためには置換して、XHTMLにしてしまいましょう。正規表現を使うと少し楽です。HTML5の主な新規要素の閉じタグをまとめて閉じdivに /article|/section|/nav|/aside|/header|/footer|/figure |/ figcaption ↓ /div開始タグは地道にいきましょう <article ↓ <div class=”article” <!-- 使ったタグだけがんばって置換 -->
  29. 29. ご清聴ありがとうございました!!

×