主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

https://でcssが効かない

https://とhttp://が混在しているサイトでページを遷移していると、https://のときだけCSSが効いてないっていうことがあって、しかも、ページの共通cssは効いているのに、個別のcssは効いていないという。

絶対パスや、あとはWordPressとかのCMSでルートパスをタグ出力してると、前のページのプロトコルを引き継いでるhtmlと、引き継いでないcssとの間で(もしくは逆で)効かないパターンがあるのかな、と。。

いろいろ調べた結果、明確な答えにはたどりけなかったのですが、結局、httpを省略するということで解決できたので、やはり、強制的にhttps://を見せているけど、cssからすると、いやいや、僕、http://やし、的なことなのかなぁ。。

1.プロトコル表記を省略するメリット 省略すると、要素を記述したページのプロトコル(スキーム)が適用されます。 たとえば、あるページに「https://~」でアクセスしたとき、そのページにあるa要素のhref属性のプロトコルが省略されていれば、そのhref属性のURLのプロトコルは自動的に「https://」になります。 プロトコルを省略しておけば、SSLでアクセスされた場合に「非SSLコンテンツ(http://)」が混在しないのでセキュリティ警告メッセージが表示されない、といったメリットがあるようです。

引用元:"HTMLやCSSでのプロトコル表記(http:、https:)の省略について: 小粋空間

ムズムズ。

その他参考:httpとhttpsでのcssへのリンク指定について