- ベストアンサー
外部CSSがうまく表示されません
下記ファイル(index.html・sld01.html・sld02.html） について相互にリンクし、外部CSSで制御したいのですが、うまくできません。 1.index.html→sld01.html（CSS反映せずdefault表示）さらにsld02.htmlへはリンク切れとなる。 2.sld01.html→sld02.htmlの場合、sld01.htmlでの文字色が a:visitedになりsld02.htmlジャンプでCSS反映せずdefault表示となりindex.htmlへはリンク切れとなります。 どなたかご教授いただけませんでしょうか？ index.html <html> <head>省略 <link href="/styles-site.css/navi.css" rel="stylesheet" type="text/css"> <link href="/styles-site.css/waku.css" rel="stylesheet" type="text/css"> </head> <body> <table>省略 <div> <a href="index.html">top</a> </div> <div> <a href="../sldset/sld01.html">gallery</a> </div> </table> </body> </html> sld01.html・sld02.html(slid.01へ) <html> <head>省略 <title>gallery</title> <link href="/css/base.css" rel="stylesheet" type="text/css"> </head> <body> <TABLE> <TBODY> <TABLE> <TBODY> 省略（java) <font size="-1"> <a href="/contents/sldset/sld02.html">slid.02へ</a></font> </TBODY> </TABLE> <font size="-1"> <a href="/contents/index/index.html">元のページに戻る</a></font> </TBODY> </TABLE> </body> </html> base.css(一部省略） a:link { color: #FFCC33; text-decoration: none; } a:visited { color: #CCCCCC; text-decoration: none; } a:hover { color: #66CCFF; text-decoration: none; } a:active { color: #FF3366; text-decoration: none; }
- baltes
- お礼率65% (104/159)
- その他（プログラミング・開発）
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
掲載された例文コードから、質問者殿のディレクトリ階層構造は以下になると思います。 （間違いないですよね） [contents] ├ [index] │ ├ index.html │ └ [styles-site.css] │ ├ navi.css │ └ waku.css └ [sldset] ├ sld01.html ├ sld02.html └ [css] └ base.css ■ 「index.html」から見た、「navi.css, waku.css」への相対パス ./styles-site.css/navi.css ./styles-site.css/waku.css ■ 「index.html」から見た、「sld01.html, sld02.html」への相対パス ../sldset/sld01.html ../sldset/sld02.html ■ 「sld01.html, sld02.html」から見た、「base.css」への相対パス ./css/base.css ■ 「sld01.html, sld02.html」から見た、「index.html」への相対パス ../index/index.html ■ 「sld01.html, sld02.html」を相互に見た相対パス ./sld01.html ./sld02.html これで解決しますか？ ---- ./ → カレント・ディレクトリを表す ../ → 階層が一つ上のディレクトリを表す
その他の回答 (2)
- the845t
- ベストアンサー率33% (246/743)
>文字色に付いては、リンクしか存在しないからでは？ というのは、どういう意味でしょうか？ リンクしかないからそのリンクの色で表示されているのではないかと思ったのです。
お礼
the845tさん 再度ありがとうございました。 解決いたしました。またよろしくお願い致します。
- the845t
- ベストアンサー率33% (246/743)
フォルダ構造とリンクが間違えているだけでは？ ┬hoge/index.html │ ├styles-site.css/navi.css │ ├styles-site.css/waku.css ┼sldset/sld01.html │ ├css/base.css │ ├contents/sldset/sld02.html │ ├contents/index/index.html って階層であるとしてリンクしてますよ。 リンク切れに付いては、単に相対パスの指定を間違えているだけかと。 文字色に付いては、リンクしか存在しないからでは？
補足
the845tさん ありがとうございました。 ご指摘のとおりパスの指定誤りでした。 しかし、文字色がどうしてもうまく出ません。 >文字色に付いては、リンクしか存在しないからでは？ というのは、どういう意味でしょうか？ よろしくお願い致します。
お礼
Bo_Boさん 解決しました。 ご丁寧にありがとうございました。 またよろしくお願い致します。