ホームページの更新をすぐ反映させる方法 「?ver=1.0.1」

Question

ホームページの更新をすぐ反映させる方法として下記を見つけたのですが

<link href="style.css" rel="stylesheet" type="text/css"> ↓ <link href="style.css?ver=1.0.1" rel="stylesheet" type="text/css">

これをindexに設定後サーバーにアップし更新がすぐ反映させられたのですが、CSSのファイル形式で「？」が使えません。

dreamweaverで作業をしているのですが、デザインで確認すると「html内のCSSファイル名」と「cssのファイル名」が異なるため

CSSが反映されずデザインが変わってしまいます。

これを防ぐにはどのような方法があるのでしょうか。

初歩的な質問で申し訳ありませんが、どなたかご教示ください。

更新をすぐ反映させる方法は上記以外の方法でも構いません。

※style.cssの後に「v2」を付けて試してみましたが、リロードしないと反映されませんでした。
ブラウザはchromeを使用しています。
ちなみに、IEとFirefoxはすぐに反映されました。

よろしくお願いします。

Comments

[m.ts10806]

「使えない」という部分をもっと具体的に記載いただけますか？

[sa_ga]

言葉足らずですみません。
ファイル名を変更しようとすると「ファイル名には次の文字は使えません /　<　>　?　;　:　"　\　*　|」と表示されファイル名が変更出来ません。

[m.ts10806]

質問本文を更新してください。
というか、ファイル名の変更は必要ないです。html内での記述の話であり、利用して「リンクURLにクエリストリングをつける」だけです。

[dit.]

サーバーにアップしたファイルを確認したときに常に最新のスタイルシートが読み込まれるようにしたい→?ver=1.0.1を付けた
けど
Dreamweaverでの作業では?ver=1.0.1を付けるとリアルタイムプレビューでスタイルシートが読み込まれず作業がしづらい
という状況でしょうか。
2年ほど前のものですが同様の問題がAdobe Support Communityに投稿されていました。解決はしてないようですがAdobe側の対応もされてなさそうな感じなので、どちらかをあきらめるしかないかもしれません。
https://community.adobe.com/t5/Dreamweaver/%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E6%96%B9%E6%B3%95%E3%81%AB%E3%82%88%E3%82%8B%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%81%A7%E3%81%AE%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AE%E5%B4%A9%E3%82%8C/td-p/9443664

[sa_ga]

ありがとうございます！まさにこのことを伝えたかったのですが、言葉たらずで・・・。

[sa_ga]

教えて頂いた投稿の方法で改善されました。ありがとうございました。

https://community.adobe.com/t5/Dreamweaver/%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E6%96%B9%E6%B3%95%E3%81%AB%E3%82%88%E3%82%8B%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%81%A7%E3%81%AE%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AE%E5%B4%A9%E3%82%8C/m-p/10635378#M54911

[dit.]

ご自身で回答を書き、「自己解決」として質問を解決済みにしてください。

Answer 1

<link href="style.css?ver=1.0.1" rel="stylesheet" type="text/css">

?ver=1.0.1はファイル名ではありません。
style.cssをファイル名にして、?ver=1.0.1はlink要素でご指定ください。

リロードしなくても反映させたいならajax等をお考えください。
参考

Comments

[kyoya0819]

> これをindexに設定後サーバーにアップし更新がすぐ反映させられたのですが、CSSのファイル形式で「？」が使えません。
に対する回答です、

[sa_ga]

ご回答ありがとうございます。
すみませんlink要素は理解しているのですが、下記のような現象が理解出来ていないのです。

<link href="style.css?ver=1.0.1" rel="stylesheet" type="text/css">に設定しましたが、
外部CSSの読み込みをしている場合、「style.css?ver=1.0.1」この部分が外部CSSの「style.css」と異なるとdreamweaverでのデザインでstyle.css反映されず、style.cssが無い状態での表示となり作業上困っています。

よろしくお願いします。

[kyoya0819]

スーパーリロードしてもダメでしょうか？
CSS編集時はスーパーリロードかインラインで記述することをお勧めします。

PHPを使える環境なら
<style>
<?php include(dirname(__FILE__) . "/CSSの相対パス"); ?>
</style>
でも大丈夫です。

[sa_ga]

PHPは全く経験が無いのでハードルが高くて無理そうです。
ご教示ありがとうございました。

[kyoya0819]

コピペでいいんですが...
心配なようならシーパーリロードかインラインで。

[sa_ga]

ありがとうございました。

Answer 2

style-20190927.cssのように、ファイル名ごと変更してしまってはいかがでしょうか。

Comments

[sa_ga]

ご回答ありがとうございます。
style.cssを「style.v2.css」を付けて試しにデータをupしてみましたが、リロードしないと反映されませんでした。上記の方法ではリロードしなくても反映されるのでしょうか。
よろしくお願いします。

[maisumakun]

「ホームページの更新をすぐ反映させる方法」といってもリロードはもとから必要です。今までの対処法も全て、「リロードしても変わらない」という状況への対策法です。

[sa_ga]

わかりました。ありがとうございました。

Answer 3

Adobe Support Communityより

● cssを適用したいファイルと同じ階層に「_notes」のフォルダを作成。

● その中に適用したいhtmlのファイル名をつけた「.mno」ファイルを作成。

例）適用したいファイルが「index.html」の場合は「index.html.mno」

● 「index.html.mno」のソースは、

<?xml version="1.0" encoding="utf-8" ?> <info>

<infoitem key="MM_css_include" value="style.css" />

　<infoitem key="MM_css_exclude" value="" />

</info>

※index.htmlとstyle.cssが同じ階層にある場合の記述例です。