【長期インターン】　レスポンシブウェブデザインに大苦戦

こんにちは！社長室所属WEBプログラマーコースインターン生の小西光柊です。

先週より始まった、HPの模写練習！

実際に簡単なHPをコードをみないで再現してみようというこの練習ですが、

ある程度パソコンで見ながらパーツを作るところまではゆっくりながらも進めてはいました。

しかしここで一つの問題が生じました。

それこそがレスポンシブウェブデザインです。

レスポンシブとは応答性が高いといった意味の英単語でして、Webページの制作においては

スマホやタブレット、PCなどどの媒体から見ても快適にみられるようにページをデザインしようというものです。

ここまでわたしが模写してきていた状態のCSSでは、スマホで見てみたら画像が異様に大きくなってしまうといったものだったり

想定していないところにリンクの判定があったりと大変なことになってしまっていました。

こういった問題に対処するための方法としては、例えば画像の大きさをpx(具体的な長さ）で指定するのではなく

%(画面に対する割合）で指定することで画面の大きさによって自動的に画像の大きさが変わるようにするなど

様々なものがありました。

Webページをレスポンシブなものにする、なかなか苦戦するところも多かったですが非常にいい練習、学びになりました。

今回はレスポンシブウェブデザインのつくり方を調べたりなどでかなり時間がかかってしまったので次回こそ今作ってるものを

ばっちり完成させて報告できたらと思います！

メンバー紹介：https://guardian.jpn.com/member/

長期インターン生の活動日記：https://guardian.jpn.com/intern/