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

laravel Mix

Contents1 laravel Mix2 インストール laravel Mix 実務でlessを使っていて便利なのですが、コンパイルをatomのプラグインで行っていました。 ※保存されると自動的に …

no image

フォーカス時のみ書き込み可能になるHTML要素について。contenteditableなど

通常はただのテーブル(or普通のHTML)ですが、クリックするとinputになり、入力が可能になる手法について。 contenteditableなど 普通のHTML要素に [crayon-65e55e …

no image

実務でCSSを書く時のポイントについて

先月にかなりたくさんCSSを書いたんでその時感じたポイントみたいなものを。 Contents1 いきなりかかずにまず共通部分をみつける2 見た目の調整には紙に印刷して横においておく3 色や幅、フォント …

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …

no image

画面の制御フローなど

複雑な帳票系アプリではよくあると思うのですが、ある入力値が複数の場所から影響を受けており、制御がなかなか難しいときなどがあります。 例として クリアボタンなどでクリアされる 他のプルダウンなどで影響を …

アーカイブ