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

「reduce」を使って配列を値を処理する

data属性の取得・設定・更新【JavaScript】

変数のタイプを調べる、変換する 【Javascript】

VS CodeでLive Serverを使ってプレビューのリロードをしてみよう

メディアクエリでhoverが使えるデバイスかどうか

markdown-wasmというすごく高速なMarkdownパーサー

SNSシェアボタンをオリジナルで設置する

CSSでマスクする

クリッカブルマップのレスポンシブ対応ができる「image-map-resizer」が優秀らしい

我が家の植物たち

CATEGORY

POPULAR POSTS

PAGE TOP