Webサイトコーディングからの振り返り
昨日、今日でコーディングしていて改めて再認識したり、学んだり、もう少し調べてみたりしたものを列挙してみました。
1. source要素、picture要素の活用とIE11
PCとSPでの画像の出しわけは、例えば、２つの画像を置いてクラスで出しわけ・切り替えをする方法があります。一方で、picture要素を置いて、子要素でsource要素を置く方法があります。（※ここでは、img要素を用いる方が読み込みが軽いとか、SEO的にはこうだとか、sizes属性使って、、、などといった深堀はしません。改めてこんな書き方があるくらいです。）
<picture>
<source media='(max-width:767px)' srcset='sp.png'></source>
<img src='pc.png' alt='pc画像です'>
</picture>・picture要素
picture要素配下に0個以上のsource要素とimg要素を置くことによって、画面や端末に応じて、最も合う画像を提供してくれます。srcsetに画像パスを書きます。
・source要素、img要素
大切なのが書き順です。必ず、img要素を最後に書きます。また、picture要素に対応していないブラウザ（IE11）ではimg要素が読まれます。
picture要素は、IE11では対応していないので、Picturefill.jsといったポリフィルを用いることが勧められています。ただし、Picturefill.jsには少しだけ注意点があるようです。
2. セマンティックに書くこと
セマンティックに書くことについてその意義を考察してみます。
Semantic Webという言葉がありますが、これは機械可読性による自動的な情報の収集、分析へのアプローチを目指した枠組みです。以下を参照しました。
Semantic WebについてのW3Cのサイトを読むと、情報を信頼を持って多くの人に伝達できる、データを（RDFファイルなどに）再利用可能にさせるサポートをする、という印象で、それがセマンティックに書くことの意義だと思いました。それと、とっても医療分野におけるデータのやりとりを意識している感じがしました。
また、以下の「源氏物語」の話は、上の「VOCABULARIES」の話に通ずると思い、紹介させていただきます（噛み砕かれていて、わかりやすい、、）。
3. h1やh2の中にimg要素、a要素、p要素
h1要素やh2要素に文字列ではなく、子要素として、p要素、img要素、link要素を配置したりしていいんだっけ？と慣れないと手がとまることがあります。
それについてstackoverflowでいい感じのことが書いてありました。
W3CのDTD「文書型の定義」（<!DOCTYPE HTML>はDTDの宣言）を参考にして、DTDのリンクで<!ELEMENT h1 %Inline;>からページ内リンクで移動すると、img要素やa要素が使用可能であることを示していることを言っています。ここまで読むと、なんとなくp要素は配置してはいけない雰囲気があるので、調べたらよい記事がありました。
a, em, strong, code, cite, span, br, imgが可能とありました。ので、p要素は使用不可ということでした。サイト内の「See the full list here」のリンクにw3cで言及している箇所を載せてくださっております。
まとめ
振り返りがてら書き始めましたが、こんなにリンクを貼り付けると思っていませんでした。情報を共有してくださる皆さんに助けられているとつくづく思いました。
以上となります٩( ᐛ )و