再・ホームページ作成

Question

分からなかったので、もう一度質問させてください。

ＣＳＳフォルダーとA.htmlがあった場合、１つ下のフォルダーにA.htmlのファイルを移動した時に、ＣＳＳフォルダーを反映させるための方法を教えてください。
ルートパスという回答をもらったのですが、ＣＳＳの場合のやり方が分かりません。
何をどう変更すれば良いのでしょうか？
よろしくお願いします。

kon77 · Accepted Answer

あと考えられる原因としては、サブディレクトリ型のサーバーやホームページスペースでやってらっしゃる事ぐらいでしょうか。

例えば、「example.com」というサブディレクトリ型のホームページスペースで借りた場合、「bbb」というID名やディレクトリ名で登録すると、「example.com/bbb/」が自分のホームページスペースになりますので、この場合は「"/bbb/css/skel.css"」の様な感じで書かないといけません。これがルートパスです。

あと、サーバーを引っ越す予定が無いなら、「http://example.com/css/skel.css」の様な感じで書くか、「//example.com/css/skel.css」の様な感じで書くと確実かと思います。ただ、ローカルでの検証が出来なくなります。

kon77 · Answer

確認させて頂きたいのですが、何か変わったソフトやサービスやサーバーを利用していたり、あるいは、CMSやブログソフトウェアを利用していたりしますか？

ごく一般的なサーバーをレンタルして、普通に、ご自身で書かれたHTMLやCSS等を置いているだけですか？

何か変わったものを利用していませんか？

ご自身のサイトのURL等は書かなくてもよいですが、どういう環境でやっておられるのかを書くと、的確な回答が付くかも知れません。

ORUKA1951 · Answer

>あちこち / を付けてみたんですが変化なしです・・
このこと　　　　　　　　　　　　　　　　　　　↓/>
<link rel="stylesheet" href="css/skel.css" />
　それは、XHTML,XMLの仕様ですよ。(いまどきXHTMLはないでしょう。)※(注)

先の回答No.4をまったく読んで理解している形跡がないのですが・・
「さて、スタイルシートへのリンクですが、画像などとまったく同じで、相対パスか絶対パスを選択します。」
　と書いています。それが理解できていないと、画像もjavascriptもリンクできないですよ。
　ファイル相互間のパスはウェブ製作の基本中の基本です。
1) "./" は同じディレクトリ
2) "css"は同じ階層にあるcss
3) ../はひとつ上の階層
4) ../../は二つ上の階層
5) / はルート。そのサーバーのトップ
6) http：//hoge.com はHTTP手順によってhoge.comサーバーを指定している。

>ルートパスという回答をもらったのですが、ＣＳＳの場合のやり方が分かりません。
　CSSだろうが、画像だろうがスクリプトだろうがすべて同じです。「CSSの場合」が特殊なわけではありません。

N0.4の回答を印刷して、何度も読んで試しながら徹底的に理解してください。

