Embed Size (px)
DESCRIPTION
3月10日にGDG京都さんのイベントの「GDG DevfestW Kyoto」で発表してきました。 https://sites.google.com/a/kyoto-gtug.org/devfestw/ HTML5でWebサイトを作ると制作者的に楽ですよ、と言うネタです。 使えるタグとその覚え方、困ったことに対する処理方法の紹介です。
Citation preview
HTML5でごく普通のWebページを作る
螺旋デザイン 佐藤とも子
GDG Women DevfestW 2013.03.10
自己紹介
螺旋デザインという屋号でWebデザインやコーディング、執筆業をしています。
自己紹介
Twitter…@tomokoNeko
Facebook…いますがあんまり活動していません！（佐藤とも子で探してください）
趣味はドラクエ10…本職は盗賊でLv47です。転職しつつ修行中です。
ごく普通のWebページとは
普通、って人それぞれですが
特に斬新な仕掛けなどのない
Webページのことで進めて行きます。
HTML5 なぞの技術
IE6で使えない
IE7で使えない
IE8で使えない
記述ルールが変わる
タグがムッチャ増えた
Webアプリケーションはつくらないから関係ない
HTML5ですよー。って言いたいだけでは！
HTML5を取り巻く代表的なネガティブ意見！
HTML5
HTML5でWebサイトを組むメリット
data-**の属性を自由に作れる
この仕様を利用したjQueryプラグインが利用できる
万が一の時に頼れるjQueryプラグインの幅が広がる
タグが増えたソースが見やすいdivだらけにならない
classやidの命名で悩む時間が減る
実際に見比べてください！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>タイトル</title></head>
<body>
<div class="header"><h1><a href="index.html"><img src="img/logo.png" alt="ロゴ" width="417" height="60"></a></h1><address><p class="adr">〒000-0000<br>大阪市○○町1-2-3</p><p class="tel"><img src="common/img/tel.png" alt="電話" width="26" height="23" />00-0000-0000</p></address><ul> <li><a href="event.html"><img src="common/img/btn01.png" width="206" height="46" alt="体験入学" /></a></li> <li><a href="mailto:****@*****"><img src="common/img/btn02.png" width="206" height="46" alt="資料請求"></a></li></ul><div class="nav"><ul><li><a href="index.html">トップ</a></li> <li><a href="information.html">お知らせ</a></li> <li><a href="guide.html">学校案内</a></li> <li><a href="course.html">コース紹介</a></li> <li><a href="event.html">イベント</a></li></ul></div></div>
<!DOCTYPE HTML><html lang="ja"><head><meta charset="UTF-8"><title>タイトル</title></head>
<body>
<header><h1><a href="index.html"><img src="img/logo.png" alt="ロゴ" width="417" height="60"></a></h1><address><p class="adr">〒000-0000<br>大阪市○○町1-2-3</p><p class="tel"><img src="common/img/tel.png" alt="電話" width="26" height="23">00-0000-0000</p></address><ul> <li><a href="event.html"><img src="common/img/btn01.png" width="206" height="46" alt="体験入学"></a></li> <li><a href="mailto:****@*****"><img src="common/img/btn02.png" width="206" height="46" alt="資料請求"></a></li></ul><nav><ul><li><a href="index.html">トップ</a></li> <li><a href="information.html">お知らせ</a></li> <li><a href="guide.html">学校案内</a></li> <li><a href="course.html">コース紹介</a></li> <li><a href="event.html">イベント</a></li></ul></nav></header>
XHTML HTML5
HTML5にすると！
新規やリニューアルの構築時、ついでにHTML5化するのがおすすめです。
「なんかHTML5がすごいらしいです」などと言ってHTML5化だけの リニューアル案件をとると後で困りそうなので気をつけてください！）
必ずしもスーパーな機能が付くわけでは無いです！！
注意点
具体的なコーディング方法
IE6-8をHTML5に対応させる
HTML5で増えた要素を古いIEは認識しません。これに対応させるJavaScriptがあります。
html5shivhttps://code.google.com/p/html5shiv/
ダウンロードしてIE9未満のバージョンが読むようにリンクさせます。
html5shivの使い方
これをhead内に書き込むと古いIEでもHTML5の要素で崩れがでません。
似た名前の「html5shim」もありますが、どちらも同じです。
<!--[if lt IE 9]><script src="jsファイルを格納しているフォルダ/html5shiv.js"></script><![endif]-->
IE6-8のHTML5対応
html5shivの効果は型崩れ防止なだけで、斬新な機能（canvasなど）がonになるわけではないです！
それらの機能が必要な場合は別途、ライブラリを探しましょう。
注意点
HTML5で増えた主な要素
article section nav aside headerfooter figure figcaption time markruby rt rp wbr embed video audiosource track canvas datalist keygenoutput progress meter detailssummary command menu dialog
HTML5で増えた主な要素でdivの代わりに使えそうな物
article section nav aside headerfooter figure figcaption time
大分減りました！これなら覚えられそうですね！！
HTML5で増えた要素
ヘッダーです。ページ全体のヘッダーにも使えますし、項目のヘッダーにも使えます。
header
footerフッターです。ページ全体のフッターにも使えますし、項目のフッターにも使えます。
header
footer
header
header
footer
header
footer
HTML5で増えた要素
意味のあるひとまとまり。見出し要素があることが望ましいです。
section
article独立した記事、投稿内容、コメント、ウィジェットなどに利用します。
HTML5で増えた要素
ナビゲーションです。そのページでメインとなるナビゲーション群にマーキングします。
nav
メイン情報から外れる内容です。アフィリエイトなどのマーキングにいいでしょう。
aside
HTML5で増えた要素
時間をあらわします。
世界標準時を基準にした非常に正確な時間の指定もできます。
time<time>2013年3月10日</time>
簡単な表示
<time datetime="2013-03-10">今日</time>
曖昧な言葉に正確な日にちを設定
<time datetime="2013-03-10T13:00+09:00">いま</time>
曖昧な言葉に正確な時間まで設定
<time> 宇宙ができた時</time>
正しい時間が分からないものには使えません。
HTML5で増えた要素
図であることを表します。
figure
figcaption図に対するキャプションです。
img
figcaption
<figre> <img src=”****”> <figcaption>キャプション</figcaption></figre>
HTML5で意味が変わったタグの一部
小さめの文字small
em強調・斜体
strong強調・太字
注釈や細目。コピーライトにも。
強調
さらに強い強調
HTML5KARUTA http://roadstohtml5.com/html5karuta/
サイトに公開されているバージョンがちょうど普通にサイトを組むのにいいタグが出ています！
記述ルールの変更
閉じタグの扱いが変わりました
<img src="homuhomu" />
<img src="homuhomu">
閉じアリ
閉じナシ
どっちでもいいんです！
記述ルールの変更
単純化された記述
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8">
文字コードがUTF-8ですよ。って表示が！！XHTML
HTML5
非常に単純化されました。HTML宣言も短くなっています。
Dreamweaverのテンプレート＋短縮された文字コード指定＝文字化けします( ;´༎ !Д༎ !`)
回避法1短縮された記述を使わない。
これでOK!
注意点
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Dreamweaverのテンプレート＋短縮された文字コード指定＝文字化けします( ;´༎ !Д༎ !`)
注意点
回避法2短縮された記述と長い記述を併用する。
最終的にテンプレートタグを外す場合に。テンプレートを外したあとに長い方の記述をサイト内置換で削除する。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8">
ブロック要素をマーキングしてはいけないルールが無くなったので、使い勝手が向上しました。
どちらもOK！！
記述ルールの変更
a要素が便利に！
<a href="#" ><h1>homuhomu</h1></a>
<a href="#" ><table>…省略…</table></a>
HTML5を使えない事情がある場合は…
classの名前にHTML5の要素をつかってみる
このような調子で使うと慣れてくるので移行時に楽だし、class名を考える手間が減ります！
<div class="section">homuhomu</div>
<div class="article">homuhomu</div>
HTML5をXHTMLにするためには
置換して、XHTMLにしてしまいましょう。正規表現を使うと少し楽です。
/article|/section|/nav|/aside|/header|/footer|/figure |/figcaption↓/div
HTML5の主な新規要素の閉じタグをまとめて閉じdivに
<article↓<div class=”article” <!-- 使ったタグだけがんばって置換 -->
開始タグは地道にいきましょう
ご清聴ありがとうございました！！
