CSSで縦書き。writing-modeの使い方。効かないときは? / いがわ

.

Memo

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用とスマホ用で2カラムと1カラムに振り分けた場合。

宮沢賢治 『春と修羅』 序 より

わたくしといふ現象は
仮定された有機交流電燈の
ひとつの青い照明です
(あらゆる透明な幽霊の複合体)
風景やみんなといつしよに
せはしくせはしく明滅しながら
いかにもたしかにともりつづける
因果交流電燈の
ひとつの青い照明です
(ひかりはたもち その電燈は失はれ)

これらは二十二箇月の
過去とかんずる方角から
紙と鉱質インクをつらね
(すべてわたくしと明滅し
みんなが同時に感ずるもの)
ここまでたもちつゞけられた
かげとひかりのひとくさりづつ
そのとほりの心象スケツチです

〜続〜


writing-modeがうまく効かないとき。

writing-modeが効かないときの、主な確認箇所と対処方法の例。

writing-modeは他の要素への指定の影響を受けるので、いくつかチェックすると良い。

  1. 縦書きになるのは、「writing-mode」を指定した要素もしくは子孫要素。
      ⇒ 「writing-mode: vertical-rl;」の指定箇所を確認する。
  2. ただし、table内のtr要素に「writing-mode: vertical-rl;」を指定した場合、子要素は縦書きにならない。
      ⇒tableやth、tdなどに指定する。
  3. 「writing-mode」を指定した要素や祖先要素に、「text-align: right;」が指定されている。
      ⇒ 「text-align: right;」の指定箇所を変える。
  4. 「writing-mode: tb;」を使用している。
      ⇒ 非推奨なので、「writing-mode: vertical-rl;」を使用する。
  5. スマホで崩れる。
      ⇒ 「writing-mode: vertical-rl;」と一緒に、「display: flex;」を指定し、Flexboxレイアウトにする。
  6. Internet Explorerが使用されている。
      ⇒ すでにサポート終了ブラウザのため、別のブラウザに変える。

CSSで縦書き。writing-modeの使い方。効かないときは? 垂直な姿勢の猫ちゃん。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

井川 宜久 / Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

CSS 関連メモ。


免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。