コーディングHTML5の言葉が流行りだして結構な時間が経ちましたが、何が使えて、何がまだ使いにくい状況なのかをずっと放置していましたのでマークアップ、API周りについて少しまとめてみました。あとがきHTML5で追加された基本的なタグ新しいタグの追加によって文章構造がより明確化できるようになりました。HTMLの論理構造化はサイト構造の見通しを良くするのに加え、SEOの効果を見込めます。現在HTML5で書かれているからといってSEOに有利ということは確認できていません。現在HTML5でマークアップすることが主流となりつつあります。将来的なSEO効果は否定できないので、なるべくHTML5に沿ったマークアップがベターでしょう。headerヘッダーであることを示す。fotterフッターであることを示す。article単独で完結した記事であることを示す。sectionセクションを示すが特別な意味は持たない。※今まで使われていたdivがすべてsectionに置き換わるわけではない。asideコンテンツの補足情報であることを示す。navナビゲーションであることを示す。hgroupセクションの見出しの副題を示す。※この要素の中にはh1~h6要素しかいれることができない。figure画像やビデオ、プログラムコードなどのコンテンツを示す。※figcaptionと一緒に使う事が多い。figcaptionfigure要素のコンテンツタイトルや説明文を示す。フォーム機能で追加された代表的な属性HTML5ではフォーム機能が強化されたので、これまでjavascriptで実装していたプレースホルダ・オートコンプリート・バリデーションなどの機能をネイティブで扱えるようになっており大変便利です。ブラウザ毎での実装に差がありますのでどのサイトでも使用できるものではありませんが、スマートフォンサイトでは実装できるものばかりですので、使わない手はありませんね。placeholder=”〇〇”]入力欄に入力されたら消えるテキストを表示します。8/9は実装されていません。list=”hogehoge”]list=””で入力候補値のdatalist要素のIDを指定して入力候補を提示します。※ダブルクリックするとリストが表示されます。※type属性の値がpasswordの時は、list属性は指定できません。5.1では実装されていません。</datalist>入力候補を登録します。5.1では実装されていません。※対応していないブラウザでは正しくプレビューされません。モードが数字・記号になります。5.1では実装されていません。type=”email”]メールアドレス入力用。入力モードが英字・記号になります。multiple属性になると複数のメールアドレスが入力できます。5.1では実装されていません。required]必須入力にします。5.1では実装されていません。type=”date”]日付入力用。専用の入力ウインドウが表示されます。5.1、では実装されていません。type=”number”]番号入力用。入力モードは数字になります。5.1、では実装されていません。※IEを責めちゃいけないと思います。動画や音楽を扱うタグaudio、videoタグをサポートしているブラウザであれば再生に関して色々な表示ができるようになります。これまでのようにembetタグ+プラグインで表示する必要はありません。古いブラウザでサポートしていないものもありますので声を大にして使っていこうとは言えない状況でしょうか。ブラウザ毎に再生できるファイルの拡張子が異なるため複数再生ファイルを用意する手間があるせいか、PCサイトでは今でもFLASHを使ったものが多いです。スマートフォンはFLASHが再生できないものが主流ですので、スマートフォン向けのサイトであればどんどん使っていけますね。※IE8を責めちゃいけないと思います。poster=”hogehoge.jpg”]サムネイルの画像を表示します※動画を再生できない場合でもサムネイルは表示されます。controls]再生・停止などのインターフェイスを表示します。autoplay]動画を自動再生します。loop]動画をループ再生します。preload=”auto”]動画の自動読み込みを管理します。設定はauto、none、metadate、とあります。デフォルトの設定はautoとなっています。※metadateはメタデータ(サイズや長さなどの情報)だけを先読みするものです。hogehoge再生する動画を指定します。ブラウザごとに再生できる動画の形式が異なるため複数の動画を登録できます。このWebブラウザーは再生に対応していません。</video>上記はVideoタグで紹介しましたが、audioタグも同様です。11.5:OggAPI関係APIを使うことによって今まで複雑だった処理が便利に実装できるようになりました。ブラウザごとのサポートが異なるため今すぐ使えるというもので無いのが残念でなりませんが、HTML5でもっとも注目を集めているのがこのAPIなので放置しておいて良いものではないですね。話題の多いAPIを調べてみました。CanvasJavaScriptを使って図形や画像を取り込んで加工することができます。高速な描画ですのでスマートフォン向けのゲームなどで注目されています。15、Chome22、Safari5.1、iOS3.2、Android2.1以上のバージョンで対応しています。SVGこちらもCanvas同様図形を描画するものですが、以下のような違いがあります。・ベクター形式なので拡大しても綺麗な描画ができます。・図形毎にDOMの一部になります。・図形を書くためのHTMLタグがあります。・SVG用に用意されたタグに対してCSSで設定することもできます。※GoogleMapなどのサイトで利用されています。15、Chome22、Safari5.1、iOS3.2、Android3.0以上のバージョンで対応しています。ドラッグ&ドロップAPIこれまでもドラッグ&ドロップはJavaScriptで実現できていたものですが、HTML5でドラッグ&ドロップのイベントに関する属性が追加されて使いやすくなりました。注目されている点はブラウザ内だけではなく、デスクトップからもドラッグ&ドロップできるという点です。inputタグでアップロードしていたものがドラッグ&ドロップできると考えると便利なシーンがいくつもありますね。15、Chome22、Safari5.1のバージョンで対応しています。Apiローカル環境にあるファイルの情報を取得できるAPIです。取得できるファイル情報は以下のようなものがあります。15、Chome22、Safari5.1(部分的にサポートしています)、iOS6、Android3.0(部分的にサポートしています)以上のバージョンで対応しています。APIデータを保存するAPIです。Cookieと似た動作をするものですが、下記のような違いがあります。・保存できるデータ量がCookieに比べて多い・有効期限がないこと・いちいちサーバーに送信しない保存できるデータ量が多くサーバーへの負担も少ないので、何度もアクセスするようなWebアプリに注目されています。15、Chome22、Safari5.1(部分的にサポートしています)、iOS6、Android3.0(部分的にサポートしています)以上のバージョンで対応しています。APIブラウザがオフライン状態のときにでもWEBサイトやWEBアプリを使用出来るようにするAPIです。サイトにアクセスした際にCacheとしてローカル環境に保存します。オフラインで表示されると言ってもサーバーへのリクエストが必要な場合は表示できませんので注意が必要です。API同様、WEBアプリで注目されています。※サーバーにリクエストしないようなサイトに限る。15、Chome22、Safari5.1、iOS3.2、Android2.1以上のバージョンで対応しています。APIデータベースをローカル環境に保存するAPIです。JavaScriptで操作できるの特徴です。APIと連携してデータベースも操作できるWEBアプリも作れる点に注目を集められています。※スマートフォンの標準ブラウザでの実装が遅れています。15、Chome22(部分的にサポート)以上のバージョンで対応しています。API並列処理をするAPIです。何かプログラムが処理されている間ブラウザが固まってしまうことがありますが、そういった場合でも処理ができるAPIです。APIを複数利用したり、スペックに差がある端末などがありますので、HTML5が普及していけば行くほど注目されていくでしょう。15、Chome22、Safari5.1、iOS5.0以上のバージョンで対応しています。APIユーザーの位置情報を取得するAPIです。ユーザーに許可を求めて位置情報を取得できます。地域密着の広告や地図情報と連動するようなWEBアプリで注目されています。15、Chome22、Safari5.1、iOS3.2、Android2.1以上のバージョンで対応しています。あとがきブラウザの対応状況を見るとまだまだ使えないように思えるかもしれませんが、スマートフォンサイトではかなり対応している状況です。HTML5は未完成と言われたり、ブラウザ毎のサポートが異なる事で消極的に使用されている印象がありますが、使えるものはたくさんあります。使えると思ったところから少しずつ使っていくことでHTML5の完成が早まる可能性はあるでしょう。完成したものが素晴らしいのではなく、完成まで到達させることも十分魅力のあることだと思います。使えるところから少しずつHTML5慣れしていく事は悪い事ではないので、今年もHTML5と持ちつ持たれつしていきます。ツイートこの記事を書いた人conti大阪で東京の事業会社でフルリモートワークで働いているWebデザイナーです。副業とか好きで週末フリーランスしてます。コードを書くのが得意なのでプログラマーに愛されるデザイナーってよく言われます。プロフィール記事一覧Twitter古い投稿このフレームワークに惚れたらレスポンシブデザインについて色々考えちゃいました新しい投稿コーディングのお供に!CSSの更新を自動で反映させてくれる便利なブックマークレート関連記事コーディングPhotoshopとかにある描画モードはCSS3で出来るよ【サンプル有り】CSS3になって角丸はグラデーション、ドロップシャドウなどデザインツールを駆使して行っていたデザインがいとも簡単にできるようになりましたね。[...]conti2014年10月7日コーディング【サンプル有り】gulpで作るスタイルガイド-aigisに乗り換えましたスタイルガイドジェネレーターをaigisに乗り換えました。conti2016年11月22日コーディング【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみたTwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。そのCSSは「font-feature-settings」というものです。conti2016年12月1日コーディング今更だけどretina対応を考えてみた[簡単]そろそろiPadminiのretina対応が発表されて意識の高い気分の人たちが、「うむ、やはり時代はretinaだな」とか言うんじゃないかと睨んでます。運用ノウハウ開発cntlog。