HTML解体新書 輪読会 実施レポート vol.4
はじめに
こんにちは。ラクス フロントエンドチームの伊藤です。
先日会社のサークルでポケモン会が開催され、初めて4人ピクニックをしました。
パンがデカ過ぎ&具材も多過ぎのカオス感が楽しかったです。
さて、今回は HTML解体新書輪読会 の実施レポートvol.4です。
読書範囲
今回の読書範囲は P134~P159(Chapter3-4の途中 ~ 3-5) です。
議論・意見交換
3-4 グルーピングコンテンツ
学んだこと
P137 div要素の説明「他に適切な要素がなかった場合の最後の手段」⇒最初の手段にしちゃダメだぞ
divとspanには甘えがちなので気をつけます・・・
p139 strong要素の入れ子でより強い重要性を表現できるのは知らなかった
同じく
p.143 q要素で引用符使えるの知らなかった。
多言語対応でかぎ括弧（「」）、ダブルクォーテーション（""）をわざわざ用意しているサービスもあるかも・・？
疑問に思ったこと
「main要素はその性質上１つのHTMLページに１つしか置くことができません」 SPAでmainタグをwrapしたコンポーネントを作ると簡単に違反してしまいそうなので良くない？そもそも使わずにindex.htmlに定義しておくべき？
アクセシビリティを管理するlinterを入れるなどで対応は可能
3-5 テキストレベルセマンティクス
学んだこと
P157 「改行の位置が意味的な区切りになる場合は、brタグではなく他のマークアップを利用」 意味的な区切りで使うべきでないことを知らなかった
疑問に思ったこと
emとstrongの差は？
emはテキストを"強調"するもの
例↓
私は厳選なしで<em>色違いのポケモンと5匹</em>出会いました
→色違いのポケモン5匹 というところを強調したい
私は<em>厳選なし</em>で色違いのポケモンと5匹出会いました
→厳選なし というところを強調したい
（厳選とは、狙ってそのポケモンの色違いや強い個体と出会う方法のことです。要は、厳然なし≒偶然出会った ということ）
strongはテキストの"重要性・深刻性"などを表すもの
例↓
マスターボールは<strong>1個しか手に入らない</strong>ので、使用する場面には注意が必要です
→注意事項などに適している
P159 「必要に応じてwbr要素の位置で改行される」横いっぱいになったらってこと？
概ねyes
ブラウザやテーブルなど、その要素から文字がはみ出してしまう場合にwbr要素の位置で改行してくれる
詳細は以下を参照
その他
使ったことのない要素がたくさん。 em, small, s, cite, q, dfn...
同じく私も知らない要素がたくさんあり、勉強になりました
おわりに
今回は知らないタグがかなり出てきて、特に勉強になった回だったと思います。
紹介しきれませんでしたが、付箋も普段以上に出てきていました。
今後も隔週で輪読会を実施していきます。
次回開催は 1/16(月) になるので、それ以降にまた更新します！お楽しみに！
次の記事 >
採用情報
https://career-recruit.rakus.co.jp/engineer_jobs/frontend_tokyo/
https://career-recruit.rakus.co.jp/career_engineer/