どうも！リリース間近で、あまり記事を更新できていないtomicciです。
昨日までは40℃近い熱を出していました！(笑)
最近、エンジニア同士の会話で、フォームエリアの境目はズルい線でコーディングしといて！と言って通じることが多くなった気がします。
・・・ズルい線？？
初めて聞くと何のことかさっぱりですよね。
こういう線を指すらしいのです。
えっ！？どれだか分からない？？
これです！白い枠に囲まれている区切り線のことです↓
ズルい線というのは1pxの線の下に、1pxの影が付いたように見える線のことを指していて、これを使うと区切り線のクオリティが途端に増します。
合計2pxになっただけなのに、一気に立体的に見えるようになってしまう。人間の目、残念。
こういう小細工的なテクニックを、デザイナーは幾つも体得しているのでどんどん使ってきます。HTMLコーディングする際に、一々画像で切り出していくのは大変ですよね。
これ、透明度を設定したりすることで、CSSで簡単に実現できるんです。
知ってるだけで、すぐに実装できてしまう、まさに「ズルい線」
いかに効率よく、少ない手間で綺麗に見せられるかって、重要だと思うんですが、「ズルい線」の他にも、「ズルい文字」や「ズルい背景」など、幾つか知っておくと非常に便利なテクニックがあります！
これらを総称してズルいデザインテクニックと呼ばれており、出所は下記になります。じっくり読んで、是非活用してください！
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass
