ホームページをリニューアルしました〈9982〉

2017.07.08

2017年のお正月休みから、ずっとホームページをリニューアルしてきましたが、ようやく落ち着きました。たくさんの記事を1枚ずつのカードにし、そのカードをグループごとにまとめるデザインです。ヒントになったのは、娘と何度となく対戦してきたキッズゲームです。

ホームページをリニューアルしました リニューアルしたホームページと、キッズゲーム「DingDong」(2017.07.08)


Image

ドイツの「DingDong」というキッズゲームです。3階建て、それぞれの階に4住戸、計12住戸のアパートです。ゲームの最初に、色々なキャラクターのカードを入れ、玄関ドアを閉めます。サイコロを振って、出た目のドアに開ける前に、その住人のキャラクターを言わないといけないのです。が、なかなか思い出せないのです... 。


Image

「DingDong」のように上下左右に整列させる、「グリッドデザイン」です。左側のサイドバーは縦に1列、右側はカードが横に並びますが、1段あたりのカードは、閲覧する環境によって変化します。

パソコンのモニタでは4枚のカード、タブレットでは3枚のカード、スマホでは2枚のカードが並びます。

以前は、WindowsとMacのチェックだけでよかったのですが、現在では、パソコン・タブレット・スマホ、それぞれに合わせた「レスポンシブルデザイン」にする必要があり、そのためのチェックが必要になりました。

デザインは決まったものの、どのようにスタイルシートを記述すればいいのか、ずっと悩んでいましたが、ようやく解決できました。