1. ホーム
  2. コラム
  3. 年賀状をHTMLとCSSで再現してみる – 毛筆フォントと縦書きCSS(Webサイト運用テクニック)

年賀状をHTMLとCSSで再現してみる – 毛筆フォントと縦書きCSS(Webサイト運用テクニック)

新年あけましておめでとうございます。

スマホなどモバイルデバイスが普及した現在では、新年の挨拶は年賀状ではなくSNSやメールで、という人も多いのではないでしょうか。

今回のコラムはそんな懐かし(?)年賀状をHTMLとCSSで再現し、そのために利用した普段あまり使うことのない毛筆フォントと縦書きCSSについて調べてまとめました。

日本的な雰囲気をだしたいページをつくる際には参考になるかも知れません。

※上記画像はWindows7(MSOfficeインストール済)でのキャプチャ画像です。埋め込んだコードでの表示はコラム後半にあります。ひよこのイラストは画像素材です(「年賀状2017イラスト愛」より)。

筆で書いたようなフォントを使いたい! 毛筆フォントは使えるか?

Web上の文字は視認性を優先するため、日本語ではゴシック体が使われることがほとんどです。

しかし、今回は年賀状っぽさをだすため、普段あまり使うことのない筆で書いたように見えるフォントを表示させることができないか調べてみました。

Windowsの場合

調べた結果、Windowsに標準インストールされている毛筆のように見えるフォントはありませんでした(中国語向けならありましたが)。他で選ぶなら明朝体となりますので、おなじみの「MS P明朝」を指定します。

ただし、MicrosoftのOffice製品がインストールされている環境の場合、「HGP行書体」というまさに筆で書いたようなフォントが使えるようになりますので、こちらを先に指定するように追加します。

謹賀新年

font-family: “HGP行書体”, “MS P明朝”, “MS PMincho”, serif;

MacOSの場合

Windows同様、Macの場合も日本語で毛筆のようなフォントはありませんでした。
苦肉の策として、中国語向けのフォント「STKaiti(华文楷体)」を使ってみます。

謹賀新年

ひらがなも問題なく表示されていました。
念のため、次の優先フォントとしておなじみの「ヒラギノ明朝」を指定しておきます。

font-family: “STKaiti”, “ヒラギノ明朝 Pro W3″, “Hiragino Mincho Pro”, serif;

スマートフォン・タブレットの場合

残念ながら、スマートフォン・タブレットに筆のように見えるフォントはありません。
上記PC向けの指定で明朝体表示となります。

Google Fontで毛筆フォントはないのか?

CSSには端末内に入っているフォントではなく、Web上にフォントデータを置いて表示させる”Webフォント”という仕組みがあり、閲覧者の使用環境に依存しないフォント表示が可能です。

Googleによる「Google Fonts + Japanese Early Access」では日本語フォント9種類を試験的に公開しており、独特の明朝体があります。これが使えるかと思いましたが、ひらがなのみでしたのでやはり使えず…。

※そもそも日本語フォントはデータ量が多いため表示速度を考慮すると、あまり実用的ないという問題があります(採用する場合は必要な文字のみ指定してダウンロードさせるサービスを利用するのが現実的)。

CSSで縦書きを実現する – writing-mode

次に、文字を縦書き表示に変更します。

CSSのプロパティ“writing-mode”を使用して下記の指定をすると、右上からの縦書き表示になります。

writing-mode: vertical-rl;

ただし、このプロパティはまだ勧告候補の段階で、各ブラウザもまだ実験的な実装となっています。

▼各ブラウザの対応状況参考URL
Can I use… Support tables for HTML5, CSS3, etc

確認したところ実験段階とはいえ、ChromeやFirefox、さらにスマホでも最新の環境であれば問題なさそうです。

IEに関してはIE10以下は非対応ですが実は独自実装がされており、下記の記述でIE8以上では問題なく縦書きになることが確認できました。

-ms-writing-mode: tb-rl;

あわせてSafariなどのwebkit系レンダリングエンジンを採用しているブラウザでは、ベンダープレフィックスを使用した先行実装がされていたため、下記の指定も追加しておきます。

-webkit-writing-mode: vertical-rl;

ということで完成したHTMLとCSSを埋め込んだものが下記となります。
IE7では横書き表示として配置調整していますが、他の環境ではフォントの違いはありますが縦書き指定と配置は同じ表示になっているはずです。

謹賀新年

新しい年を迎え
皆様のご健康とご多幸を
心よりお祈り申し上げます

平成二十九年 元旦

おわりに

昨年末、年賀状を意識して久しぶりに筆を手にとってみたところ、あまりの下手さに使うのを断念しました…。

そこで、上手な方が書かれたお手本の筆使いを見ていたところ、日本語は縦書きのためにつくられている文字なんだなということを改めて認識し、今回の「年賀状っぽい表示(毛筆フォントで縦書き)をCSSで再現してみたら」と思い立った次第です。

Webはもともと英語圏生まれですので横書きを前提としています。

日本でもほとんどのWebサイトが横書きですが、こんな機能も(使いどころは選びますが)存在していますので、演出のひとつとして参考にしていただければと思います。

▼参考URL
Google Font
たてよこWebアワード 技術解説


■コラム執筆者
メンバーズ 第2ビジネスユニットアカウントサービス第8ユニット 木原慶仁

メンバーズのWebサイト運用サービス

カテゴリ: Webサイト運用運営
2016年12月28日

RSS