Go to Qiita Advent Calendar 2024 Top
LoginSignup
Kobayashi0620
@Kobayashi0620 (さなだ むし)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

HTML CSS で文字を縦書きできれいに表示したい

Q&A

Closed

HTMLCSSfontフロントエンドvertical-align

解決したいこと

現在webサイトを作成しているのですが、縦書きデザインで文字のバランスが悪くなってしまいその対応策が思い浮かばず詰まってしまっています。

該当箇所

image.png

.html
<div class="verticalWrite">
    <h2>お知らせ</h2>
</div>
.css
@charset "utf-8";

/* Hannari */
@import url('https://fonts.googleapis.com/earlyaccess/hannari.css');

.verticalWrite{
    writing-mode: vertical-rl;
    font-family: "Hannari", serif;
    font-size: 28px;
    padding: 30px;
}

参考記事

https://www.webcreatorbox.com/tech/writing-mode
https://www.sejuku.net/blog/76881

最後まで読んでいただきありがとうございます。
ご存じの方がいらっしゃいましたら教えていただけますと幸いです。
何卒よろしくお願いいたします。

0

2Answer

YottyPG
@YottyPG

「Monospace」(等幅フォント)のものを利用するのが確実そうです。

Google Fontsであれば「Monospace」のものを指定して検索も可能です。

image.png

See the Pen Untitled by yotty (@yotty) on CodePen.

2Like

Comments

  1. @YottyPG

    ざっと調べた限りですが、文字幅が異なるフォントを縦書きにすると、どうしてもずれる仕様のようです…

    OpenTypeフォントであれば「font-feature-settings」を利用することで、縦書きにしたときのガタツキを改善できるそうです。

  3. @YottyPG

    こちらのフォントであれば、縦書きにしてもずれはなさそうでした！

    image.png

    <style>
  @font-face {
    font-family: "my-font";
    src: url(./HannariMincho-Regular.otf) format("opentype");
  }

  .verticalWrite {
    writing-mode: vertical-rl;
    font-family: "my-font";
    font-size: 28px;
    padding: 30px;
  }
</style>

<div class="verticalWrite">
  <h2>お知らせ</h2>
</div>

  4. @Kobayashi0620

    Questioner

    ありがとうございます
    試してみます！

Comments

Your answer might help someone💌

LoginSign Up