CSSで縦書き。writing-modeの使い方。

CSSの縦書き方法。

writing-modeの実装。

CSSによる縦書きは簡単で、最低限、以下の指定で実装できる。

サイト全体を縦書きにするのはもちろん、見出しやアクセントとして一部分への指定する際も、下記の記述が基本となる。

CSS

.selector {
 writing-mode: vertical-rl;
}

writing-modeで縦書き指定。

vertical-rl

writing-modeの値「vertical-rl」は、文章が縦書き、かつ右から左へという流れとなる。

• 「vertical」は「垂直」という意味。
• 「rl」は、Right to Leftの略。「右から左へ」という意味。

参考：writing-mode – CSS: カスケーディングスタイルシート | MDN
参考：CSS writing-mode property

CSSで縦書き。writing-modeの実装例。

CSSで縦書きにする。

デジタルと縦書き。

アナログの鉛筆やペンなどと違い、パソコンのエディタでは横書きで書いていくのが普通になっている。

現時点、Figmaは縦書きが苦手なので、Figmaでデザインするときは少し手間がかかるかもしれないが、コーディングの際は普通に横に書いて行けば良い。

writing-modeを使ったコーディングの例。

中途半端な箇所で改行されたり、画面領域をはみ出さないように、章や段落をマークアップする。

WordPressの場合は、自動的にpタグが入ることもある。

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;
 }
}

writing-modeのブラウザ表示例。

縦書きでも章や段落など、ブロックを意識する。

ブレイクポイントを1024pxにし、PC用とスマホ用で２カラムと1カラムに振り分けた場合。

下記のテキスト（宮沢賢治の詩）は、パソコンでは2カラム、スマホでは1カラムで表示される。

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

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

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

〜続〜

CSSで縦書き。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が使用されている。
     ⇒ すでにサポート終了ブラウザのため、別のブラウザに変える。

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

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

CSS 関連メモ。

• CSSの一部が効かないときは、キャッシュやダークモードが原因かも。
• first-letterが効かないとき。覚えると便利なCSS擬似要素。
• rgb()で透明度も。CSSの新しい色指定と使い方の例。
• CSSでダークモード。prefers-color-schemeの使い方と効かないとき。
• CSSで縦書き。writing-modeの使い方。効かないときは？
• scroll-snap-typeの使い方。CSSでカルーセル。効かないときは？

• CSSのブレイクポイントの書き方。メディアクエリはいくつがおすすめ？
• CSS gapの使い方？Flexboxでレスポンシブ？効かないときは？
• CSSの変数と関数。覚えておくと便利なCSSプログラミング。
• CSS aspect-ratioの使い方。効かないときはどうする？
• text-overflowの使い方。CSSで文字数を制御。効かないときは？
• detailsとsummaryの使い方。HTML&CSS or jQueryアコーディオン。
• CSSブレンドモード。mix-blend-modeの例一覧。乗算やスクリーンを。
• counter-incrementの使い方。CSSで連番。増えない時の対処。コピペOK。
• CSS フォントサイズはどうする？ remの基本かつ効果的な使い方。
• line-clampの使い方。CSSで複数行指定。効かないときは？

• CSSの@whenと@else。新しいブレイクポイントの設定方法？
• 縁取り文字はCSSのtext-strokeで可能。（非推奨の時代は終わり。）
• CSS変数の使い方例。:rootを使ってカスタムプロパティを覚える。
• CSSでフェードイン。JS不要、コピペ可。ちょっとリッチな雰囲気を。
• CSS カラーコードで透明度を指定したいとき。（16進数6つ+2つで。）
• CSS max-width レスポンシブ対応のピクセル指定は崩れる原因となる。
• CSSのobject-fitの使い方。トリミングやサイズの実装例。
• backgroundの複数指定が効かない時の確認事項。（CSSアニメーションとの組み合わせ。）
• CSS filterで色変更。色相・彩度・明度？ filterプロパティでできること。
• CSS position: stickyの使い方。効かない！ときはここをチェック。