勉強001 縦書きの仕方

HTML+CSS

縦書きのやりかたメモ。

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

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

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

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

プレビュー:

[1] 世界観
[2] 地図
[3] 年表
[4] キャラクター
[5] スキル
[6] 用語
[7] 家系
[8] その他
[9] 一覧系ページ
[10] 作品情報
[11] ブログ

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>
[1] 世界観
[2] 地図
[3] 年表
[4] キャラクター
[5] スキル
[6] 用語
[7] 家系
[8] その他
[9] 一覧系ページ
[10] 作品情報
[11] ブログ

なぜか左寄せに。floatでは、centerはできないっぽい。ドウシテ……

タイトルとURLをコピーしました