Webの縦書きに挑戦してみる

読書と編集 千葉直樹です

CSSで縦書きを指定する

ちょっとしたひらめきがあったのでチャレンジ。参考にしたのはこのページ。こんなCSSを追加します。

.vertical {
	-webkit-writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-ms-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	display: inline-block;
}

閑さや岩にしみ入る蝉の声

左に寄ってしまった。縦書きで左に寄っているのは変ですねえ。ブロックエディタで段落を作って、上記のCSSを指定するだけだとこうなります。

中央寄せしたいので、段落にdivブロックをかぶせたい。そういうときは段落をグループ化して、そのグループに以下のCSSを適用します。

.vertical-box-center {
	text-align: center;
}

閑さや岩にしみ入る蝉の声

これならまあいいかな。ブラウザによって縦になっていないかもしれませんが。

縦書きはフォントが明朝体系列のほうが良さそうなので、ちょっとやってみます。

Web Fontでやってみましょう。Google FontsのNoto Serif JPを使うためにインポートします。

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');

で、verticalクラスに以下を追加します。

font-family: 'Noto Serif JP', serif;

これで縦書き部分が明朝体になりましたね。

WindowsのChromeとiPhoneのChromeとAndroidのChromeで確認できました。

Follow me!

きーちゃんは言いたいことがある

きーちゃんは言いたいことがある!
きーちゃんグッズのお店があるんですよ!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください