HTML解体新書輪読会実施レポート vol.4

rkshy094

2022年12月19日 14:27

はじめに

こんにちは。ラクスフロントエンドチームの伊藤です。

先日会社のサークルでポケモン会が開催され、初めて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はテキストを"強調"するもの
 - 例↓
 - 私は厳選なしで色違いのポケモンと5匹出会いました
 - →色違いのポケモン5匹というところを強調したい
 - 私は厳選なしで色違いのポケモンと5匹出会いました
 - →厳選なしというところを強調したい
 - （厳選とは、狙ってそのポケモンの色違いや強い個体と出会う方法のことです。要は、厳然なし≒偶然出会ったということ）
 - strongはテキストの"重要性・深刻性"などを表すもの
 - 例↓
 - マスターボールは1個しか手に入らないので、使用する場面には注意が必要です
 →注意事項などに適している
 - 参考→https://planbworks.net/html5-em-strong.html
- P159　「必要に応じてwbr要素の位置で改行される」横いっぱいになったらってこと？
 - 概ねyes
 - ブラウザやテーブルなど、その要素から文字がはみ出してしまう場合にwbr要素の位置で改行してくれる
 - 詳細は以下を参照
 - https://developer.mozilla.org/ja/docs/Web/HTML/Element/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/

イベント情報

https://rakus.connpass.com/

この記事が気に入ったらサポートをしてみませんか？

HTML解体新書 輪読会 実施レポート vol.4