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

BrowserSyncを使ったホットリロードに関して

BrowserSyncを使ったブラウザのホットリロードに関して。 ホットリロードとは「エディタなどで更新があった際にブラウザがすぐに検知して、最新の状態に自動更新してくれる」状態にブラウザをすることで …

no image

フォーム入力のポイント

以前のエントリーにならってさらにフォーム入力のデザイン上のポイントなどを。 Contents1 選択肢は横よりも縦で2 エラーがすぐにわかる入力欄を3 会員登録ではメリットをわかりやすく4 必須項目は …

no image

object-fitによる画像比率を保ったセンタリング

CSSでレイアウトを組むときにネックになるのが画像のレイアウトです。 と言うのも可変要素であり、幅を制御するのが難しかったりします。 参考リンク メインで使う画像のcssについて まあ縦長とか横長とか …

no image

スマホサイトの横ぐらつき ~border-size:border-boxigについて

スマホサイトをつくっていたところ、横幅がぐらつくというあり得ない事態に・・・ どうやら内部の幅が100%を超えるときにこの現象が起きてしまうようです。 Contents1 対策1 コンテンツの幅が10 …

no image

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …

アーカイブ