勉強001　縦書きの仕方

縦書きのやりかたメモ。

縦書き自体はそんなに難しくなかった。

「ライティングモード: 縦書き、右→左」

コードエディタを開いて、以下のコードを打ち込むだけ。

<div style="writing-mode: vertical-rl">魔法科高校の劣等生</div>

プレビュー：

フォント・行間などの情報を追加

フォントとかを指定してやると：

<div style="writing-mode: vertical-rl; font-family: serif; line-height: 2.5; font-weight: bold; float: right;">魔法科高校の劣等生</div>

記述の意味は：

<div style="
　writing-mode: vertical-rl;　　ライティングモードは縦書きでright（右）→left（左）
　font-family: serif; 　　　　　フォントは明朝系
　line-height: 2.5; 　　　　　　行間は2.5
　font-weight: bold; 　　　　 　太字。normalなら普通の太さ。
　float: right;　　　　　　　 　ボックス自体を右寄せ。
">
縦書きしたい内容　　　　　　　　内容
</div>

プレビュー：

最終形態：作れたものの……

トップページ案にチャレンジ。

<div style="writing-mode: vertical-rl; font-family: serif; line-height: 2.5; font-weight: bold; float: right;">
<p>[<span style="writing-mode: horizontal-tb;">1</span>]　世界観<br>
[<span style="writing-mode: horizontal-tb;">2</span>]　地図<br>
[<span style="writing-mode: horizontal-tb;">3</span>]　年表<br>
[<span style="writing-mode: horizontal-tb;">4</span>]　キャラクター<br>
[<span style="writing-mode: horizontal-tb;">5</span>]　スキル<br>
[<span style="writing-mode: horizontal-tb;">6</span>]　用語<br>
[<span style="writing-mode: horizontal-tb;">7</span>]　家系<br>
[<span style="writing-mode: horizontal-tb;">8</span>]　その他<br>
[<span style="writing-mode: horizontal-tb;">9</span>]　一覧系ページ<br>
[<span style="writing-mode: horizontal-tb;">10</span>]　作品情報<br>
[<span style="writing-mode: horizontal-tb;">11</span>]　ブログ</p></div>
</div>

プレビュー：

floatっていうプロパティ？のおかげで右寄せにできた。

でもコレジャナイ感が凄いので、float: center; として真ん中寄せにしてみる。

<div style="writing-mode: vertical-rl; font-family: serif; line-height: 2.5; font-weight: bold; float: center;">
<p>[<span style="writing-mode: horizontal-tb;">1</span>]　世界観<br>
[<span style="writing-mode: horizontal-tb;">2</span>]　地図<br>
[<span style="writing-mode: horizontal-tb;">3</span>]　年表<br>
[<span style="writing-mode: horizontal-tb;">4</span>]　キャラクター<br>
[<span style="writing-mode: horizontal-tb;">5</span>]　スキル<br>
[<span style="writing-mode: horizontal-tb;">6</span>]　用語<br>
[<span style="writing-mode: horizontal-tb;">7</span>]　家系<br>
[<span style="writing-mode: horizontal-tb;">8</span>]　その他<br>
[<span style="writing-mode: horizontal-tb;">9</span>]　一覧系ページ<br>
[<span style="writing-mode: horizontal-tb;">10</span>]　作品情報<br>
[<span style="writing-mode: horizontal-tb;">11</span>]　ブログ</p></div>
</div>

なぜか左寄せに。floatでは、centerはできないっぽい。ﾄﾞｳｼﾃ……