※(注)　いまさらXHTMLとは・・
HTML5が持つ本当の意味 － ＠IT( http://www.atmarkit.co.jp/news/200801/25/html.html )
『空タグにもスラッシュを付けるだとか、名前空間を使うといったことも含みます――、そうした試みは、まったくうまく行きませんでした。』

yambejp · Answer

もうどうしてもわからないなら、A.htmlを移動した先に
cssフォルダごと一緒にコピーしてください

ORUKA1951 · Answer

まず、製作者の立場になると「ホームページ」では伝わらなくなります。ホームページとはご存知のようにブラウザを起動した時に最初に表示させるページ--すなわちホーム(基点,故郷,出発点---"GO! home"とか野球のホームベース)となるページ、派出してウェブサイトのトップページをいう。ホームページ - Wikipedia( https://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8 ) 　この場合はウェブサイト,ウェブページですね。　ウェブサイトを作成するときに、そのサイト内のウェブページでスタイルシートを使用して「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」をすることで、すべてのページのデザインスタイルシートを書き換えるだけで一挙に変更できるようになります。　この仕組みはとても重要です。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 14.3 外部スタイルシート　著者は、スタイルシートをHTML文書から切り離すことができる。こうすることには、幾つかの利点がある。・著者及びWebサイト管理者が、複数文書間(及び複数サイト間)でスタイルシートを共有できる。・著者が、文書に変更を加えることなくスタイルシートを変えられる。・ユーザエージェントが、メディア記述子に基づき、スタイルシートを選択的に読み込める。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.3 )］より私のウェブサイトのディレクトリ構成を簡単に書くと /　　　ルート |-- index.html　　トップページ（サイトのホーム）★3 |-- css/ |　　|-- standard.css　　　基本スタイル |　　|-- sreen.css　　　　スクリーンメディア用スタイルシート |　　|-- print.css　　　　　印刷用スタイルシート |　　|-- handheld.css　　　携帯(ガラケー)用 |　　　など |-- images/　　　　サイト全体で使用する画像 |　　|-- Logo |　　|　　　|-- logo.gif |　　|-- background/ |　　　　　|-- sky.png |-- prodacts/　　　　製品ディレクトリ |　　|-- index.html　　製品のトップ　　　　　　　　　★2 |　　|-- prodacts1/　　個別カテゴリー |　　|　　　|-- index.html　個別カテゴリーのトップ　★1 |　　|-- images/　　　このカテゴリーで使用する画像 |　　|-- css/ |　　　　　|-- products.css　/producs内で共通して使用するスタイルとか・・・で成立しています。さて、スタイルシートへのリンクですが、画像などとまったく同じで、相対パスか絶対パスを選択します。　上記の例で言うと、すべてのページで使用されるロゴなどは、

　とされていれば、この部分を書き直さなくてもすべてのページで共通して使えますね。　ただし、この方法をテストする事はローカルでは基本できません。　￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣　Windowsの場合、/(ルート)を指定するとそのドライブの先頭になってしまう。そりゃトップの /index.html★3 をドライブ直下に置けばできなくもないが、複数のサイトを作る事はできない。Windws以外ではエイリアス(別名)を指定するなりできるけど。　Windowsの場合は、別途apacheなどウェブサーバーをインストールしてそれ経由でテストする事になる。たとえば、http://local.host/index.htmlとか・・・　★将来的にはローカルサーバーを導入することになるでしょう。　となると、初心者にとって実用的な方法は、 /prodacts/prodacts1/index.html (★1)においては、

/prodacts/index.html (★2)においては、

/index.html (★3)においては、

スタイルシートもまったく同じで、 /prodacts/prodacts1/index.html (★1)においては、 /prodacts/index.html (★2)においては、 /index.html (★3)においては、となります。./css は、css/ でもよい。ここから間違えやすいのですが、スタイルシート内で画像を指定している場合たとえば、/css/screen.css にて body{background-image:url("../images/background/sky.png");} h1:before{content:url("../images/Logo/logo");} の場合は、そのCSSからのパスになります。当然 prodacts/css/products.css　からだと body{background-image:url("../../images/background/sky.png");} h1:before{content:url("../../images/Logo/logo");} 　文章で説明すると、こんなに長くなりますが、コンピューターってとってもお馬鹿で几帳面ですから、常にそのファイルからのパスになると考えればよいですよ。一見複雑そうに見えるが、実はとっても単純 ★ローカルサーバーだと、こんなややこしい事考えなくて、ファイルがどこにあろうが---カレントがどこであろうが---、どこに移動しようが/(ルート)からのパスにできるので楽です。　開発されているなら、ツールが豊富なfirefoxをお使いだと思いますが、その「Web 開発アドオン( https://addons.mozilla.org/ja/firefox/extensions/web-development/ )」に、Server Switcher( https://addons.mozilla.org/ja/firefox/addon/server-switcher/?src=ss )があります。ファイルマネージャ(エクスプローラ)からローカルファイルを見ている状態 fille:///D:\home\ から http://local.host そしてリモートの http://hoge.com にボタン一つで切り替えられます。

kon77 · Answer

上記の、「"css/skel.css"」の部分に、「/」を足して、「"/css/skel.css"」の様にすると良いかと思います。ちなみに、サーバーにアップロードしないと正しく表示されません。ローカルのパソコン上では、サーバーを動作させて、パスを通さない限り、正しく表示されません。

yambejp · Answer

再・ホームページ作成

あと考えられる原因としては、サブディレクトリ型のサーバーやホームページスペースでやってらっしゃる事ぐらいでしょうか。

確認させて頂きたいのですが、何か変わったソフトやサービスやサーバーを利用していたり、あるいは、CMSやブログソフトウェアを利用していたりしますか？

>あちこち / を付けてみたんですが変化なしです・・

もうどうしてもわからないなら、A.htmlを移動した先に

まず、製作者の立場になると「ホームページ」では伝わらなくなります。

<noscript>

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

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング