【HTML】縦書き文字で和風Webデザインに！CSSで行う縦書きレイアウト

縦書きレイアウトのWebサイト3選

縦書きレイアウトは、CSSプロパティに縦書き指定を加えるだけで実現できます。ここでは縦書きレイアウトの手本となるサイトを3つ取り上げ、併せてCSSの文法を確認します。

【1】くらげごはん

くらげごはんは、縦書きでレイアウトされた、個人の料理レシピサイトです。1ページに1レシピが紹介され、まるで料理本のようなデザインになっています。ページの上半分に料理の写真、ページの下半分に縦書きで料理にまつわる話、作り方、材料が掲載されているデザインです。

既存の横書きレイアウトを縦書きに変更するためには、縦書き・横書きを指定するCSSプロパティ「writing-mode」を縦書きに指定します。CSSのbody内に「writing-mode: vertical-rl;」と記述することにより、右上を起点とする縦書きレイアウトになります。

【2】自作ゲーム大年表

自作ゲーム大年表は、自作ゲームの開発の歴史を紹介する年表です。年代ごとの時代背景は横書きですが、当時の出来事や自作ゲームの公開日が縦書きで記載されています。

writing-modeで縦書きを指定した場合、アルファベットはデフォルトでは横向きで表示されますが、このWebサイトでは縦向き（日本語と同じ向き）で表示されています。その理由は、縦書きのときに文字を回転させるプロパティ「text-orientation」を利用しているためです。 CSSのbody内に「text-orientation: upright;」と記述することによって、アルファベットを縦向きで表示できます。

「たてよこWebアワード」とは？

Webデザインにおける縦書きレイアウトの普及を促進するため、「CSS Writing Modes」を利用した優れたWebデザインを表彰する賞が、インターネット・アカデミーも協賛している「たてよこWebアワード」（旧称「縦書きWebデザインアワード」）です。
たてよこWebアワードは、総務省の後援を受けた数少ないアワードの一つでもあります。このようなコンテストに応募して結果を出せば一定の技術水準を示すことができ、Web業界への転職にも有利なため、積極的に応募しましょう。

たてよこWebアワードを主催する「縦書きWeb普及委員会」のWebサイトでは、縦書きWebデザインアワードの受賞作品が、審査員の寸評とともに紹介されています。縦書きをどのように活かしているのか、自分がWebデザインをする際に取り入れられる要素はないか考えてみましょう。
第2回のアワードは、2017年1月～2017年2月に開催されます。

おわりに

縦書きレイアウトを適宜取り入れることにより、Webサイトを見る人に新鮮さを与えることができます。現在は日本でも横書きレイアウトが主流ですが、これからはデザインにバリエーションを持たせるため、縦書きレイアウトも増えてくるでしょう。2020年の東京オリンピックを目前に控え、縦書きの和風Webデザインは注目が高まっています。

縦書きは日本の大切な文化です。日本の和の心を大切にするためにも、ぜひインターネット・アカデミーで縦書きレイアウトを学んでみませんか？