SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.07.28
  • CATEGORY
TITLE

【CSS】writing-modeを解説!CSSで縦書きデザイン

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回はwriting-modeを解説!CSSで縦書きデザインについての解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • writing-modeの使い方について学びたい方へ
  • 今回は縦書きに対してのCSS(デザイン)についての学習になります

前回の記事では、writing-modeでの基本的な記述方法、また、text-orientationによる、テキストの向きについて解説しました。
一度こちらの記事で理解度を深めておきましょう。

前回の記事

writing-mode、text-orientationの使い方についての記事になります。

writing-modeについて

writing-modeについ

writing-modeとは、縦書きで表示する際に指定します。
前回の復習になります。書き方は以下のようになります。

/*--writing-mode--*/
要素 {writing-mode: 値;}
指定できる値
  • horizontal-tb(初期値)
    横書きで上から下へブロックが流れます。
  • vertical-rl
    縦書きで右から左へブロックが流れます。
  • vertical-lr
    縦書きで左から右へブロックが流れます。

text-combine-uprightについて

text-combine-uprightについて

text-combine-uprightとは、縦書きでの数字、記号、漢字などを縦書き中で横組みにするかどうかを
指定します。
基本的に「all」の値が多く使われます。今回は「all」のみの解説になるます。

指定できる値
  • none(初期値)
    noneが初期値がになるため、基本何も変わりません
  • all
    縦中横で配置する際に指定します
  • digits 整数
    digitsのみの場合は2桁に、digitsのあとに2〜4の整数値が指定された場合は、その桁数以下の数値を縦中横にする。範囲外の場合は無効になります

上の図のように、text-orientationで指定した際に、数字がうまく表示しない問題がでてきます。
そのような際に、text-combine-uprightで指定をおこないます。

指定を行う際に、spanタグなどで囲み、囲った要素に対してCSSを指定するようにしましょう。
また、指定する際には、ブラウザーによってはレイアウトが崩れてしまうため、
ベンダープレフィックスも一緒に指定をおこないましょう。

Safari用 -webkit-text-combine: horizontal
IE用 -ms-text-combine-horizontal: all

mixedについて

<p>text-orientation: mixed<br>
<span class="combine">01</span>赤色(情熱・強さ)<br>
情熱・強さ・生命力など<br>
目立つ・・・持っています。</p>
p {
	/*--縦書きの指定--*/
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	
	/*--mixedを指定--*/
	-webkit-text-orientation: mixed;
	text-orientation: mixed;
}

spna.combine {
	/*--allを指定--*/
	-webkit-text-combine: horizontal;
	-ms-text-combine-horizontal: all;
	text-combine-upright: all;
}

字下げについて

文章で段落ごとに、一文字分スペースをあける際には、text-indentで指定をします。
指定する値は「1em」になります。1emは一文字分になります。

字下げについて

赤色
(情熱・強さ)

青色
(クリア・清潔)

緑色
(自然・新鮮)

<div class="writing-mode">
<p>赤色<br>(情熱・強さ)</p>
<p>青色<br>(クリア・清潔)</p>
<p>緑色<br>(自然・新鮮)</p>
</div>
/*--要素全体を縦書き--*/
.writing-mode {
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	
	-webkit-text-orientation: mixed;
	text-orientation: mixed;
}

.writing-mode p {
	/*--text-indentを指定--*/
	text-indent: 1em;
	margin-left: 30%;
}

ルビについて

文章にルビを指定する際には、HTMLタグrubyで指定をします。
文章に対し、rubyタグで囲み、振り仮名にはrtタグを使います。

ルビについて

赤色あか
(情熱・強さ)

青色あお
(クリア・清潔)

緑色みどり
(自然・新鮮)

<div class="writing-mode">
<p><ruby>赤色<rt>あか</rt></ruby><br>
(情熱・強さ)</p>
<p><ruby>青色<rt>あお</rt></ruby><br>
(クリア・清潔)</p>
<p><ruby>緑色<rt>みどり</rt></ruby><br>
(自然・新鮮)</p>
</div>
/*--以下省略--*/

線について

文章において線を引くことも多くなってきます。
text-decorationで指定できますが、borderでの指定も可能です。
borderで指定する事により、テキストと線の余白を調整をする事ができます。

線について

赤色
(情熱・強さ)

青色
(クリア・清潔)

緑色
(自然・新鮮)

<div class="writing-mode">
<p><span class="decoration-line01">赤色</span>
(情熱・強さ)</p>
<p><span class="decoration-line02">青色</span>
(クリア・清潔)</p>
<p><span class="border-line01">緑色</span>
(自然・新鮮)</p>
</div>
/*--要素全体を縦書き--*/
.writing-mode {
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	
	-webkit-text-orientation: mixed;
	text-orientation: mixed;
}

.writing-mode p {
	/*--text-indentを指定--*/
	text-indent: 1em;
	margin-left: 30%;
}

/*--decorationを指定(赤色)--*/
.decoration-line01 {
	text-decoration-line: underline;
}

/*--decorationを指定(青色)--*/
.decoration-line02 {
	text-decoration-line: overline;
}

/*--borderを指定(緑色)--*/
.border-line01 {
	border-right: dotted 3px #febe3e;
	padding-right: 5px;
}

text-decorationとは、テキストに対して線を指定できます。
線の種類、線のスタイル、線のカラーの指定が可能になります。

前回の記事

text-decorationの使い方についての記事になります。

まとめ

今回はこれで以上です。

POINT
  • text-combine-uprighとは、縦書きでの数字、記号、漢字などを縦書き中で横組みにするかどうかを指定します。
  • Safari用、IE用にベンダープレフィックスも一緒に指定をおこないましょう。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top