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でIDから本文を取得する

[PHP] 配列内の空白を削除「array_filter」「array_diff」

[PHP] 配列内の同じ値をまとめる「array_unique」

WordPressのカスタムフィールドでソートする

連想配列から特定の値を取得して配列にいれちゃうってやつ

JavaScriptで取得するGETの値

【CSS】text-decorationのカスタマイズができるの知ってた?

CSSでフッターの下に隙間ができないように調整する

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

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

CATEGORY

POPULAR POSTS

PAGE TOP