ISSEN 
はじめに
この記事の概要
こんにちは
株式会社TOKOSのエンジニアのタクヤです！
今回はWeb上での役物の文字詰めについて、CSSだけで完結する方法や特殊なWebフォントを使用する方法を紹介します！
文章を記述する際に使用する記号の総称です。
「」や、。（）などが挙げられます。
Webサイトのタイトルやテキスト内で「」や、。（）などの役物を使う機会があるかと思いますが、それらの役物は字間が大きすぎてしまい見た目が悪くなってしまうことがあります。
例えば、テキストの先頭や文中に「」や（）などの役物を使用した際は全体が揃っていないような見え方になります。（特に左側）
Webでは文字詰めできないからしょうがない、、、 と私も思っていましたが、役物に対してだけ文字詰めができる方法がありました！
今回ご紹介する2つの方法はどちらも簡単な方法です！
Webデザインの細部のクオリティを上げたいと思っているあなたにおすすめの内容ですので、ぜひ使ってみてください！
対象読者
- Webデザイナー
- HTML,CSSコーダー
CSSプロパティ font-feature-settings
まず紹介するのがCSSのプロパティである font-feature-settings を使う方法です。
font-feature-settings は CSS のプロパティで、 OpenType フォントの拡張書体の特性を制御するプロパティです。
font-feature-settings: "palt"; を指定することで、役物の文字詰めが可能です。
めちゃくちゃ簡単な方法ですが、若干詰まり過ぎてしまう印象を受けます。(誤差？)
.font-feature-settings {
font-feature-settings: "palt";
}
Webフォント YakuHanJP
続いてはYakuHanJPというWebフォントを使用する方法です。
YakuHanJPとは特殊なWebフォントで、日本語における役物(「」や、。（）など)のみを文字詰めした状態で表示してくれるものです。 YakuHanJPはサンセリフ体専用なので、セリフ体で使いたい場合は、YakuHanMPを使用してください。 ※役物に対するフォントなので、文字に対するフォントは別で指定してあげる必要があります。
実際に使うにはCDNでWebフォントを読み込み、CSSでフォントを指定する必要があります。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp.min.css"/>.yakuhanjp {
font-family: YakuHanJP, "Noto Sans JP", sans-serif;
}
さいごに
今回はWeb上での役物の文字詰めについてする方法を紹介しました！
CSSだけで完結する方法や特殊なWebフォントを使用する方法があったかと思いますが用途によって使い分けてみてください！
またWebデザインについて参考になった書籍も載せておきます！ ぜひ読んでみてください！
