html 基礎・基本 html5編 #4

また、今日もhtmlの勉強のノートをまとめていきたいと思います。
前回までに勉強した内容に似た内容が出てくるところもあります。
気楽に見ていただきあると助かります。

DOCTYPE宣言

ブラウザに対してhtmlのバージョンを明示するためのものです。

今回学習するHTML5は最新使用でhtmlの新バージョンです。
また、今までのhtmlよりwebをよりくーつにできるようになりました。

外部スクリプトの読み込み

html5からはtype属性の省略が可能になりました。
<script src="main.js" type=""> </script>
上記に書いたものが、省略される前で、
<script src="main.js"> </script>
このように省略可能です。

外部スタイルシートの読み込み

外部のスタイルシート読み込みでも、type属性の初期値は省略可能になりました。
`

ヘッダーを表現！

私たちには文を意味を持たせて分けることができます。
ヘッダーの部分に、ナビゲーションやロゴ、サイト検索などを付けることができます。このように、その要素、要素に分けたいですが機械的には認識してくれないので、html5では<header> </header>を使います。

ナビゲーションメニューの作成

ナビゲーションメニューを作る際は<nav> /<nav>を使います。
ナビゲーションメニューはサイト内の他の場所に移動するようリンクが使われます。

フッターを表現！

html5でフッターを表現するためには<footer> </footer>を利用する。また、フッターは関連ドキュメントのリンクや著作権情報などが描かれます。

メインを表現する！

コンテンツでメインの場所を表現するには<main> </main>を利用する。注意すべき点があります。
mainは複数定義することができません
また、header,footer,nav`などの子要素にすることができません。

記事のグループを作成！

記事にグループを持たせるには、<section> </section>を使いまする。これを使うことで意味的にグループ化することができます。
また、記事の内容が単独で意味を成すものである場合はarticleタグのほうが適しています。

記事を表現！

<article> </article>
先ほども書いたように、単独で自己完結するコンテンツの場合を表現する際に使います。例としては、ブログの記事やコメントなどです。
また、ブログなどで時間などを表記する記事があると思います。
その時は、article内でtimeタグを使ってdatetime属性で表現可能です。
<article> <time daretime="2020-4-28">2020/04/28</time>

メインと関連性の低い要素の表現方法

広告や著者のプロフィール、関連リンクなどメインコンテンツと関連性の低いものを表現する際に<aside> </aside>タグを利用します。

ハイライトを付ける！

参照目的などで文字をハイライトする際に利用するのが<mart> </mark>タグです。
ハイライトはユーザーが直接的に関係のある文字に使います。

説明を表示させる！

略語の説明を追加する際などに<abbr> </abbr>タグを使います。
マウスカーソルを選択した文字の上に数秒間置くことで説明が出てきます。
<abbr title="look">rg</abbr>

文字にフリガナを振る！

文字にフリガナを振る際はまず最初に、文字全体を<ruby> </ruby>タグで囲います。そして、フリガナを<rt></rt>タグで囲います。
rubyをサポートしてないブラウザのためにrpがあります
これは、ブラウザにフリガナの存在を示すために利用します。
<ruby> 既視感<rp>(</rp><rt>きしかん</rt><rp>)</rp>
既視感(きしかん)、このようにフリガナを付けることができます。

日時を表現する！

先ほどarticle時に使った、timeとdatetimeを使います。これを使うことで機械に日付を認識させて使うことができます。細かく二つのタグの説明をします。
- timeは、機械に読める形で日付や時間を提供するために利用する。
- datetimeは、属性でこの中に日時を設定します。また、日時はISO8601形式の書式が必要です。
時刻だけを扱う場合には、datetime属性を使う必要はない。

図形を表現する！

図表を表現する際には、<figure> </figure>タグを利用します。
また、図表に説明を付ける際には<figcaption> </figcaption>を使います。figcaptionはfigureタグの子要素としなければなりません。
<figure> <img src="" alt=""><figcaption>図！</figcaption>

数値を入力させよ！

入力する値にルールを持たせて入力させてみる！
- 範囲を0-50
- 5刻みで増えていく！
入力フォームを作るにはinputタグを利用してtype属性にはnumberを使います。
- min:最小
- max:最大
- step:数値の増加量
<input type="number" min="0" max="50" step="5">

メールアドレスを入力してもらう。

メールアドレス入力フォームを作るには、inputタグを使ってtype属性にemailを設定する。
<input type="email">

電話番号の入力！

次は電話番号になりますが先の二つと同様にinputタグとtype属性を使います。今回はtelを属性に設定します。
`

日付と時間の入力！

ここも先と同じです。
日付ならdateを属性に設定。
時刻ならtimeを属性に設定。

進歩状況を表現！

進歩状況を表現したいときprogressタグを使います。
また、このタグは属性としてmaxとvalueを設定できます。
<progress value="10" max="50"></progress>

範囲内の値を表現！

テスト値
- 値
- 値の範囲
- 値が10以下は低い　20以上は高い
こんな時にはmasterタグを使う。
属性としてはvalue,max,min,low,highがある。
テスト値同様にやると、
<meter value="15" max="30" min="0" low="10" high="20"></meter>
このタグは、範囲が明確な場合に使用可能で範囲があいまいな時は使わないほうが良いです。

動画を埋め込む！

動画を埋め込む際には<video> </video>を使う。
また、再生コントロールを表示させるためにはcontrols属性を設定する。
また、複数のビデオコーディックに対応するためにsourceタグを使ってurlを指定する。
<video width="300" height="120" controls>
<source src="url" type="video/mp4"> </video>

動画読み込み中の画像を設定！

読み込み中のの画像を設定するにはposter属性に画像のurlデータを指定する。
<video width="" height="" controls poster="">

動画を自動再生！

動画を自動再生するためにはvideoタグにautoplay属性をつける。
<video width="" heifht="" controls autoplay poster="">

音楽を埋め込む！

音楽を埋め込むときはaudioタグを使います
また、コントロールにはcontrols属性をしたいします。
videoタグ同様に複数のオーディオコーディックに対応するためにsourceタグを使う。
<audio contorols> <source src="" type="" > </audio>

今回はここまでで終わりにします。
わからないところなどあれば是非質問お願いします。