スマートフォンサイト制作で、要素と要素の繋ぎ目に謎の境界線が出来る場合の対応

※機種依存と開発手法を含む超レアなケースです

CSSで背景画像を使った領域を使った場合に、要素と要素の繋ぎ目に意味不明な境界線が発生した不具合でハマったので、原因（と思われる事）とその解決方法。
今回の現象はXperiaだけで発生（AndroidOSのバージョン関係無し）という非常に稀なケースでした。

CompassでSprite画像を生成する時に役立ったリンクまとめ

Compass(コンパス)でSprite画像を自動生成する仕組みはすでにネット上でかなり色々なノウハウが語られてるが、
現在のプロジェクトのディレクトリ構成で、Sprite化する元画像とSprite化した後の画像を別のディレクトリで管理しなくてはならなくなり、
その方法で色々ハマったので、参考にしたURLをとりあえず手当たりしだいに貼っておきます。

  何に詰まって、どうやって解決したかは後日まとめる予定。

iPhone用WEBサイトでヒラギノ角ゴW6（太字）を使用する方法

久しぶりに記事を書きます。

最近はスマホ向けのWEBサービス開発をやっているのですが、 iPhone（iOS）で表示する際に、太字であるヒラギノ角ゴW6を表現するときのCSSの指定の方法に罠があったので残しておきます。

とりあえず、iOSの場合は、font-weight:bold は効きませんので、 font-famiryをヒラギノ角ゴW6にしてあげる必要があります。

【box-sizing】 CSS3で bordar や padding を含めた横幅を指定する

CSS3で新しく追加されたプロパティの中に、「box-sizing」があります。

このプロパティを使用する事で、『要素のwidth値にpadding と borderの値を含める、含めない』を定義する事が出来ます。

このプロパティを使用する事で、リキッドレイアウトデザイン時に横幅を％で指定した場合などに、padding と borderの値を気にせずレイアウトを組めるようになります。