「武器になるHTML」を 2,023 年 07 月 16 日に読んだ。
目次
メモ
グローバル属性とは? p36
グローバル属性は、どの要素にも指定することができる属性です。
先ほど html 要素に指定した lang 属性も、このグローバル属性の1つになります。
次のページで主なグローバル属性を紹介しますが、現時点では「どの要素にも使える属性があるんだなぁ」ということだけ理解しておけば大丈夫です。
さらっと目を通してみましょう。
Code Heroでタグを調べてみよう p58
筆者が運営している 「Shibajuku」 には、プロジェクトの一環としてメンバーが制作した、 HTML タグ辞典 「CodeHero」 というサイトがあります。
「Code Hero」では、 Shibajuku のメンバーが HTML の要素を勉強した際のアウトプットの場として、要素の解説記事を投稿しています。
すべての要素のページがあるわけではありませんが、初学者目線の言葉で要素を解説していますので、こちらも併せてご活用いただけたらと思います。
説明リストを表す要素を知ろう p117
よくある質問ページや用語解説のように、項目とそれに対しての説明を行うリストを作りたい時があります。
HTML でこのような説明のリストをマークアップするには、 description list の意味の dl 要素を使います。
なお、この dl 要素は単体では使用しません。
dl 要素の中に、項目名とその説明を表す要素を配置します。
項目名は dt 要素で、説明文は dd 要素で配置します。
WebVTT (Web Video Text Tracks) 形式のファイルの作成 p198
WebVTT は、時間指定のテキストトラックを表示するファイルで、拡張子は「.vtt」となります。
WebVTT ファイルは、先頭の行に WEBVTT と記述し、その後に空白行を入れてから、以下のルールでタイムマーカーと画面に表示するテキストを必要な数だけ記述します。
タイムマーカーとテキストのセットごとに空白行で区切ります。
p263
また、 datetime-local のような日時関連の値では、日時を入力しやすいカレンダーのような UI が表示されます。
color を指定した場合は、カラーピッカーが表示されます。
適切な type 属性を指定することで、ユーザはWebページを使いやすくなるのです。
構文チェックの必要性を知ろう p387
HTML は、 構文のミスがあっても画面にエラーが表示されず、ミスに気づきにくいことが多いです。
そこで、マークアップが完了し Web サイトを公開する前に、自身の書いたHTMLに間違いが無いかチェックするようにしましょう。
HTML の構文チェックには、 W3C が提供している 「Nu Html Checker」というツールを使うのが便利です。
Nu Html Checker
https://validator.w3.org/nu/
あとがき p423
私は、2010年頃に Web デザインのスクールに通い、そこで初めてしっかりとHTMLというものを勉強しました。
そこで出会った恩師の大下 洋史先生が、セマンティックやアクセシビリティを意識したマークアップを大切にされていたため、私もその考えに強く共感し、影響を受け、今日までHTMLと向き合ってきました。
今こうやってこの本を執筆させていただけているのも、大下先生の教えがあったからこそだと感じております。本当にありがとうございます。