2016.11.4和風なサイト3連発

10月、なぜか和風なサイトが集中しまして、3発制作しました。

飲食店さんが1サイト、旅館が2サイト。

いずれも、縦書きがある、明朝体、レスポンシブでは縦書きは見難い場合があるので、場合によっては横書きに書き換える、というなかなかハードなコーディングでした。

和風なサイトを作ってみて、大変だったところをちょっとまとめてみました。

縦書きコーディング

HTML5 + CSS3でだいぶ楽にコーディングできるようになった縦書きコーディング。
それでもなかなか癖があって難しいです。
ブラウザによって挙動が違ったりもするので、ちょっと苦戦しました。

    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;

って書いておけばとりあえず縦書きにはなるんですが、text-alignで真ん中に寄らなかったり、とにかくいちいちめんどくさいわけです。
position使ったり、あれこれいつもより手間をかけてコーディングしてみました。

Chromeだけ上手く行かない！

なぜかChromeだけ上手く行かない、というか、Chromeだけmarginの取り方が違う！っていうなかなかないパターンの挙動。
めったにやらない、Chromeだけのハックなんかも使ってみました。
ちなみに意外にもIEは大丈夫。

@media (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm)

ネットで拾ってきたので、どこがどうとか詳しいことはよくわかりませんが、こいつで対応できました。

明朝体でコーディング

明朝体でコーディング自体は別に難しい話ではないのですが、ここで面倒なのが、Android。
今回制作した3サイトともレスポンシブウェブデザインだったので、明朝体をAndroidでどうやって表現するかで結構デザイナーと揉めました。

なんと、Android、ほとんどのバージョンで明朝体が搭載されてないらしいのです。確かに言われてみたらそうかもしれない。
逆に、iPhone Safariは放っておくと明朝体になっちゃうし、ほんと面倒ですね、レスポンシブ明朝体！

全部画像でもいいよなんていうクライアントもいましたが、それはちょっとプライドが許さないのと、逆に画像だとレスポンシブしにくいってのもあって、できる限り、テキストにできるところはテキストに、をポリシーに制作しています。きっとSEOにも効果あるはず。

WEBフォントで明朝体

で、どうやってAndroidで明朝体を表現するかというと、WEBフォントですね。もうWEBフォント最高です。
といっても明朝体は少ないし、有料のものも多いので、フリーフォントはとっても助かります。
WEBフォントは重いとかなんとかいろいろ課題はありますけど、クライアントの意向も、デザイナーの意向も汲みたいわけです。
できるだけ、気に入っていただいたデザインに忠実に再現したい、という思いはあります。

縦書きを横書きに戻す

PCは画面が大きいので良いのですが、スマホだと1画面に収まらない場合がある縦書きコーディング。
そこで、場合によってはPCでは縦書き、スマホでは横書き、なんてこともしたいですね。

writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;

逆にこんな風にしてやれば、縦書きのものを横書きにできます。

これを上手く組み合わせると、

1

こんな感じに、ひとつの要素の中で（といってもspanで囲んでますが）縦書きと横書きを上手く組み合わせるとちょっとかっこよくなったりしますね。
でも、text-align: center;が効かないので、位置の調整が面倒です。ご注意を。

縦書きでこんなことも

4

ちょっとずらしたこんな画像でしかできなそうなこともテキストで。

2

縦書きと横書きを組み合わせて雑誌のようなレイアウトも

3

メニュー、というよりお品書きですね、そんなこともできちゃいます。

めんどくさいのはめんどくさい、縦書きレスポンシブコーディング。
上手く使えば結構デザインの幅も広がるし、SEOのためにデザイン性を犠牲にしないといけない、なんてことも減りますかね？

実績をご覧になりたい方はお問い合わせフォームよりお問い合わせください。