はじめてレスポンシブルデザインのサイトを作ってみた。
レスポンシブルデザイン?っと思う人も少なくないだろう。
レスポンシブルデザインは、パソコンで見ても、スマホで見ても、ちゃんと成立するホームページのデザインなのだ。
パソコンで見る場合とスマホで見る場合と、文字の大きさや画像の大きさを見る機器に合わせて表示させる仕組みを組み込むのだ。
基本的には、CSS(スタイルシート)に細工をして、画面の解像度に合わせてコンテンツを変化させる様な仕組みなのだ。
頭ではわかっていたのだが、実際に制作するとなるとかなり混乱する。
パソコンでは横並びで3つの画像を表示させることが出来るが、スマホの場合は横並びでなく縦に3つ並ぶこととなるのだ。
しかも、そう並ぶ様に考えてコーディングを行わなければならない。
ひな形となるテンプレートを作るのに、丸一日かかってしまった。
でも、このテンプレートに従って作れば、ちゃんとスマホでもPCでも見やすく閲覧できるのだ。頭で考えたデザインを具現化するのがこんなに難しいと感じたことは今までになかった。
3Dのパズルを解いている様な感じだ。
これ疲れるからしばらくやりたくないな(笑)