WordPressを用いたホームページ制作はお任せください!岡山県を中心に絶賛活動中!

CSSだけで文章を縦書きにする方法

-shared-img-thumb-BIS151026304113_TP_V

CSSだけで文章を縦書きにする方法えおご紹介しています。文章を縦書きにしたいけどやり方が分からない方は必見です。3分後には自由自在に文章を縦書きにすることが出来ます。

この記事は約 4 分で読めます。

CSSだけで文章を縦書きにする方法

和風のサイトなどで文章が縦書きのデザインを見るかと思います。
以前は、文章の縦書きを実現させるのは結構面倒でした。

ですが、CSS3では簡単に縦書きを実現することが出来ます。

サクッと解説してみますね。

文章を縦書きにしたい場合は、縦書きにしたい文章がある要素に以下の様な装飾をしてやります。

#vertical-writing{
width: 100%;
height: 300px;
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-webkit-writing-mode:vertical-rl;
}

この様に定義してやると、以下の様な縦書きが実現できます。

この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。

上記は右から左への縦書きでした。
左から右への縦書きは以下のように定義してやればOKです。

#vertical-writing{
width: 100%;
height: 300px;
writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
-webkit-writing-mode: vertical-lr;
}

上記の様に定義すると、以下のように左から右の縦書きが実装できます。

この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。この様に縦書きになります。

以上が文章の縦書きでした。

まとめ

CSSだけで文章を縦書きにする方法をご紹介しました。

個人的に縦書きの実装をする機会は過去にありませんでしたが、この機会に覚えておこうと思います。
和風サイトの制作依頼など来た時に使うこともあるかと思います。

簡単にできるカスタマイズなので、試してみてはいかがでしょうか?

シェアしていただきありがとうございます。

-shared-img-thumb-BIS151026304113_TP_V

この記事が気に入ったら【いいね】しよう!

著者:とあるWEBディレクター

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に7年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • clock-1205634_1280

    ランディングページでも使える!JavaScriptで作るカウントダウンタイマー

    JavaScriptで作るカウントダウンタイマーをご紹介します。ランディングページなどにカウントダウンタイマーを設置したい方は参考にしてください。1分後には本格的なカウントダウンタイマーの設置方法をマスターすることが出来ます。 記事を読む

  • modal-window-jquery

    初心者でも簡単!モーダルウィンドウを7分で導入する方法!

    初心者の方でも簡単にモーダルウィンドウをサイトに導入する方法をご紹介します。モーダルウィンドウを導入したいけど上手く導入することができなかった方、ぜひ参考にしてください。 記事を読む

  • colored-pencils-179170_1280

    まとめて良かった!WEBデザインするときに参考になるデザインまとめサイトのまとめ

    WEBデザインの参考になる21の「デザインまとめサイト」をご紹介します。WEBデザインをする方には、役立つコンテンツかな~と勝手に思い込んでいます。WEBデザインの参考にしてください。 記事を読む

  • PPP_cyairoihushinomegane500

    CSSで背景を半透明にする方法

    「CSSで背景色を半透明する方法」をご紹介します。 記事を読む

  • golden-retriever-379226_1280

    めっちゃ便利!ダミー画像を作成するなら【placehold.jp】で決まり!

    ダミー画像を簡単に作成することのできる【placehold.jp】をご紹介します。簡単な操作でダミー画像がサクッと作成できる無料サービス。WEBサイトの制作などダミー画像が必要になったら【placehold.jp】がめちゃ便利です。 記事を読む

コメントを残す


(必須)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)