HTMLとCSSの勉強(3)

HTML５で使えるTipsをまとめてみました。

１、階層化構造
1) HTML5 で加わったセクション要素
<nav> … ナビゲーションを示すセクション要素
<article> … ブログの記事みたいに、独立しても意味が通るような部分を示すセクション要素<section> … 基本的に見出しを伴う文章のひと塊、段落とか章を示すセクション要素
<aside> … あまり重要でない部分を示すセクション要素

2) <section>を使って階層化する
<article>
<h1>ココに記事のタイトル</h1>
<p>ここにテキスト</p>

  <section>
  <h2>これは中見出し</h2>
  <p>ここにテキスト</p>
    <section>
    <h3>さらに中見出し</h3>
    <p>ここにテキスト</p>
    </section>
  </section>
 
  <section>
  <h2>中見出し</h2> 
  <p>ここにテキスト</p>
  </section>

<p>ここにテキスト２</p>
</article>

※<p>ここにテキスト２</p> という部分は、記事見出しの<h1>直下のセクションになります

3) <aside>要素
<aside> や <section> はセクション要素なので、入れ子にすればアウトラインが変化します。
階層下げを行いたくない場合は、、<div> を使います。
※<div>要素は文章的には意味を持っていないただのボックスで、アウトラインには影響を与えません

２、input要素
1) 「typeの値」を書き換えて、入力した値の書式をチェック
例： メールアドレスかチェック
　<input name="email" type="email">

タイプ要素は、「 date/datetime/datetime-local/month/week/time/number/range/search/tel/url/email/color」となります。
例：タイプ要素をdateにした場合
date:<input type="date" name="date"><br>

右矢印のボタンクリックでカレンダーが表示できるようになっています。
(HTML5以前はjavascriptで実装しなければなりませんでしたが、HTML5は簡単なコードとなっています）

2) 入力項目を必須にする
text要素に入力必須にする
<input name="text" type="text" require>

3) 非フォーカス時にinputに文字を表示させる
ｔextタイプにplaceholder属性が追加されています。

<input type="text" placeholder="お名前" name="name"><br>
<input type="email" placeholder="メールアドレス" name="email"><br>
<input type="url" placeholder="ホームページ、ブログのURL" name="homeUrl"><br>

【参考URL】
http://webdesignrecipes.com/semantic-html5-with-outline/
http://techblog.yahoo.co.jp/html5/html5/
https://w3g.jp/blog/html5report