urlの最後の「/」

Question

あるurlの最後に「/」を入れると、表示はされますが（404にはなりません）
cssが崩れます。

何が起きているのでしょうか？

http:www.sample.com　　OK
http:www.sample.com/　　OK（http:www.sample.comにリダイレクト）
http:www.sample.com/about　　OK
http:www.sample.com/about/　　NG

.htaccessは

RewriteEngine on
RewriteCond %{HTTP_HOST} ^(www.sasakky-dental.com)(:80)? [NC]
RewriteRule ^(.) http://sasakky-dental.com/$1 [R=301,L]
RewriteCond %{HTTPS} off
RewriteRule ^(.)$ https://sasakky-dental.com/$1 [R=301,L]
RewriteCond %{THE_REQUEST} ^./index.html
RewriteRule ^(.)index.html$ http://sasakky-dental.com/$1 [R=301,L]
ErrorDocument 404 /notfound.html
AddHandler php5.6-script .html .htm

下の階層のWordPressのディレクトリの.htaccessは

BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /news/
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /news/index.php [L]
</IfModule>
END WordPress

よろしくお願いいたします。

Comments

[CHERRY]

CSSがくずれるURL の時に　Webブラウザのデベロッパーツールのコンソールに何かエラーは出ていませんか？

[DaisukeFukaya]

bootstrap.js:1 Uncaught SyntaxError: Unexpected token < swiper.min.js:1 Uncaught SyntaxError: Unexpected token < twaer:461 Uncaught ReferenceError: Swiper is not defined at twaer:461 retina.min.js:1 Uncaught SyntaxError: Unexpected token <　が出ました！

Answer 1

結論

相対パスでCSSを読み込んでいるため、起きている

・誤り
記述：href="css/xxxx.css"

→つまるところ、これを絶対パスへ修正すれば直ります。

・正解
記述：href="/css/xxxx.css"

ブラウザのログを見ましょう

www.exsample.com/about

retina.min.js:10 HEAD https://www.exsample.com/img/[e-mail] 404
retina.min.js:10 HEAD https://www.exsample.com/img/[e-mail] 404
retina.min.js:10 HEAD https://www.exsample.com/img/[e-mail] 404
retina.min.js:10 HEAD https://www.exsample.com/img/[e-mail] 404
retina.min.js:10 HEAD https://www.exsample.com/img/[e-mail] 404
retina.min.js:10 HEAD https://www.exsample.com/img/[e-mail] 404
retina.min.js:10 HEAD https://www.exsample.com/img/[e-mail] 404
retina.min.js:10 HEAD https://www.exsample.com/img/[e-mail] 404
retina.min.js:10 HEAD https://www.exsample.com/img/[e-mail] 404
retina.min.js:10 HEAD https://www.exsample.com/img/[e-mail] 404
retina.min.js:10 HEAD https://www.exsample.com/img/[e-mail] 404
retina.min.js:10 HEAD https://www.exsample.com/img/[e-mail] 404
retina.min.js:10 HEAD https://www.exsample.com/img/[e-mail] 404
retina.min.js:10 HEAD https://www.exsample.com/img/[e-mail] 404
retina.min.js:10 HEAD https://www.exsample.com/img/[e-mail] 404
retina.min.js:10 HEAD https://www.exsample.com/img/[e-mail] 404
retina.min.js:10 HEAD https://www.exsample.com/img/[e-mail] 404

これだけ、エラーが出ています。
画像系ですが、一つずつエラーが出ないようにするのが大事です。
[F12]キーを押すとブラウザの状態を確認出来ます。

www.exsample.com/about/

www.exsample.com/:12 Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://www.exsample.com/about/css/aaaaaaa.css".
www.exsample.com/:9 Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://www.exsample.com/about/css/bootstrap.css".
www.exsample.com/:11 Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://www.exsample.com/about/css/swiper.css".
(index):13 Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://www.exsample.com/about/css/luxbar.css".
bootstrap.js:1 Uncaught SyntaxError: Unexpected token <
swiper.min.js:1 Uncaught SyntaxError: Unexpected token <
(index):461 Uncaught ReferenceError: Swiper is not defined
    at (index):461
(anonymous) @ (index):461
retina.min.js:1 Uncaught SyntaxError: Unexpected token <

※おそらく、これ本番環境なのでしょう。。。マスクを掛ける場合、.htaccessの内容にも気をつけてください。

Comments

[tama_yn0815]

ちなみに、WordPressの仕様なのか、
Rewriteの仕様なのか、結果が、CSS無かったよ！
じゃなくて、about/index.htmlの内容が返されてます。

Rewriteを見直したほうが良いかも？です。
これは、お客さまからの要望・要件ありますから、要確認ですね。
本来、存在しないファイルは、Not Foundで返すのが正解だと思います。

[DaisukeFukaya]

rewriteですね。確認してみます！
ありがとうございます。

Answer 2

皆様のおかげで解決方法が分かりました！

初心者相手なのにご丁寧にありがとうございます。

Answer 3

httpから始まるURLで指定しましょう。

<link href="css/bootstrap.css" rel="stylesheet" type="text/css">

Comments

[DaisukeFukaya]

絶対パスですね！ありがとうございます。