和風なサイト3連発2016.11.4和風なサイト3連発10月、なぜか和風なサイトが集中しまして、3発制作しました。飲食店さんが1サイト、旅館が2サイト。いずれも、縦書きがある、明朝体、レスポンシブでは縦書きは見難い場合があるので、場合によっては横書きに書き換える、というなかなかハードなコーディングでした。和風なサイトを作ってみて、大変だったところをちょっとまとめてみました。CSS3でだいぶ楽にコーディングできるようになった縦書きコーディング。それでもなかなか癖があって難しいです。ブラウザによって挙動が違ったりもするので、ちょっと苦戦しました。vertical-rl;って書いておけばとりあえず縦書きにはなるんですが、text-alignで真ん中に寄らなかったり、とにかくいちいちめんどくさいわけです。position使ったり、あれこれいつもより手間をかけてコーディングしてみました。Chromeだけ上手く行かない!なぜかChromeだけ上手く行かない、というか、Chromeだけmarginの取り方が違う!っていうなかなかないパターンの挙動。めったにやらない、Chromeだけのハックなんかも使ってみました。ちなみに意外にもIEは大丈夫。0.001dpcm)ネットで拾ってきたので、どこがどうとか詳しいことはよくわかりませんが、こいつで対応できました。明朝体でコーディング明朝体でコーディング自体は別に難しい話ではないのですが、ここで面倒なのが、Android。今回制作した3サイトともレスポンシブウェブデザインだったので、明朝体をAndroidでどうやって表現するかで結構デザイナーと揉めました。なんと、Android、ほとんどのバージョンで明朝体が搭載されてないらしいのです。確かに言われてみたらそうかもしれない。Safariは放っておくと明朝体になっちゃうし、ほんと面倒ですね、レスポンシブ明朝体!全部画像でもいいよなんていうクライアントもいましたが、それはちょっとプライドが許さないのと、逆に画像だとレスポンシブしにくいってのもあって、できる限り、テキストにできるところはテキストに、をポリシーに制作しています。SEOにも効果あるはず。WEBフォントで明朝体で、どうやってAndroidで明朝体を表現するかというと、WEBフォントですね。WEBフォント最高です。いっても明朝体は少ないし、有料のものも多いので、フリーフォントはとっても助かります。WEBフォントは重いとかなんとかいろいろ課題はありますけど、クライアントの意向も、デザイナーの意向も汲みたいわけです。できるだけ、気に入っていただいたデザインに忠実に再現したい、という思いはあります。縦書きを横書きに戻すPCは画面が大きいので良いのですが、スマホだと1画面に収まらない場合がある縦書きコーディング。そこで、場合によってはPCでは縦書き、スマホでは横書き、なんてこともしたいですね。horizontal-tb;逆にこんな風にしてやれば、縦書きのものを横書きにできます。これを上手く組み合わせると、こんな感じに、ひとつの要素の中で(といってもspanで囲んでますが)縦書きと横書きを上手く組み合わせるとちょっとかっこよくなったりしますね。center;が効かないので、位置の調整が面倒です。縦書きでこんなこともちょっとずらしたこんな画像でしかできなそうなこともテキストで。縦書きと横書きを組み合わせて雑誌のようなレイアウトもメニュー、というよりお品書きですね、そんなこともできちゃいます。めんどくさいのはめんどくさい、縦書きレスポンシブコーディング。上手く使えば結構デザインの幅も広がるし、SEOのためにデザイン性を犠牲にしないといけない、なんてことも減りますかね?実績をご覧になりたい方はお問い合わせフォームよりお問い合わせください。CONTACTお仕事の依頼やご相談などはメールにてお問い合わせください。お問い合わせフォーム※迷惑な営業電話が多いので留守番電話にしております。営業電話については着信拒否対応を順次行っております。営業メールについてもスパム処理を行っております。株式会社WOOM株式会社WOOMは、企業サイトや店舗サイト、ECサイトなどのWEBサイト制作をしています。