知ってた？ナルホド！
こんにちは！フロントエンドエンジニアの山田です。
前回の要素については、引用や出典関係の要素としてblockquote, q, citeが個人的に印象に残っています。
それぞれ、用途は近しいですが使い方が異なりましたね。
前回の記事もご覧ください。
知ってそうで知らない!?HTML要素たち
早速、知ってそうで知らないHTML要素について、まとめてまいります。
今日の要素はこちら！
- caption要素
- code要素
- del要素 / s要素
- fieldset要素 / legend要素
使ったことがある要素もありますが、前回に続いてまた似たような要素がありますね！
1. HTMLとCSSの関係性
HTMLそのものは見栄えを制御する機能を持ち合わせていません。
ですが、文字にタグをつけてブラウザ上で表示すると、文字の大きさや太さが変わったり、タグの変わり目で改行が入ることがあります。
これは、ブラウザが要素単位でデフォルトのスタイルを設定しているからです。
ブラウザによっては同じ要素でも見栄えが異なる場合があります。
このHTMLやWordといった文書の見栄えを指定する技術のことをスタイルシートと呼びます。
CSSはHTMLを装飾するためのスタイルシート言語で、正式にはCascading Style Sheets（CSS)と呼ばれています。
作成したデザインの通りにウェブページの見栄えを整え、ブラウザ毎の見栄えの崩れや誤差がないようにCSSを指定することが、私たちコーダーやフロントエンドエンジニアの役目です。
それでは、本題に入りましょう。
2. caption要素
caption要素は、table要素（表組み）のタイトルや説明文を表記する要素です。
この要素は必ずtable要素の直下の先頭に記述する必要があります。
テーブルのキャプション
セル見出し1
セル見出し2
セル見出し3
セルデータ1
セルデータ2
セルデータ3
セルデータ4
セルデータ5
セルデータ6
原則として、caption要素は表の上部に表示されます。
表示位置を変更する場合はCSSで変更することができます。
今まで、表を作成したときにはキャプションをh要素やp要素でマークアップしていたという方は、この機会にcaption要素を使用してみてはいかがでしょうか。
3. code要素
code要素はHTMLやJavaScriptなどのコードであることを示します。
pre要素に入れ子して使用することが多いです。
エンジニア内では馴染みのある要素ですが、これまでの経験上、受託しているウェブサイトで使用する機会は滅多にありません。
console.log('Hello World');4. del要素 / s要素
del要素とs要素はいずれも文字に打ち消し線が入る要素です。
しかし、HTMLは要素のデフォルトのスタイルを使うことを目的とした要素を使用することは非推奨となっています。
いずれの要素も見栄えこと異なりますが、del要素はその名の通り「削除された情報」でs要素は「正確ではなくなった情報」や「関係がなきなった情報」を表します。
del要素は二つの属性を任意で指定することができます。
cite属性は変更を説明するURLの指定し、datetime属性は情報の変更日時をUTC※で表記します。
※UTCとは世界の標準時刻（協定世界時）のことで、日本はこの標準時刻から9時間進んでいます。
5. fieldset要素 / legend要素
フォームを作成する際に、table要素やdl要素や単にdiv要素を使用してCSSでレイアウトをすることがほとんどではないかと思います。
テキストボックスやチェックボックスなどのフォーム部品をグループ化するfieldset要素があります。
fieldset要素は枠線で囲まれますが、デフォルトのスタイルはCSSでリセットすることが可能です。name属性やdisabled属性を使用することもできます。
また、legend要素はfieldset要素のキャプションを指定します。fieldset要素の直下の先頭に記述します。
legendは日本語訳すると「伝説」や「神話」といった意味もあるため、王道RPGっぽさがあります。
6. まとめ
フォームや表にはキャプションをつける要素があります。
表のキャプションはh要素やp要素を使っているウェブサイトが多くあります。
また、フォーム要素はtable要素やdl要素でレイアウトをしているサイトが多いため、fieldset要素を使用しているサイトというのは見たことが無いと言っても過言ではありません。
やはり、実務ではなかなか使わない要素ばかりですが、マシンリーダブルなコードを心がけてこれからもマークアップしていきたいですね！
