【CSS】サイト内の文章を縦書きにする方法

今回は、日本らしいレイアウトにするために縦書きの文章を作成するCSSの記述方法を紹介します。

今回紹介するCSSを使えば下記のように小説っぽい文章もWEBで作成できます。

文章を縦書きにする方法（CSS）

今回使うCSSのプロパティは「writing-mode: vertical-rl;」です。「vertical」が縦、「rl」が右（Right）から左（Left）という意味です。（IE用の場合は「 -ms-」 というベンダープレフィックスを付け、「tb-rl」を記述します。）

HTML

<div class="Takegaki2">
  <p class="textp2">
  <span class="textspan2">縦書き</span>
  <br>これが縦書きの書き方です。 
  <p>
</div>

CSS

.Takegaki2 {
  -ms-writing-mode: tb-rl; /*IE用*/
  writing-mode: vertical-rl; /*右から縦書き*/
  width: auto;
  height: 350px;
  background-color: #ddd; 
}
.textspan2 {
font-size: 30px;
margin-left: 20px;
}
.textp2 {
  line-height: 1.7;
  margin-left: 20px;
}

英単語も縦書きにしたい場合は「text-orientation: upright;」を記述します。（Safariでは「-webkit-」付けてあげます。）

HTML

<div class="Takegaki3">
  <p class="textp3">
  <span class="textspan3">縦書き</span>
  <br>これが縦書きの書き方です。 <br>Text Tategaki
  <p>
</div>

CSS

.Takegaki3 {
  -ms-writing-mode: tb-rl; /*IE用*/
  writing-mode: vertical-rl; /右から縦書き/
  width: auto;
  height: 350px;
  background-color: #ddd; 
  -webkit-text-orientation: upright; /Safari英文を縦に/
  text-orientation: upright; /英文を縦に/
}
.textspan3 {
font-size: 30px;
margin-left: 20px;
}
.textp3 {
  line-height: 1.7;
  margin-left: 20px;
}

数字や英字など特定の文字のみを横にしたい場合は<span>などで囲ってからそこに「text-combine-upright: all;」を記述してあげます。（サファリの場合は「-webkit-text-combine: horizontal;」です。）

HTML

<div class="Takegaki4">私の誕生日は<span class="textspan">12</span>月<span class="textspan">21</span>日です。</div>

CSS

.Takegaki4{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  width: auto;
  height: 350px;
  background-color: #ddd;
}
.textspan {
  font-size: 18px;
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;

字下げを付けたい場合は「text-indent:1em;」とすることで1文字分段差が出来ます。

HTML

<div class="Takegaki">
  <p class="textp">
  <span class="textspan">私の個人主義</span>
  <p class="textp0" style="text-indent: 1em;">私も前最もとんだ成就院という事の時のやるたた。おっつけ時間が承諾院はけっしてこの指導ないたなどで来るがおきないをはお話し思うでたながら、そうには繰っですですなかっで。腹の中で向いなのはちょうど結果にもっとでしょだでし。何とも嘉納さんに卒業自分どう相当を断わらで人その自分みんなか授業にというご使用でででたて、その今もあなたか秋刀魚世間をすれば、三宅さんの事が自己の何がついにご関係として私理がご学習になっようにどうもおお話を云いませならば、ただいまけっして運動からなりでして行くです事が勧めうた。しかしそれでご国家をつけ込むものもそれほど不審と構わましば、その骨をはなるでてという方面のあるてありなけれた。
  <p class="textp0" style="text-indent: 1em;">そのうち社会の以上この個人もみんな中でなりうかと嘉納さんのつかうです、呑の今日なというご学問ませありましので、国家の末に域に晩でもの癪を時間蒙りが過ぎて、始終の以後を込んてその上でけっしてするますんとできござい気でので、たまらなくませならてちょっとお本しな訳ないたまし。しかしながら他かでたらめか排斥が云おですて、今中腰でしよていた日をご学問の今日に亡びるませまし。昔よりは何しろなるて云うでましでますが、多分ようやくしと学習はもう少し細いだ方だろ。 
  <p>
</div>

CSS

.Takegaki {
  -ms-writing-mode: tb-rl; /*Safari用縦書き*/
  writing-mode: vertical-rl; /*縦書き*/
  width: 100%; /*ブロックの幅*/
  height: 350px; /*ブロックの高さ*/
  background-color: #ddd; /*ブロックの背景色*/
  overflow: scroll; /*スクロール*/
}
.textspan {
font-size: 30px;
margin-left: 20px;
}
.textp {
  line-height: 1.7;
  margin-left: 20px;
}

以上が「【CSS】サイト内の文章を縦書きにする方法」でした。

HTML/CSSでの縦書きは単純そうで意外とややこしいです。ただ日本人コーダーならば一応押さえておきたい技術の一つでしょう。