ドットインストールでHTMLを学ぼう#22~#24
ドットインストールでHTML入門編を学ぶ、最終日です。
#22 HTML5から使える属性を使ってみよう
email、number、date
inputタグの中に、以下のような属性を入れることができます。
number
date
これら属性を使うと、入力するための補助部品を表示してくれたりするそうです。
「へー！便利そう」
便利になるのはいいことですよね＾皿＾
「メールアドレス」のtype、nameを"email"に。
「料金」のtypeを"number"、nameを"price"に。
「誕生日」のTypeを"date"、nameを"birthday"に。
nameも正しく変える必要があって大変そうですが、書き換えます。
するとブラウザで見るとこのようになります。
うん、わかりやすい感じですね。
とくに「誕生日」はこのように最初から生年月日を書くことが指示されていてわかりやすいです。
これは使い勝手も非常によいです。
たとえばメールアドレスにアドレスっぽくない文字列を入れて送信しようとすると、
「＠」がないよ、と教えてくれます。
いたずらも防げそうで便利！
同じように、価格のところに文字を入れると
「数字にしてね」と言われます。numberのおかげか…！
ちなみに、右側に矢印がついているので、（かえって大変な気がしますが）上下ボタンのみを押して価格を入力することもできます。
誕生日に関しては、右側の三角からカレンダーを表示させることもできるんです！
「date」って便利だね！
required
requiredは入力を必須にするときのための属性です。
<p>メールアドレス<input type=""email" name="email" required></p>
reguired属性を入れると、
この「メールアドレス」のところに何かを入力しないと送信ボタンが押せないようにすることができます。
（送信ボタンを押そうとしても押せない）
email属性とrequired属性の合わせ技で、いたずら送信がなくなりそうですね。
novalidate
email属性などでメルアドっぽいものを入力しないと送信できないようにしたり。
required属性で入力しないと送信できないようにしたりした設定を
無効化できる属性がnovalidateです。
「？？」
（なんでわざわざ無効化する必要が？）
ぽんきちさんの単細胞脳では理解できませんが、きっと必要なときもあるのでしょう。
<form action="survey.php"method="post" novalidate>
(actionやmethodについてはこちらの記事でご紹介しています)
novalidateを入力すると、
ブラウザの画面で送信ボタンを押せるようになっています。
email,required < novalidate
という強さなのですね。
HTML5を使うときの注意点
これらの属性は、対応できないブラウザもあるので要注意です。
caniuse.comで調べると、
対応できないブラウザがあることがわかります。
このページ、初めて見た。便利ですね。
また、動画では
セキュリティ上の問題はフォームから発生することが多く、
全ての人がこれらの機能を使えるブラウザを使っているわけではない
と説明されています。
HTML5は便利な属性がたくさんありますが、安全なページを作っていくためには
慎重に使っていかなくてはならないですね。
#23 文字参照を使ってみよう
文字参照とは、文章中に直接記載できない文字を表示する方法です。
たとえば、次のような例が考えられます。
見出しが「文字参照で、
その次の段落で次の文字を表示させたいとします。
「<p>タグを段落です」
これを<p>も含めて見た目通りに表示したいのに、ブラウザで見ると
こんな感じに、「」の中の<p>まで段落にされてしまっています＾＾；
違うの！この<p>を文字として書きたいの！という時に使うのが文字参照。
はてなブログなら、「見たまま編集モード」にすればいいだけなので簡単ですよね。感謝。
数値文字参照「<」文字実体参照「<」
文字参照には二種類あります。
そのうちの数値文字参照は
<:
文字実体参照は
<
です。
この<p>の部分を
<p>
とすると、当初やりたかった通りに表示されます。
<p>とブラウザにも表示することができました！
「え？なんで？？」
>ってそもそもどこからきたの？？
<が「<」で、>が「>」だってこと？？
本格的に意味がわからないわたし。しかし動画は進みます。もうこのまま覚えちゃうことにします。
文中に"という文字を入れたいとき
同じように、文中に「"」（ダブルクォーテーション）を入れたい時があるとします。
このままだと、
value="区切り文字は"です"
の、赤の"の部分が属性値なのか文章中に表示させたいのかわからなくなります。
「文章中に表示させたいんだよ」ということを示すために、これも文字参照にします。
value="区切り文字は"です"
これで、赤字の部分が"になります。
うん、" になってる。
（関係ないですが、入力タグになっているのでびっくりしました。
確かに<input>タグの中身であった…）
文字参照には&マークが入るので、「&」自体にも文字参照しなくてはならない
たとえば、このように書きたいとします。
「この記号の文字参照は"です」
でも、これを表示すると先ほどと同じように赤字の部分は「"」になってしまいます。
「&」って表示したいのに！
「&」を表示するには、&マーク自体を文字参照する必要があります。
「この記号の文字参照は&quot;です」
これをブラウザで見ると、
「この記号の文字参照は"です」
と表示されます。
「…。」
「禅問答かな？」
文字のわからなさに悟りを開きそうになりましたが
ひとつひとつ説明する必要があるんだよ、というところがわかればいいや、というところに落ち着くことにしました。
ここ、実際に使わないといつまでも理解できなそうだなあ。。
#24 コンテンツモデルを理解しよう
HTML入門編（え？入門編？？）、ラストの講義は「コンテンツモデル」です。
HTML5の全てのタグには
- カテゴリー
- コンテンツモデル
が、定義されています。
- カテゴリー ：どの分類か？
- コンテンツモデル ：どのカテゴリーのタグを入れられるか？
これがどのようなことなのか、具体的に見ていきましょう。
w3cのサイトに行って
h1タグを探してみることとします。
いろいろ出てきましたね…
h1がオレンジになっています。
そこを押してみると、カテゴリーとコンテンツモデルが表記されています。
h1は、上から３行のカテゴリーに分類されていて、
h1の中に入れていいのはPhrasing contentというカテゴリーに属するタグだけだよということが書かれています。
じゃあどんなタグならokなのかを見るためにPhrasing contentを押すと、
（画像は切れています）
こんなタグなら使えるんだよということが書かれています。
よく見ると、sectionタグが含まれていないので
h1タグの中にはsectionタグを入れてはいけないということがわかります。
「ルールが細かいなあ」と思うのですが、コンテンツモデルのルールを守ることで正しいマークアップができるようになります。
動画ではこのように説明されていました。
このタグの中にこのタグを入れていいんだっけ？と迷った時はきちんと調べるようにすると良いでしょう。
タグによっては特定のタグしか入らないとか、このタグは入るけどこの属性が必須、などの複雑な条件が付くことも注意深く読み解くようにしてください。
「ひえーー」
もう、高校の授業にまぎれこんじゃった小学生の気持ちです。
トランスペアレント
コンテンツモデルの中には「トランスペアレント」という指定があります。
これは何かというと、
- トランスペアレント：親要素のコンテンツモデルを使ってね
ということです。
たとえば、h1タグの中にaタグを入れるとしましょう。
aタグが入りました。
aタグを調べると、コンテンツモデルがトランスペアレントになっています。
つまり、「親要素（この場合h1）のコンテンツモデルを使ってね」ということです。
h1のコンテンツモデルは先ほど見たようにPhrasing contentということなので
先ほどの画像に表示されていた以外のタグは使えないということです。
sectionなどは使えない、ということですね。
（これはまちがいということです）
最初は難しくて白目になりますが、さきほどのサイトをよく確認して
正しいマークアップができるようになりましょう！
おわりに
ぽんきちさん、「ドットインストール」のHTML入門編を終えてどうでしたか？
「…」
返事がない。ただの＠＠のようだ。
難しかったので、なんども確認しようと思います！
次は、cssに行こうか、おさらいにprogateの「道場編」にチャレンジしようか考え中です。
楽しみ！
