ホームページは基本的に横書きの媒体です。
なぜならば、横書きは改行位置が上から下へ流れますが、縦書きの場合は改行後下から上へ戻るためです。

webは画面をスクロールさせる前提であるため、横書きが適しています。

ただ、今回縦書きを実装する必要があったため、縦書きのやり方を調べてみました。
おそらくめったに使用しない内容かと思いますが、参考になれば幸いです。

そもそも縦書きって実装できるものなの？

百聞は一見にしかずです。
以下の文はスタイルシートだけで縦書きにできています。

いったいどうやって実現しているのでしょうか?
以下に解説いたします。

CSSだけで縦書きにする方法

具体的にどうやって縦書きを実現しているのか解説いたします。

今回のソース

<style type="text/css">
.box 
{
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	-webkit-text-orientation: upright;
	text-orientation: upright;

	padding: 10px;
	width: 100%;
	height: 300px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #CCC;

}

.box p
{
	text-align: justify;
}


.day
{
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}
</style>
<div class="box">
<h1>縦書き例</h1>
<p>令和五年<span class="day">05</span>月<span class="day">02</span>日</p>
<p>　webで縦書きは一見無理な感じがします。事実、以前はプラグインなどを使っていました。</p>
<p>　ところが最近は、スタイルシートだけで縦書きができるようになりました。</p>

</div>

縦書きにする命令

次のスタイルシートを記述すると、無条件で縦書きになります。

.box 
{
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

writing-mode: vertical-rl;

文章の向きを変更する命令。
verticalは縦書きの意味で、rl は右から左という意味。

-ms-writing-mode: tb-rl;

IE用の記述です。
tbは、top→bottom(縦書きの意味)　rlはright→left（右から左）の意味。

基本的にこれだけで縦書きになりますが、細かく微調整する指定もあります。

半角英数字は横置きにしたい

先ほどの例では、半角英数字も縦書きになっています。
半角英数字だけを横書きにできないものだろうか調べてみたところ、次の指定をすれば良いことがわかりました。

まずは実例です

下記の例は「web」が横置きになっています。

半角英数字を横置きにする方法

これも、次の命令を記述すればOKです。

■半角英数字を横置き

.box 
{
	-webkit-text-orientation: mixed;
	text-orientation: mixed;
}

上記の記述をするだけで、全角は縦書き、半角英数字は横置きになります。
ちなみに、-webkit-text-orientation　はサファリ用の記述です。

■半角英数字も縦書き

.box 
{
	-webkit-text-orientation: upright;
	text-orientation: upright;
}

mixed を upright　にすると、すべての文字が縦書きになります。

日付の数字だけ縦書き横並びにする方法

サンプルでは、日付が2文字横並びになっています。
これは、次のように記述しています。

スタイルシート

.day
{
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}

HTMLの記述

<p>令和五年<span class="day">05</span>月<span class="day">02</span>日</p>

この指定は、タグで囲った部分を強制的に一文字ぶんのサイズで横に並べます。
全角で記述しても、何文字入れても一文字分の幅になりました。
スタイルシートが3行あるのは、一般用、IE用、サファリ用で記述が異なるためです。

ほぼ日付をアラビア数字で表現する専用の機器術です。

最近はCSSだけでいろんなことができます

一昔前は、HTMLで変わったことをやろうと思ったら、Javascriptが必須でした。
しかし、最近はCSSだけでも様々なことができるようになりました。

事実、レスポンシブもCSSだけで実現できています。

ホームページ制作業は、様々な知識や技術がたくさん必要ですが、CSSに関することもとても重要なのだと気づきました。

ホームページにはデザインはつきものですが、画像データは極力減らしたいジレンマがつきまといます。なぜならば、スマホで重たい画像はパケットを食いつぶすためスマホ利用者から敬遠されやすくなるためです。

敬遠されるホームページは本末転倒です。
なのでCSSでデザインを再現し、なるべく軽いホームページを作ることが求められます。

CSS一つとっても、奥が深いのです。