hanging-punctuation

スライド内のリンク

- https://developer.mozilla.org/ja/docs/Web/CSS/hanging-punctuation
- https://ja.wikipedia.org/wiki/%E3%81%B6%E3%82%89%E4%B8%8B%E3%81%92%E7%B5%84%E3%81%BF
- https://codepen.io/takashimelon/pen/WNVWOVo
- https://caniuse.com/css-hanging-punctuation
- https://2024.stateofcss.com/en-US/features

Transcript

1. hanging-punctuation たかし
2. 目次 - hanging-punctuationとは - ぶら下げとは - サンプルコード - デモ - 余談（State of CSS 2024について）
3. hanging-punctuationとは
4. hanging-punctuationとは - hanging-punctuation は CSS のプロパティで、区切り記号をテキストの行頭や行 末にぶら下げるべきかどうかを指定します。ぶら下げられる区切り記号は行ボック スの外側に配置されれることがあります。 - 引用：https://developer.mozilla.org/ja/docs/Web/CSS/hanging-punctuation
5. ぶら下げとは - ぶら下げ組み（ぶらさげぐみ）とは、和文の組版において、行頭に句読点が位置す る場合に、その句読点を版面の前の行の末尾にほかの文字よりもはみ出して組む 組みかたをいう。単にぶら下げ、あるいはぶら下がりとも呼ぶ。 - 引用 ：https://ja.wikipedia.org/wiki/%E3%81%B6%E3%82%89%E4%B8%8B%E3%81%92%E7%B5 %84%E3%81%BF
6. サンプルコード - CodePen：https://codepen.io/takashimelon/pen/WNVWOVo - ⚠ Safari / Safari on iOS のみ動作します - 参考：https://caniuse.com/css-hanging-punctuation
7. デモ - Safari - Chrome
8. 余談（State of CSS 2024）
9. 余談（State of CSS 2024） - 最も聞いたことがなかった機能（プロパティ） - リーディングリストのランキングトップ - 参考：https://2024.stateofcss.com/en-US/features
10. おわり