chasoHTML5って何?どんな機能があるの?HTMLの特徴をまとめてみたツイートシェアはてブGoogle+Pocketハム氏ねぇねぇ、HTML5って何?HTML4と何が違うの?なっちゃそHTMLにはバージョンって考え方があってね、それの最新が今はHTML5なんだよ。HTML4と比べるとだいぶ仕様が変わっていてすごく使いやすいバージョンだよ。今回はその中でよく使う機能を紹介していくね。ハム氏よろしく頼むよ。なっちゃそHTML自体がよくわからんっていう人は『超入門!HTMLを徹底的に解説します』で概要を掴んでから読んでね。CSS3と合わせると描画表現の幅が広がるまとめHTMLのバージョンについてちょこっと解説HTMLにはバージョンというものがあって、バージョンによって使えるタグの種類やHTMLの書き方が違ってきます。Consortium)という組織らしいです。(ウィキペディアより)まあ・・・これについては興味ある人は調べてみてください(笑)そして、今使われているバージョンは「HTML4.01」「XHTLM1.0」「HTML5」の3つ。1つずつ解説していくと、HTML4.01最も一般的に使われているHTMLのバージョン。XHTLM1.0HTML4.01を拡張したもので特徴を似ています。記述方法がかなり厳密ですが、一方で要素を拡張することができるという特徴があります。HTML5最新のバージョン。以前のバージョンに比べて使えるタグの種類が増え、よりシンプルに書くことができるようになりました。検索エンジンに優しくなったとも言われています。最近はブラウザの対応も追いついてきたのでこのバージョンが主流になりつつあります。わたしも普段このバージョンを使ってサイトを作っています。実際のところどんな機能があるの?なっちゃそHTML5になって便利になった点はたくさんあるんだけど、今回は6個ピックアップして紹介していくね。HTML5の特徴ここではHTML5の特徴を6つに絞って紹介していきたいと思います。コンテンツモデルという概念があるHTML5以前のバージョンにはブロック要素・インライン要素という概念があり、全てのタグがこのどちらかに分類することができましたが、HTML5ではこのブロック要素・インライン要素という考え方が消えて7つのコンテンツモデルという概念になりました。7つのコンテンツモデル、一体どんなものなのかというとざっくりとこんな感じ。・メタデータ・コンテンツ・・・・文書情報や他の文書との関係を定義するもの・フロー・コンテンツ・・・子孫にテキストなどを持つもの・セクショニング・コンテンツ・・・見出しと概要をつけられるもの・ヘッディング・コンテンツ・・・セクションの見出しとなるもの・フレージング・コンテンツ・・・段落などの中に含まれる文節・語句など・エンベディッド・コンテンツ・・・文書に他のリソースを埋め込むもの・インタラクティブ・コンテンツ・・・ユーザーによる操作に対応するものこれらすべてを覚えないといけないということではないので今の段階では「コンテンツモデルという考え方がある」ということをふわっと覚えておく程度で大丈夫です。構造がシンプルで検索エンジンに優しい以前までのバージョンではコンテンツが<div>タグ埋め尽くされるという現象が起きていたのですが、HTML5では要素の役割を表すタグが新しく作られたため、非常にすっきりとソースを書くことができます。コンテンツ内のどの部分がどのような役割を担っているのかを検索エンジンが把握しやすくなったため、検索エンジンに優しくなったと言われています。なっちゃそHTML5から使えるようになった便利なタグをいくつか紹介しますね。header文書のヘッダー部分を表現するときに使うfooter文書のフッター部分を表現するときに使うnavナビゲーションを表現したいときに使うarticleそれ地震で完結していて、ユーザーに理解ができるコンテンツに使うまた、sectionタグと同様にこれで内包されたタグはレベルが1つ下がりますが、見出しタグは必須でないです。sectionコンテンツの1章2章3章と区切る部分で使う見出しタグと必ずセットで使用する必要がありますが、sectionで囲むと見出しタグ(hタグ)のレベルが1つ下がってしまうので注意が必要です。動画や音声が組み込みやすい以前までのバージョンではサイトに動画を組み込みたいときに「Flash」という少し複雑な技術を使っていましたが、HTML5では<video>タグなどを使用して動画や音声データをHTML内に組み込むことができるため動画や音声をシンプルに扱うことができます。HTMLに組み込んだ動画はPCだけではなくスマホなどでも再生することができるため、対応機種を機にする必要がありません。Webアプリケーションが作りやすいHTML5では高度な機能を実現するための様々なAIPが新たに追加されています。Interface(アプリケーション・プログラム・インターフェース)の略で、OSや、部品化されたソフトウェア(コンポーネント)など、ソフトウェア開発者が共通して使う機能を、外部から呼び出して利用するための規約のことです。個々のソフトウェア開発者はAPIに従って公開されている機能を利用することで、開発者が一からプログラミングすることなく、高機能なコンテンツや機能を短期間かつ低コストで開発することができるようになります。(インターネット用語辞典より)つまりアプリケーションをプログラミングする際に指定する命令や関数の記述ルールを定めたものでこれを使用すると簡単な記述で色々な機能が実装できるよってことです。これについてはいつか別途記事にするかもしれませんが多分きっとしません(笑)HTML5から加わった機能をいくつか紹介しておきますね。これらはそれぞれのAPIで定められた命令や関数を使用すればシンプルな記述で実装することができます。HTML5ではより高度な機能を持ったウェブアプリケーションをウェブ標準として構築することができる・・・みたいです。わたしはアプリには詳しくないのでこの機能についてはこの辺で。様々な機能がついたフォームを作成することができるHTML5のinput要素にはいくつか便利な属性が追加されていて、はこれまでJavaScriptを使わないと実装できなかった機能をお問い合わせなどのフォーム(入力欄)に設置することができるようになっています。なっちゃそ入力フォームはwebサイトを作る場合は頻繁に作ることになる部分なので、これから紹介する属性は覚えておくと結構使えますよ。autofocus属性・・・この属性を指定すると、ページを読み込んだタイミングで入力欄にフォーカスが当たります。基本的に検索ボックスやお問い合わせフォームの一番上の入力欄に設置するとよいかと思います。autocomplete属性・・・この属性をonにすると、ユーザーが入力したデータをもとに自動的に候補を提示してくれるようになります。検索フォームとかに設定すると便利ですね。required属性・・・お問い合わせフォームなどによくある入力必須の項目に指定する属性です。この属性を指定すると指定された項目内が空欄の場合はエラーが表示されます。これが一番使用頻度が高いですね。pattern属性・・・この属性を使うと入力項目のフォーマットを指定することができます。入力された内容がフォーマットで指定したパターンと一致しなかった場合はエラーが表示されます。電話番号の欄には数字のみ、メールアドレスの入力欄には半角英数字のみを指定することでフォーマットを制限することができます。placeholder属性・・・この属性を使うと入力欄に何を入力したら良いかわかりやすくなるようにヒントをうっすら記述することができます。電話番号やメールアドレスなどで設置するとわかりやすくで良いかと思います。CSS3と合わせると描画表現の幅が広がるHTML5と並んでCSS3というCSSのバージョンがあるんですが、これを駆使すればこれまでJavaScriptを使わないと実現できなかったエフェクトやアニメーションをHTMLとCSSのみで実装することができるんです。控えめに言って最高ですね。なっちゃそCSS3については別途丁寧に解説していきたいのでここでは軽〜く紹介するだけにしておきますね。・アコーディオン実装このような機能をJavaScriptなしで実現できるとデザインの幅が広がって楽しいですね。まとめいかがでしたか?ちょっと前まではHTML5はブラウザ対応が追いついておらず「便利だけど使えない・・・」といった状態でしたが、最近はブラウザ対応も追いついてきたみたいなので存分に使ってみてくださいね。コメントをキャンセルメールアドレスが公開されることはありません。新しい投稿をメールで受け取るレスポンシブ対応が楽になる!BootstrapについてまとめてみたCSSは怖くない!CSSの役割と使い方RECOMMENDこちらの記事も人気です。Webデザイン2018.4.24要素に余白を作るCSS、paddingとmarginの違いと使い方を徹底解説Webデザイン2018.4.19CSSだけでアニメーションやエフェクトがつけられるCSS3の便利な機能を...Webデザイン2018.1.9Webデザイナーって何?どんなことしてるの?Webデザイナーの仕事を徹底...Webデザイン2018.4.9レスポンシブ対応が楽になる!BootstrapについてまとめてみたWebデザイン2018.4.7HTMLの役割って何?どうやって使うの?HTMLの基礎を徹底的に解説しますWebデザイン2018.4.8CSSは怖くない!CSSの役割と使い方なっちゃそのプロフィールWebデザイナー&グラフィックデザイナー新卒で入社した会社を半年で辞め、完全未経験から独学でフリーランスのデザイナーになった23歳。『視野を広げて正しい努力をすれば人生に我慢は必要ない』ことを証明したい。『死ぬこと以外かすり傷』のまとめをまとめてみたマレーシアに移住するメリットとデメリットを正直にまとめてみたノリと勢いでマレーシア移住を始めてしまいました自分の仕事や職場環境は今の自分の価値の鏡だぞ。