skillup

技術ブログ

デザイン

HTML5について

投稿日:2016年9月12日 更新日:

CSSのサンプルを書いていく途中で、HTML5タグが出来てたので簡単におさらいです。

HTML5のメリット

  1. 動画の埋め込みなどが比較的簡単にできる
  2. 新しいタグが作られ、よりHTMLをすっきりかけるようになる

1ですが、私はあまり触れたことがないです。ここでは2を中心に説明していこうかなあと思います。

HTML5とは何かを簡単にまとめてみた

HTML5とは?初心者向けに特長や使い方を超わかりやすく説明してみた

form周りのhtml

html5はform周りのタグが進化しています。

必須チェック(requied)やオートコンプリート(autocomplete)などをすることができます。

ただし、ブラウザなどではきかないものもあるようなので調べておきましょう。

フォームを劇的に使いやすくする!HTML5の8つの新属性

HTML5 でフォームを大幅に改良

文章構造の明確化

header,footer,nav,section,articleなどですね。従来だとすべてdivで分けていたと思いますが、これらのタグを使うことによりHTMLをよりわかりやすく書くことができます。

navについて

主にグローバルナビなど。

[15-4] リストマーカーを画像や任意のテキストに変更する方法

sectionとarticleについて

  • sectionとarticleですが一般的に下記のような基準で使い分けられるようです。
  • 情報のあるコンテンツはarticleかsection
  • そのコンテンツ自体で独立している場合はarticle、そうでない場合はsection(パーツや要素)
  • 意味のないhtml上のタグ(レイアウトを組むためのもの)などはdiv
  • ただすごく神経質に使い分ける必要はなさげ(汗)

あとは例をいっぱい見て、体で覚えたほうがよさげですね。

参考リンク

HTML5の新規タグ「section、article、header、footer」の使い方

もう悩まない!HTML5の「section要素」と「article要素」の違いについて

divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ

HTML5のお勉強 articleとsectionとか

-デザイン
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

cakePHP+bootstrapでのページャー

cakePHP+bootstrapでページャーのリンクを下記のように出力したいときのメモを。 ソース コントローラーのほうでは特に設定する必要なはく、HTMLのほうで下記のように設定すればOKです。 …

no image

flexについて

CSSのflexをちょこちょこ使ってます。 以前下記リンクで超簡単なサンプルは動かしましたが、実践的なことは何もやっていませんでした。 css flexbxについてどんなことができるのか 使って思った …

no image

レスポンシブデザインの作成ポイント

本日はレスポンシブデザインの表現方法について。 スマホでは何も指定しなければブラウザはウェブサイトの幅が980pxと仮定しています。 要は通常の980px分をそのままiPhoneの画面に収まるよう縮小 …

no image

tableでのヘッダー固定に関して+borderを描く時のコツ

Contents1 tableでのヘッダー固定について2 borderを描く時のコツ tableでのヘッダー固定について 超小ネタですが、tableのヘッダー固定に関して。 ソースは下記リンクに。 h …

no image

ワンポイント画像系のcssでの実装

主にリストやリンクなどのワンポイントアイコン系の画像をどう実装するかについて。 Contents1 list-style2 background-image3 Font Awesome4 after5 …