1. HOME > 
  2. ブログ・お知らせ > 
  3. HTML/CSS > 
  4. 制作実績「実務教育出版『通信講座で公務員合格』LP(スマートフォン)」

ライラックミモザのブログ・お知らせ

2012年7月25日

制作実績「実務教育出版『通信講座で公務員合格』LP(スマートフォン)」

実務教育出版様の「『通信講座で公務員合格』スマートフォン用ランディングページ」のデザインとコーディングを担当させていただきました。

スマートフォンサイトのコーディングは以前仕事で少しやったことがありますが、今回、デザインとコーディングを一緒に制作させていただくことで、あらためてHTML5やCSS3についてもより考えることができました。

また、Safariで①特定のfont-size(11px、10px、9px)のときにマルチバイトの幅計算がおかしくなるバグの対処や、②デバイスを回転したときにfont-sizeが大きくなってしまう問題についても勉強になりました。

上記のバグは、
①特定のfont-sizeを指定している箇所に、letter-spacing: -0.001em;
②bodyに、-webkit-text-size-adjust: 100%;
をCSSにぞれぞれ記述することで、制御できます。

制作にあたって、参考にさせていただいた記事はこちらです。ありがとうございます。
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
【Webアプリ】iPhone4で画像をきれいに表示する色々な方法【試行錯誤編】
iOSのSafariで特定のfont-sizeのときの謎の隙間
iPhone対応サイト制作のまとめ

ブログ・お知らせトップへ