CSSで縦書き。writing-modeの使い方。効かないときは？
CSSで縦書き。writing-modeの使い方。
CSSの縦書き方法。
CSSによる縦書きは簡単で、最低限、以下の指定で実装できる。
サイト全体を縦書きにするよりも、見出しやアクセントの方が需要が多そう。
CSS
.selector {
writing-mode: vertical-rl;
}
writing-modeで縦書き指定。
writing-modeの値「vertical-rl」は、文章が縦書き、かつ右から左へという流れとなる。
- 「vertical」は「垂直」という意味。
- 「rl」は、Right to Leftの略。「右から左へ」という意味。
参考：writing-mode – CSS: カスケーディングスタイルシート | MDN
参考：CSS writing-mode property
writing-modeの実装例。
エディタでは横書きで大丈夫。
アナログの鉛筆やペンなどと違い、パソコンのエディタでは普通に横書きで書いていける。
HTML
<blockquote>
<p>
わたくしといふ現象は<br>
仮定された有機交流電燈の<br>
ひとつの青い照明です<br>
（あらゆる透明な幽霊の複合体）<br>
風景やみんなといつしよに<br>
せはしくせはしく明滅しながら<br>
いかにもたしかにともりつづける<br>
因果交流電燈の<br>
ひとつの青い照明です<br>
（ひかりはたもち その電燈は失はれ）<br>
</p>
<p>
これらは二十二箇月の<br>
過去とかんずる方角から<br>
紙と鉱質インクをつらね<br>
（すべてわたくしと明滅し<br>
みんなが同時に感ずるもの）<br>
ここまでたもちつゞけられた<br>
かげとひかりのひとくさりづつ<br>
そのとほりの心象スケツチです<br>
</p>
〜続〜
</blockquote>
CSS
blockquote {
display: flex;
width: 90%;
writing-mode: vertical-rl;
margin: auto;
font-family: serif;
font-size: 1.6rem;
}
blockquote p {
margin: 15px auto;
}
@media (min-width: 1024px){
blockquote {
flex-direction: column;
}
}
実装例
ブレイクポイントを1024pxにし、PC用とスマホ用で２カラムと1カラムに振り分けた場合。
宮沢賢治 『春と修羅』 序 より
わたくしといふ現象は
仮定された有機交流電燈の
ひとつの青い照明です
（あらゆる透明な幽霊の複合体）
風景やみんなといつしよに
せはしくせはしく明滅しながら
いかにもたしかにともりつづける
因果交流電燈の
ひとつの青い照明です
（ひかりはたもち その電燈は失はれ）これらは二十二箇月の
過去とかんずる方角から
紙と鉱質インクをつらね
（すべてわたくしと明滅し
みんなが同時に感ずるもの）
ここまでたもちつゞけられた
かげとひかりのひとくさりづつ
そのとほりの心象スケツチです〜続〜
writing-modeがうまく効かないとき。
writing-modeが効かないときの、主な確認箇所と対処方法の例。
writing-modeは他の要素への指定の影響を受けるので、いくつかチェックすると良い。
- 縦書きになるのは、「writing-mode」を指定した要素もしくは子孫要素。
⇒ 「writing-mode: vertical-rl;」の指定箇所を確認する。 - ただし、table内のtr要素に「writing-mode: vertical-rl;」を指定した場合、子要素は縦書きにならない。
⇒tableやth、tdなどに指定する。 - 「writing-mode」を指定した要素や祖先要素に、「text-align: right;」が指定されている。
⇒ 「text-align: right;」の指定箇所を変える。 - 「writing-mode: tb;」を使用している。
⇒ 非推奨なので、「writing-mode: vertical-rl;」を使用する。 - スマホで崩れる。
⇒ 「writing-mode: vertical-rl;」と一緒に、「display: flex;」を指定し、Flexboxレイアウトにする。 - Internet Explorerが使用されている。
⇒ すでにサポート終了ブラウザのため、別のブラウザに変える。
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。
