1. HOME
  2. html_css
  3. 【css】「」や文字を詰めたい時に使えるcss

【css】「」や文字を詰めたい時に使えるcss

デザイナーさんから「最初のかっこのスペースが気にからなんとかできないかな?」
Web制作をしていると言われることがしばしばあります。

「かっこ」を文字の先頭でつけると
段落落ちしているように見える

上はサンプルなのですが、「」の前にスペースがあるわけではなく、【「】一文字分のスペースでこのような結果になってしまっています。これを解決するにはどうしたらいいのでしょうか。

「」や文字を詰めたい時に使えるcss

font-feature-settings : “palt”;を使った場合

「かっこ」を文字の先頭でつけると
段落落ちしているように見える

letter-spacing: 0.5px;を使った場合

「かっこ」を文字の先頭でつけると
段落落ちしているように見える

cssを何も当てなかった場合

「かっこ」を文字の先頭でつけると
段落落ちしているように見える

上では3つの例を出して、最初の括弧の位置を調整しました。どうしても最初に括弧がきてしまうことがあります。そんな時に覚えておきたいのが、【font-feature-setting】です。

【font-feature-setting】とは?

OpenType フォントの拡張タイポグラフィの特性を制御します。

引用:https://developer.mozilla.org/ja/docs/Web/CSS/font-feature-settings

 

このように”font-feature-settings : “palt”;”を利用することで最初にくる「  の開始位置を調整することができる。

他のカテゴリーの記事をみる