CSSはすぐに反映されない?
今日はアルバイトに応募しようと思ったら
今までにWEBサイトの制作経験がある方はそのURLをお知らせ下さい。
という項目があったので,拙いサイトでも少しはまともに見れるようにと体裁を整えていました,そしたら直面した問題.
サーバに上げたcssファイルが反映されないどころか消しても居残ってるせいで更新できない,何これ.
— triplog (@triplog55) May 20, 2014
時間開けたら解決した.CSSファイルに対してスーパーリロードは効かないのかな.
— triplog (@triplog55) May 21, 2014
ということで解決したのですが,いちいち反映に時間が掛かってめんどくさい.
htmlはスーパーリロードが有効だから早く反映結果が知りたいときはhtml内でstyle記述すりゃいいってことに気づいたけど,最終的にはcssの方に記述しておきたいからびみょい.
— triplog (@triplog55) May 21, 2014
と苦労していたのですが,どうやらCSSへのURLの末尾にクエリ(?~~)を付ければキャッシュと別のものだと判断し,読み込みを始めるので解決するみたい.度々使えるし,JavaScriptでも使えるらしいので覚えておきたい.
<!-- before --> <link rel="stylesheet" href="ra-men.css"> <!-- after --> <link rel="stylesheet" href="ra-men.css?0521">
本題
そもそも何でCSSをそんなにいじっていたかというと,無料のレンタルサーバを利用しているため実行環境ではページ上部に広告が存在し,それによってレイアウトが崩れてしまうことが懸念されたためです.試しに製作中のページをアップしてみたところ,- 右メニューがズレている
- フォントが反映されていない
広告がエロゲー
と見るも無残,台詞が枠に収まっているのが不幸中の幸い.
右メニューのズレに関してはfloatで解決を図り,フォントが反映されていない件についてはファイル転送時にサイズ上限を超えていて送れないことが問題だったので別のアップロード方法を用意したらうまく行きました.
進捗
floatにしたことで,ページ幅が十分にない時は画像の下に回りこんでしまうのが個人的には好きじゃないのでまた考える様かも.フォントの問題については当初手に負えないんじゃないかと絶望した分達成感が大きかったのでやったことをまとめておきます.
net2ftp利用のアップロード
- net2ftp_v1.0.zip をDL,展開
- files_to_upload 以下を php の動くサーバにディレクトリを作りコピー(XAMPPの場合,\XAMPP\htdocs\net2ftp\)
- htaccess.txt を .htaccess に変更し転送上限を変更
- サーバを起動し作ったディレクトリへ移動,あとは画面に従ってログイン,アップロード
これだけで無事に成功,もっとちゃんとした説明については参考先を参照して下さい.とりあえずXAMPPが素敵.
ちなみにこの前にFFFTPを使う方法を試したのですが,アップロード時にファイルが破損してしまうのかうまくいきませんでした.小さめのファイルを複数送る用と考えたほうが良いのかな.
その他
広告に関しては絶対位置指定で画像とか置けば隠せそうだけど,巡回とかされたら利用停止されかねないのでやめておきます.@PAGES(アットページズ) 利用規約
第12条(利用者の禁止行為)
(11) 当社もしくは当社の提携先が配信する広告について、作為、不作為を問わず、その掲載を回避する措置を講じる行為又は完全な形で表示されないようにする行為
ツイート関連でも進展あったけど途中までしかできてないし長くなるのでまた明日.
参考
CSSファイルやJavaScriptファイルを読み込むときの末尾にあるクエリー文字列は何のためにあるか: 小粋空間
@PAGESご利用ガイド - アップロードガイド
Web ブラウザが FTP クライアントに! net2ftp のインストール - WebOS Goodies
net2ftp : 設定ファイルの項目まとめ - WebOS Goodies
無料1Gホームページスペースサービス @PAGES(アットページズ)