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

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

数多くのWebサイトが存在する中で人の記憶に残るデザインにするために、いかにして目立つビジュアルにできるか、個性を演出できるかという点がWebデザインの課題の一つとなっています。このような状況で改めて見直されているのが、縦書きレイアウトによる和風デザインの演出です。今回は縦書きレイアウトをCSSで実装する方法と参考にしたいWebサイトをご紹介します。

IT業界まるわかりガイドは、日本初Web専門スクールのインターネット・アカデミーが運営する業界情報メディアです。最新の業界情報を、初心者にも分かりやすくご紹介しています。

目次

縦書きレイアウトの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;」と記述することによって、アルファベットを縦向きで表示できます。

【3】日本文化事始め

日本文化事始め

日本文化事始めは、日本文化の歴史、和食、日本の年中行事を数多くの写真とともに紹介するWebサイトです。日本の歴史を勉強する際は難しい漢字もでてくるため、文章をスムーズに読み進めるためには「ルビ」が欠かせません。このサイトの年中行事について説明するページでは、読むことが難しい漢字にルビが振られています。

ルビの設定は、HTMLの中で「ruby」タグを使用します。例えば、<ruby> 盂<rt> う</rt> 蘭<rt> ら</rt> 盆<rt> ぼん</rt> 会<rt> え</rt> </ruby> と記述すれば、漢字それぞれにルビを振ることができます。難読漢字には、ルビを振っておくと良いでしょう。

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

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

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

おわりに

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

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

参考URL

くらげごはん 自作ゲーム大年表 日本文化事始め たてよこWebアワード:縦書きWeb普及委員会

Web業界への就転職・キャリアアップを成功させたいと考えている方へ
日本初そして日本唯一のWeb専門スクールインターネット・アカデミー

自分にぴったりのコースが見つかる

インターネット・アカデミーでは、Web業界を目指すあらゆる方にお応えすべく、多彩なコースをご用意しています。

Webデザインを学びたい方

プログラミングを学びたい方

自分のペースとスタイルで学べる

毎回好きな受講形式を選んで学習することができるので、働きながらじっくり通いたい方も短期間での就職を目指す方も自分の都合に合わせて、スケジュールを組むことができます。

  • ライブ授業

    現役のプロインストラクター
    と仲間と学ぶメリット

    ライブ授業
  • マンツーマン授業

    インストラクターと
    1対1という贅沢

    マンツーマン授業
  • オンデマンド授業

    いつでも学びたいことを
    学べる

    オンデマンド授業

自分に適した学習方法を探す

インターネット・アカデミーでは、無料体験レッスンを毎日開催しています。デザインやプログラミングの体験ができるのはもちろん、実際の授業に参加したり、就職や転職のご相談、通学スケジュールのご相談なども承っております。

  • ご要望をお伺い

    ご要望をお伺い

    まずはお客様のご要望をお伺いし、お一人おひとりの目的や悩みに最適な内容にカスタマイズ。お客様専用の内容で当日ご案内いたします。

  • カウンセリング

    カウンセリング

    就職や転職、在宅で働きたいなど、お客様の希望を叶えるために専任のスタッフが最適な学習プランをご提案。現在の仕事のご相談なども承ります。

  • 体験レッスン

    体験レッスン

    「自分に向いている分野は?」「自分にできる?」そんな疑問を解決するレッスンを無料で体験。デザインもプログラミングもお試しいただけます。

無料体験レッスン・個別相談のご予約

当日ご希望の方やお急ぎの方は、フリーダイヤルにてご予約いただけます。

0120-746-555 フリーダイヤル受付時間(平日・土日) 10時-21時 オンライン予約

IT研修・人材育成のご相談を無料で承っております
法人専用社員研修、内定者・新人研修のご予約

インターネット・アカデミーでは、
あらゆるニーズに合わせた研修カリキュラムを取り揃えています。

「自社に最適な研修プランを相談したい」「研修費用の相談をしたい」「助成金を申請したい」など、お電話またはお問い合わせフォームよりお気軽にご連絡ください。

03-3341-3781 受付時間(平日・土日) 10時-21時 法人専用 お問い合わせフォーム