BLOG

CSSで縦書きをする

| HTML / CSS

タイポグラフィになるのか、
見せ方として縦書きをしているサイトもちょいちょい見られますよね。

いまはSEOの観点から、画像文字をできるだけ少なくするということをしていると思うんです。
まぁ、メンテナンス的なことも関係していると思うんですが。

そんなこんなで縦書きをすることがちょいちょいします。

縦書き

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

これで、縦書きで右から左になります。

縦書き(左から)

.tategaki{
  -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
}

ぎゃくに、これだと左から右に流れる感じになります。

上記の2つだと英語が縦書きになるというより横向きになるって感じですかね。
ぼくはよく、英語を寝かしたようなデザインをこれを使ってやっております。

こういう感じのやつですね。
昔はrotateとか使ってやってましたが、位置の指定とかが縦書きにしたほうがしやすいのでこっちの方を使うようになりましたね。

英語も寝かさない縦書き

.tategaki{
  -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
  text-orientation: upright;
}

こいつを追加すると英語も横に寝ないで縦書きになります。
使う人いるのかわからんけども

日本語も寝かした縦書き

逆に、日本語を寝かして縦書きにすることもできるみたいです。

.tategaki{
  -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
  text-orientation: sideways;
}

これ追加するだけっすね。
これはちょっとつかうことがあるかもですね。

ほかにもちょこちょこっとあるんですが、
まぁ、よく使うのはこんな感じかなとそれではまたー

RECENT POSTS

我が家の植物たち

カスタムフィールドを含む複数の条件でソートをする【WordPress】

脱jQuery!$.ajax使わない書き方

検索用のフォームを設置する【wordpress】

docker-composeをつかってWEBサーバーをたてる

カスタムフィールドを検索範囲にいれる【ACF】

WordPressに大量に投稿をインポートする【CSV】

iOSのsafariでbackground-attachmentが使えないので対策【CSSのみ】

一周回ってapple 純正メモって使いやすい

使わないとかない!flexでの間隔の設定が簡単にできるgap!

CATEGORY

POPULAR POSTS

PAGE TOP