私が高校生だった頃は、まだガラケーが主流でした。
モバゲーなどの携帯サイトの全盛期で、現在のSNSとは違う、
独自のコミュニティがありました。
当時は当然PCサイトが主流で、携帯からアクセスした際に、
正常に表示されないという問題がありました。
これはPCと携帯では画面の縮尺が違う事と、
携帯では一度に読み込める情報量が少なかった為、
CSSが正常に読み込めない事などが原因として挙げられます。
また、最終的にガラケーはスマートフォンほど席巻しなかった為、
多くのサイトがレスポンシブ対応ではありませんでした。
カラムA
カラムB
カラムC
ここに、3つのカラムがありますが、画面を小さくすると、
縦並びに変化する事が分かります。
これは、CSSの「メディアクエリ」によって、
画面サイズによって条件分岐しているからです。
これによって、PC上でモバイルでも表示出来るページを違和感なく作るのに、
非常に便利な機能となっています。
また、ノーコードでページを作れるSTUDIOというツールがありますが、
こちらは並行的かつ視覚的に、レスポンシブウェブデザインのページを
簡単に作る事が出来ます。
STUDIOでは肝心要のメディアクエリをどうやってやるか分からないですが、
PC/タブレット/モバイルに合わせて、以下を変更出来ます。
・divタグの大きさ
・画像(imgタグ)の大きさ(width=0にすれば、余計な画像を表示させない)
・margin
・padding
・文字のフォントとサイズ
これらをCSSに書き表すとなると膨大な作業になります。
ノーコードなので、CSSを書く手間を大幅に効率化してくれます。
ただし、注意が必要なのは、モバイルの横幅は400px程度となっており、
400pxの端末で見るには、ページ全体の横幅を400px以内にしなければ、
両端が切れてしまいます。
例えば、3カラム以上にしたい所はスライダーにするなど、工夫が必要です。
CocoonにもSTUDIOにも長所と癖がある為、
それらの特性や性質について、今後も研究が必要です。
