会員の方はこちらトップCSSデザインテクニックタイポグラフィ・文字の装飾CSSで縦書きレイアウトCSSデザインテクニックCSSで縦書きレイアウトグローバルなWebの世界では横書きの文字組が当たり前ですが、日本の伝統的な縦書きの文字組を使用したレイアウトも、美しいデザインを作る選択肢としていかがでしょうか。文字組を変えるだけで和の雰囲気を感じられる表現ができるので、是非試してみてください。ブックマークHTML・CSS公開日:2019/06/18最終更新日:2019/06/18目次1.CSSを使った縦書きについて2.CSSによる縦書きレイアウトの使い方3.CSSによる縦書きレイアウトの調整4.CSSで縦書きレイアウトまとめ1.CSSを使った縦書きについていきなりですが日本語の文章には縦書きと横書きがあり、我々日本人はどちらでも特に違和感無く読むことができます。英語圏やヨーロッパでは縦書きの文化に馴染みが無いため、日本の小説や新聞などでは当たり前ですが世界中と繋がるWeb上のサイトや広告・記事などではあまり目にする事が無いかと思います。いってHTML/CSSで縦書きが不可能ということではありません。今回は日本らしさを感じられる縦書きレイアウトについてまとめてみました。実はテキストを縦書きにレイアウトすること自体は凄く簡単です。vertical-rl;"を指定するだけです。昔はこちらのプロパティが存在せず、縦書きにしたい場合にはJavaScriptを使用して無理矢理調整する方法しかありませんでした。vertical-rl;"が実装され、とても簡単に縦書きを再現できるようになりました。Left)=右から左へという意味です。vertical-lr;"とすれば縦書きで左から右へテキストを配置させることができます。}</style>※IEの対応にはベンダープレフィックスが必要になり、少し記述が変わります。略称で、上から下へ、右から左へという意味ですね。この文章を縦書きにしますこのように、簡単に縦書きを使用する事ができます。縦書きにしたテキストを要素の右端に寄せたい場合はいくつかやり方がありますがpositionを使用するのが最もベターでしょう。vertical-lr;"で単純に縦書きにすると、英数字は横向きのまま無理矢理縦書きになっています。upright;"で英数字も正しく縦書きに修正することができます。Kobe"text-orientation"は初期値がmixedと設定されており、この状態だと日本語は縦に英語は横に設定されています。sideways;"を指定します。縦中横DTPではお馴染みの縦中横も実装できます。"13日の金曜日"←こういった2桁以上の数字を横にまとめる表示ですね。all;"を指定します。}</style>今回は13に縦中横を設定します。13日の金曜日このように表示させる事ができます。right;"を指定すると要素が下部に寄せられます。left;"を指定すると要素が上部に寄せられますので、首を右方向に傾けて見ていただくとわかりやすいかもしれません。"line-height"なども同様に横幅の指定となります。positionやmargin,paddingを設定する際は傾けた首を元に戻してください。これらのプロパティは横書きの状態と同様の動きをします。縦書きに限った話ではありませんが、小説のようなデザインにする際にはルビも設定したいところだと思います。こちらはHTMLのrubyタグで設定できますが、縦書きでも正しく右側に表示してくれます。}</style>SUDIEスーディーこれでHTMLで小説を作る事もできますね!4.CSSで縦書きレイアウトまとめ右上から左下へテキストが流れていく縦書きの組版はアジアの一部でしか馴染みの無いレイアウトですが、我々日本人にとってはとても親しみやすく、特に本が好きな方にはとても愛着のあるレイアウトでしょう。実はそんな縦書きWebコンテンツを広めたいと言う方は多く、縦書きWeb普及委員会という会まであります。