こんにちわ、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橋
コメント