こんにちわ、T橋です(◔౪◔ )
以前書いたブログにコメントをもらえて嬉しいです〜
今回ももりもり書きます・・(∩^_^∩)

 

最近たてがきレイアウトのサイトって増えていませんか?
和風なサイトはもちろん、レイアウトに緩急を付けるときやTOPページのキャッチコピーだけ縦書き!なんてのもありますね。

 

今回初めて縦書きレイアウトのコーディングを行いましたので、
備忘録としてまとめます。(途中でレイアウトが崩れまくって大変だった・・)

 

今回の制作で大変参考になった縦書きweb普及委員会のリンクを貼ります。
このサイトかなり有名ですよね・・ありがとうございましたmm

 

(∩^o^)⊃━☆゚.*・。゚まとめ
【1】作業ブラウザはfirefoxかEdgeが良い
【2】親要素にtext-align: hogehogeの指定をする
【3】子要素(たてがきにしたいもの)に高さを持たせる
【4】子要素にwriting-modeの記述は必須

 

【1】作業ブラウザはfirefoxかEdgeが良い


縦書きにおいてレイアウトがシビアに崩れたのはfirefoxとEdgeなので、
最初からfirefoxで作業すると良かったです〜。
※今回IE11は対象外として作業しています。

 

【2】親要素にtext-align: hogehogeの指定をする


See the Pen
blog_20191118
by miyuki-takahashi (@takamiii-158cm)
on CodePen.

 

今回はコンテンツの中央配置にしたかったのでtext-align: centerを指定しました。
親要素に直接指定すると汎用性が落ちる気がしたので、center揃えの個別クラスを設置!
【.textCenter】部分

 

【3】子要素(たてがきにしたいもの)に高さを持たせる


 

ここがめちゃくちゃに重要です!!(firefox,Edgeで崩れないために・・!)

 

See the Pen
blog_20191118
by miyuki-takahashi (@takamiii-158cm)
on CodePen.

【.childBlock】部分にheightで高さを指定します。
横書きレイアウトだとこういうことをするのは稀ですよね・・。縦書き独自な感じがして面白いです。

 

【4】子要素にwriting-modeの記述は必須


あとはよくあるwebkitやmosの縦書き用おまじないをふりかけます・・(∩^o^)⊃━☆゚.*・。゚えーい

 

See the Pen
blog_20191118
by miyuki-takahashi (@takamiii-158cm)
on CodePen.

 -webkit-writing-mode: vertical-rl →たてがきにするおまじないの素
 -moz-writing-mode: vertical-rl →firefoxでたてがきにするおまじない
 -ms-writing-mode: tb-rl →Edgeでたてがきにするおまじない1
 -ms-writing-mode: vertical-rl →Edgeでたてがきにするおまじない2
 writing-mode: vertical-rl →プロパティ

 

rlは「right-left」の略なので、適宜変更して良いそうです。
特に変える必要が無いならrlがデフォルト値かと思います。
【h2】部分

 

以上で縦書きコーディング(chrome,safari,firefox,Edgeで崩れない)が終わりました!
heightの指定を忘れそうなので気をつけたいところです。

 

ではでは〜〜
written by T橋

関連記事

テーマカラーの必要性

フォントの計算をmixinにするとめちゃ便利!

Pugでの記述ルール・・改行のみ例外?

【游ゴシック】macとwinの差異!

テーマカラーの解決法~その2~

テーマカラーの解決法

コメント

コメントを返信する

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