Successfully reported this slideshow.
Your SlideShare is downloading. ×

GDG Women DevfestW

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 29 Ad

GDG Women DevfestW

Download to read offline

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

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

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

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

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Advertisement

GDG Women DevfestW

  1. 1. GDG Women DevfestW 2013.03.10 HTML5でごく普通の Webページを作る 螺旋デザイン 佐藤とも子
  2. 2. 自己紹介 螺旋デザインという屋号で Webデザインやコーディング、 執筆業をしています。
  3. 3. 自己紹介 Twitter…@tomokoNeko Facebook… いますがあんまり活動していません! (佐藤とも子で探してください) 趣味はドラクエ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があります。 html5shiv https://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 mark ruby rt rp wbr embed video audio source 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 し、項目のヘッダーにも使えます。 footer footer 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 図であることを表します。 img figcaption 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. ご清聴ありがとうございました!!

×