00:00
こんにちは、アシカガキャストです。 ウェブサイトの制作をしていて、制作途中のページを確認してもらう時に
表示がおかしいとか、修正してと言った部分が直ってないじゃないかと言われて
多分それリロードしてないんだと思いますと。 リロードをしてくださいと
言うと、あ、直りましたと言われることが非常に多いんですね。
リロードというのは、再読み込みということですね。 ブラウザのくるっと回っている矢印のボタンを押すと
リロード再読み込みになります。 ウェブページというのは、サーバー上にあるいくつかのファイルを読み込んできて
表示させるわけなんですが、同じページを見るのに毎回毎回サーバーから
html のファイルだったり画像のファイルだったりを読み込ませていると時間がかかるので、一旦
その見ている人のパソコンだったりスマホだったりに データを保存しておいて
2回目からはそのデバイス上にあるファイルを見に行くというようなやり方をするんですね。
もちろんしばらくぶりに訪問したページの場合、情報が新しくなっているかもしれないので読み込み直すとか
その辺はブラウザ側が賢くやってくれているという感じなんですね。 ただクライアントの人がウェブページを見て
ここを修正してくださいと言われて私が直したとして、じゃあ直しましたと。 でもう1回同じページにその人がアクセスしてもさっき見たばっかりだから
キャッシュが残ってると。その人のデバイス上に保存されているファイルを読み込んでるんで 直ってないじゃないかということが起きるわけですね。
なので再読み込みをする方法を教えたりしてリロードをお願いするんですね。 ウェブページは html ファイルというものでできているということは知ってる人多いと思うんですが
デザイン、レイアウトの部分は css という別のファイルで管理しています。 文字のサイズとか行間どれぐらいにするかとか色をどうするかとかそういうルール作りですね
ただこの css ファイルはサイトが公開された後そんなに頻繁に更新されるものではないので 普通にリロードした時に html ファイルは再読み込みされるんですけど
css はされないケースもあります。 そういう時は強制リロード
03:06
スーパーリロードとも言うと思うんですが 通常のリロードとは別なリロードがあるんですね
ブラウザにもよると思うんですが だいたいシフトを押しながらリロードボタンを押すとかでいけると思います
たまにこれでも直らないキャッシュを読んじゃうということがあってその場合は キャッシュを削除してもらうと
少々面倒なことをやってもらうことになってしまいます キャッシュというのはデバイスに一時的に保存されているファイルのことです
なお chrome ブラウザだと デベロッパーツールを表示している時には
リロードボタンを長押しすると通常の再読み込み ハード再読み込み強制リロードですね
キャッシュの消去とハード再読み込みという3つのリロードの仕方を選ぶことができるので便利ですね
デベロッパーツールは表示メニューの開発管理のところから選んで表示させることができます
ページを修正しましたと CSS を変更した場合にキャッシュが読まれないようにする
web 製作者が使うちょっとしたテクニックがあります CSS ファイルは html ファイルから読み込ませるんですが
その時に CSS ファイルの名前の後に はてなマークを入れて何か適当な文字列を入れるんですよ
アドレスの末尾にはてな何とかと入っているのをパラメーターと呼ぶんですが そのパラメーターによってページの内容を変更するとか
そういうことに本来は使うんですがそういう仕組みがない場合 はてないかに何が入っていてもそのファイルがそのまま読み込めれます
ただファイルの名前が違うのでブラウザは違うファイルだと思うんですね
例えば今までのファイルが何たら.css だったとして次に何たら.css はてな1と指定されていたら別ファイルだと思って
キャッシュを見ずにサーバーからファイルを読み込ませるんですね じゃあもう1回修正がありましたとじゃあ css ファイルを修正したとして
何たら.css はてな2に変えるとまた違うファイルだと思ってサーバーから読んで くれるという仕組みです
もちろん html がリロードされないとダメなので前の修正からそんなに時間が経ってない場合は まず html をリロードしてもらう必要があると思うんですが
06:06
この css にパラメーターをつけるという方法はかなり有効です 今回は以上です
