CSSでテキストを縦書き中央に配置する方法

2020/01/02

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、CSSでテキストを縦書き中央に配置する方法をご紹介します。

Webサイトのトップページキービジュアルの右下に固定表示するCTAボタンで見かけたことありませんか？

↓↓↓例えばこういうボタンです。

どうですか、見たことありますね笑

今回はそれを実装していきます。

それでは見ていきましょう！

CSSでテキストを縦書き中央に配置できるようになろう！

今回のTipsの肝は以下の記述です！

↓↓↓

index.css

position: absolute;
top: 50%;
left: 50%;
display: inline;
transform: translate(-50%, -50%);
writing-mode: vertical-rl;

↓↓上記コードのポイントはこちら。

・writing-modeプロパティをvertical-rlで指定することでテキストを上から下へ垂直に配置

・absolute、top:50%、left:50%、translate(-50%,-50%)などでテキストを上下中央に絶対配置

MEMO

当ブログの他の記事でもtranslate(-50%,-50%)の記述は頻繁に登場します。absolute要素の中央寄せには欠かせない存在です笑

HTMLの構造はこんな感じの入れ子になってます！

↓↓↓

index.html

<div class="Inner">
  <a href="#" class="Inner-CTA">
    <p class="Inner-CTA-Text">電話予約</p>
  </a>
</div>

一番上の親要素にposition:relativeを指定してあげるのも忘れずに(^o^)

index.css

.Inner {
  position: relative;
  height: 100vh;
}

CodePenでCTAボタンのサンプル作ったのでご覧になって下さい〜

↓↓↓

See the Pen
縦書き by 石森裕也 (@yuyaphotograph)
on CodePen.

※リセットCSSをちゃんと読み込んでる方は、margin:0の記述は書かなくて大丈夫です。

以上、CSSでテキストを縦書き中央に配置する方法をご紹介しました。

ボタン、テキストのサイズなどよしなに変更して試してみてください〜(^o^)

最後までご高覧いただきありがとうございました！