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

スマホサイト対策全般

スマホ対策のデザインに関するチェックリスト。 Contents1 viewport2 横のはみ出しチェック3 メディアクエリ viewport まずは横幅などがおかしくないかの確認 [crayon-6 …

no image

flexについて

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

no image

CSSのレイアウト例 その4 グリッドレイアウト

本日はグリッドレイアウトについて。 このサイトだけ見ても多分、デザインのイメージはわかないと思います(汗) サイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザイン …

no image

compassについて

sassをベースにしたフレームワークがcompassです。 Contents1 compassとは?2 使用方法3 参考リンク compassとは? sassの記法をベースにCSSファイルの作成が可能 …

no image

CSSネタに関して

何回か書いてきたCSSのまとめネタ的なもの。 紙で印刷しておくと生産性が3倍ぐらいになる。思った以上にコーディングがしやすい。 良く使うユーティリティ系の操作をまとめる。ベンダープレフィックス以外にも …