page フォント・テキスト関連

最終更新：2021/06/30

縦書き

テキストを縦書きにします。
改行すると次のテキストは左になります。
縦書き文字で作ると、画面の幅から溢れた文章は下に改行などされることなく
延々と横に増え続けます。
多くても2・3行程度に収まるように作るのが無難です。

html

<p class="font_vertical">テキストを縦書きにします。<br>改行すると次のテキストは左になります。<br>
        縦書き文字で作ると、画面の幅から溢れた文章は下に改行などされることなく<br>延々と横に増え続けます。<br>
        多くても2・3行程度に収まるように作るのが無難です。</p>

<p class="font_vertical">テキストを縦書きにします。<br>改行すると次のテキストは左になります。<br>

縦書き文字で作ると、画面の幅から溢れた文章は下に改行などされることなく<br>延々と横に増え続けます。<br>

多くても2・3行程度に収まるように作るのが無難です。</p>

css

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

.font_vertical {

-webkit-writing-mode: vertical-rl;

-ms-writing-mode: tb-rl;

writing-mode: vertical-rl;

}

途中の数字を縦にするときは
「span.font_orientation」で囲んでください。
例・3月31日は月末

html

      <p class="font_vertical">途中の数字を縦にするときは<br>「span.font_orientation」で囲んでください。<br>
        例・<span class="font_orientation">3</span>月<span class="font_orientation">31</span>日は月末</p>

1 2	<p class="font_vertical">途中の数字を縦にするときは<br>「span.font_orientation」で囲んでください。<br> 例・<span class="font_orientation">3</span>月<span class="font_orientation">31</span>日は月末</p>

css

.font_orientation{
	text-combine-upright: all;
}

.font_orientation{

text-combine-upright: all;

}

縦書きを指定しているクラスのところに直接text-align:centerなどの揃えるクラスを入れると次のようになります。

中央揃えになる予定。
中央揃えになる予定中央揃えになる予定。

右揃えにしたい。
右揃えにしたい右揃えにしたい。

横方向ではなく、縦を基準に中央・右揃えにされます。
横書きのテキストに中央・右揃えを指定して、時計回りに90度回した感じです。

横方向で中央・右揃えにしたい場合、下の場合、
「p」タグの親要素に中央か右にするかを指定、「p」タグに「d-inline-block」と「text-left」を指定します。
※「d-inline-block」と「text-left」はbootstrap4に搭載されているクラスで、指定した要素をインラインブロック要素にし、左揃えにします。

「p」タグの親要素に中央揃えを指定
「p」タグに「d-inline-block」と「text-left」を指定

「p」タグの親要素に右揃えを指定
「p」タグに「d-inline-block」と「text-left」を指定

<div class="row">
		    <div class="col-6 txt-center">
		        <p class="font_vertical d-inline-block text-left">「p」タグの親要素に中央揃えを指定<br>「p」タグに「d-inline-block」と「text-left」を指定</p>
	        </div>
		    <div class="col-6 txt-right">
		        <p class="font_vertical d-inline-block text-left">「p」タグの親要素に右揃えを指定<br>「p」タグに「d-inline-block」と「text-left」を指定</p>
	        </div>
	    </div>

<p class="font_vertical d-inline-block text-left">「p」タグの親要素に中央揃えを指定<br>「p」タグに「d-inline-block」と「text-left」を指定</p>

</div>

<p class="font_vertical d-inline-block text-left">「p」タグの親要素に右揃えを指定<br>「p」タグに「d-inline-block」と「text-left」を指定</p>

</div>

今回、縦書きのcssについては基本的なことしかまとめていないです。
もっと調べれば雑誌のようにレイアウトすることも可能です。ただ、その都度細かい調整が必要になったりします。
参考サイトを貼っておくのでよろしければご確認ください。

外部リンク：http://tategaki.github.io/explan6.html

英語フォント

通常：abcdefg ABCDEFG
下記テキストには「efont」のクラスを指定しています。テーマで読み込んでいる英語フォントにします。

abcdefg ABCDEFG

spanで囲んでテキストの一部分のみに適用もできますが、英語フォントと日本語フォントでは文字の高さなどが違う場合があるので調整が必要になるかもしれません。

html

<p class="efont">abcdefg ABCDEFG</p>

1	<p class="efont">abcdefg ABCDEFG</p>

css

.efont{
    font-family: 'Fjalla One', sans-serif;/* テーマの英語フォントに合わせる */
}

.efont{

font-family: 'Fjalla One', sans-serif;/* テーマの英語フォントに合わせる */

}

フォント色

テキストの色を白くします。
わかりづらいので背景色をつけています。

html

<div class="bg_color_b">
			  <p class="font_color_w">テキストの色を白くします。<br>わかりづらいので背景色をつけています。</p>
		  </div>

<p class="font_color_w">テキストの色を白くします。<br>わかりづらいので背景色をつけています。</p>

</div>

css

.font_color_w{
	color: #fff;
}

.font_color_w{

color: #fff;

}

振り分けページへ戻る

トップへ戻る