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…@tomokoNeko


Facebook…
いますがあんまり活動していません!
(佐藤とも子で探してください)


趣味はドラクエ10…
本職は盗賊でLv47です。
転職しつつ修行中です。
ごく普通のWebページとは




普通、って人それぞれですが

特に斬新な仕掛けなどのない

Webページのことで進めて行きます。
HTML5を取り巻く代表的なネガティブ意見!




  HTML5ですよー。って言いたいだけでは!


  IE6で使えない                  記述ルールが変わる


  IE7で使えない
                  ...
HTML5でWebサイトを組むメリット


                      classやidの命名で悩む時間が減る
                              ソースが見やすい
    divだらけにならない

  ...
実際に見比べてください!
XHTML                         HTML5

 <!DOCTYPE html PUBLIC "-//    <!DOCTYPE HTML>
 W3C//DTD XHTML 1.0      ...
注意点
HTML5にすると!


       必ずしもスーパーな機能が
       付くわけでは無いです!!


新規やリニューアルの構築時、      ついでに
HTML5化するのがおすすめです。

「なんかHTML5がすごいらしいです」...
具体的なコーディング方法
IE6-8をHTML5に対応させる

HTML5で増えた要素を古いIEは認識しません。
これに対応させるJavaScriptがあります。


html5shiv
https://code.google.com/p/
html5shiv/


ダ...
html5shivの使い方

<!--[if lt IE 9]>
<script src="jsファイルを格納しているフォルダ/html5shiv.js"></script>
<![endif]-->




 これをhead内に書き込むと古い...
注意点
IE6-8のHTML5対応



html5shivの効果は型崩れ防止なだけで、
斬新な機能(canvasなど)がonになる
わけではないです!

それらの機能が必要な場合は別途、
ライブラリを探しましょう。
HTML5で増えた主な要素

 article       section    nav   aside      header
 footer        figure     figcaption     time     mark
ruby...
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
図であることを表します。
                                     img


figcaption
                                  f...
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" />

...
Dreamweaverのテンプレート                                    注意点
+短縮された文字コード指定
=文字化けします( ;´༎!Д༎!`)


回避法1
短縮された記述を使わない。

<meta ht...
Dreamweaverのテンプレート                                    注意点
+短縮された文字コード指定
=文字化けします( ;´༎!Д༎!`)

回避法2
短縮された記述と長い記述を併用する。

<met...
記述ルールの変更

a要素が便利に!

ブロック要素をマーキングしてはいけないルール
が無くなったので、使い勝手が向上しました。

<a href="#" >
<h1>homuhomu</h1>
</a>

<a href="#" >
<tab...
HTML5を使えない事情がある場合は…



classの名前にHTML5の要素をつかってみる

<div class="section">homuhomu</div>

<div class="article">homuhomu</div>
...
HTML5をXHTMLにするためには

置換して、XHTMLにしてしまいましょう。
正規表現を使うと少し楽です。
HTML5の主な新規要素の閉じタグをまとめて閉じdivに

 /article|/section|/nav|/aside|/hea...
ご清聴ありがとうございました!!
Upcoming SlideShare
Loading in …5
×

of

GDG Women DevfestW Slide 1 GDG Women DevfestW Slide 2 GDG Women DevfestW Slide 3 GDG Women DevfestW Slide 4 GDG Women DevfestW Slide 5 GDG Women DevfestW Slide 6 GDG Women DevfestW Slide 7 GDG Women DevfestW Slide 8 GDG Women DevfestW Slide 9 GDG Women DevfestW Slide 10 GDG Women DevfestW Slide 11 GDG Women DevfestW Slide 12 GDG Women DevfestW Slide 13 GDG Women DevfestW Slide 14 GDG Women DevfestW Slide 15 GDG Women DevfestW Slide 16 GDG Women DevfestW Slide 17 GDG Women DevfestW Slide 18 GDG Women DevfestW Slide 19 GDG Women DevfestW Slide 20 GDG Women DevfestW Slide 21 GDG Women DevfestW Slide 22 GDG Women DevfestW Slide 23 GDG Women DevfestW Slide 24 GDG Women DevfestW Slide 25 GDG Women DevfestW Slide 26 GDG Women DevfestW Slide 27 GDG Women DevfestW Slide 28 GDG Women DevfestW Slide 29
Upcoming SlideShare
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

GDG Women DevfestW

Download to read offline

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

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

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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…@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. ご清聴ありがとうございました!!

3月10日にGDG京都さんのイベントの「GDG DevfestW Kyoto」で発表してきました。 https://sites.google.com/a/kyoto-gtug.org/devfestw/ HTML5でWebサイトを作ると制作者的に楽ですよ、と言うネタです。 使えるタグとその覚え方、困ったことに対する処理方法の紹介です。

Views

Total views

1,835

On Slideshare

0

From embeds

0

Number of embeds

280

Actions

Downloads

8

Shares

0

Comments

0

Likes

0

×