コーディング関連
2026/2/13
cssでの縦書き設定がiphoneで効かないとき
こんにちは茨城県水戸市でホームページ制作・コーディング業務を承っています。フリーランスのレターズです。
今日はcssで縦書き設定してルンルンしていたら、あれ手持ちのiphoneじゃ効いていないなとなりまして。そういえばそうだった思い出し、下記を設定で解決。
Before
ここに縦書きにしたい文字 .course {
white-space: pre;
writing-mode: vertical-rl;
display: inline-block;
}これだと、普通にブラウザではいけるんですが、iphoneではダメでした。
After
ここに縦書きにしたい文字 .course span {
white-space: pre;
writing-mode: vertical-rl;
display: inline-block;
}縦書きにした文字をspanで囲って、それにcssをあてることで解決しました。
ちなみに white-space: pre; が入っていないと、サファリなどでは意図した高さにならず、途中で改行されたりします。
そしてさらに。。
例えば下記のような時
縦書き文字縦書きもじ
h2要素に
h2 {
display:flex;
}を設定してあげないと、横幅が0pxとして扱われてしまったりします。(Safari,iphoneなどで）
親要素にはflexを設定して、spanで囲った子要素に縦書きのcssを入れてあげる。これがいいかもしれません。