前回、Mocoro作Alex Pragerのウェブサイトを紹介したウェブサイトブラウジングシリーズの2回目です。今回はArea 17というインタラクティブエージェンシーのウェブサイトで絶妙なアクセントとなっている赤いナナメ線について。
この赤いナナメ線。ページ内のサムネールや、リンクよりも前面を突っ切っています。大きなPNG画像を用意して乗せれば簡単に再現できそうに見えて、実はHTMLを書く人はあまりやりたがらない部分なのです。
このサイトではJavascriptでfor文を回し、1pxずつ赤いdivをドットとして描画して赤いナナメ線を実現させています。
赤いdiv上の1pxだけクリックできないだけで、ナナメ線問題をクリアしている。こういう部分は、デザイナーとプログラマーの連携が取れていないと、なかなか実現できないのではないでしょうか。
さて最後に、突然ですが、今日はイブですね、メリークリスマス！寝ます…。
この記事は旧ブログより転載したものです。
萩原俊矢「GICOI2」CBC-NET, 2011年12月24日. https://www.cbc-net.com/blog/hgw/2011/12/24/gicoi2/