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

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

こんにちは。

ゆうや(@yuyaphotograph)です!

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

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

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

cssでテキスト縦書きサンプル

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

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です