ASKHOTELS

これまでのコーディングの中で、最もCSSのコーディングに悩んだ思い出深いサイトです。

平行四辺形の タイルが 3行、3列に並んだ構造が特徴ですが、シンプルに見えて実は難しいというデザイン。斜めに走るラインを作ることの困難さは、ウェブコーディング経験者なら理解していただけるのではないでしょうか。納期に余裕がない場合は「無理」と言わざるを得ないデザインの一つです。

完全レスポンシブ対応で、画面幅が狭くなると縦の列が3列、2列、1列と順次減っていくようになっています。

同時に、平行四辺形のタイルのどこをクリックしてもちゃんとリンクが機能するようにするのがむつかしいポイントで、この課題を解決するために3日ほどHTMLとCSSの構造を考え続けました。

結局半分は力業で解決しています。現在ではCSS3のgridプロパティを活用することでもっとシンプルかつスマートに実現できるでしょう