WEB制作 学習記録②

WEB制作学習記録２回目です。

レスポンシブWEBデザインを勉強する際、環境を構築するのにかなり時間を要してしまったので、そのことについて書いていこうと思います。

レスポンシブWEBデザイン

レスポンシブWEBデザインとは

表示する端末（PC、スマホ、タブレット等）の画面のサイズによってCSSを切り替える手法

のことです。

PCの画面幅にあわせて、いろいろな要素を横に並べたサイトを作っても、横幅が小さいスマホやタブレットでは非常に見にくくなります。

今はPCよりもスマホやタブレットでWEBページを見る人が大半なので、レスポンシブルデザインの考えは非常に重要です。

PCで作ったHTMLファイルをスマホで閲覧しようとしたところ、壁にぶち当たったので参考記事を紹介します。

ただ、この方法だとHTMLファイルを書き換えて保存しても、端末から普通にページを再読み込みしても反映されません。

なぜなら、キャッシュという機能のせいで書き換えられる前のHTMLファイルの内容を端末が覚えてしまっているから。

ブラウザの設定からキャッシュを削除すれば書き換えられた内容が反映されますが、毎回削除するのは面倒です。（WindowsではCtrl+F5でスーパーリロードで読み込みできるがスマホにはそのような機能はない）

よく考えると、これって表示ブラウザの画面幅がある一定の幅（600pxとか）よりも大きいか小さいかの違いなわけで、必ずしもスマホで表示させる必要はなくね？

PCからスマホと同じサイズの画面を表示させる機能はないのかなあといろいろ調べていたら、やっぱりありました。

Chromeの検証ツールで、画面幅を自由に変えて表示できる機能です。以前JavaScriptを書くときにコンソールを使うために検証ツールを使っていましたが、こんな機能もあったんですね。

HTMLやCSSを一時的に書き替えるときにも使えるので便利です。

WEBやプログラミングの学習は、単にコーディングをするよりも環境の構築に時間がかかってしまいますね。めげずに頑張ります。