Q&A
＞＞＞
絶対パスで
src: url('/web-font/MonoSocialIconsFont-1.10.eot');
と書けば通りませんか？
そんな方法がありましたね。これならhtdocsをルートとして/出始めれば絶対パスで指定ができるのですね。
ただローカルで定期的にgulpwatchを使って確認しているときはこれだと通らないのですよね？
htmlファイルをルートディレクトリにすべて配置する方法と、index.htmlのみルートに置き、その他をhtmlフォルダの中に置く方法がありますが、どちらが主流ですか？
管理は後者のほうがしやすいですが、WEBフォントのフルパスやjsのフルパスまですべて変更しないと行けずに結構大変ですよね。
下記はおそらくパスだけ変えて同じことを二度記載しないといけなくなりますよね。
@font-face { font-family: 'Mono Social Icons Font'; src: url('../web-font/MonoSocialIconsFont-1.10.eot'); src: url('../web-font/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'), url('../web-font/MonoSocialIconsFont-1.10.woff') format('woff'), url('../web-font/MonoSocialIconsFont-1.10.ttf') format('truetype'), url('../web-font/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');/*unuse*/ src: url('../web-font/MonoSocialIconsFont-1.10.ttf') format('truetype'); font-weight: normal; font-style: normal; }
回答3件
0
主流かどうかわかりませんが、私が最近作成しているサイトは次のようにしています。
- ユーザーがアクセスしやすい、覚えやすい、を意識してクリーンURLを採用しています。
- ユーザーから見えるところ、つまり、HTMLへアクセスするURLについては、そのページの内容に則した物にします。例えば、全体のヘルプなら
http://example.jp/help、何かをダウンロードをするページならhttp://example.jp/download等でアクセスできるようにします。 - CSSやJavaScript内で使うURLを含め、全てのリンクはルート相対パスで記載します。
作成は、静的サイトジェネレーターを使い、ローカルでの確認は静的サイトジェネレーターの開発用サーバー機能を使いますので、別に問題が起きたことはありません。ただ、この構成は静的サイトジェネレーターを使わないと管理やテストが難しいため、webpageさんには全く参考にならないと思います。
投稿2016/12/07 10:55
編集2016/12/07 12:32
総合スコア21735
0
いわゆるルート相対パス、つまりWebサーバー上に配置された時、公開されているディレクトリからのパスを指定すれば悩みません。
その方法は既に回答されています。
src: url('/web-font/MonoSocialIconsFont-1.10.eot');
ただし、自分のパソコン上でせこせこ作って、そのhtmlファイルをダブルクリックして表示してテストしても確認できません。
これが混乱を招いているかもしれませんが、最終的にはWebサーバー上にアップするものなので、Webサーバー上からアクセスして確認すべきでしょう。
なお、単純なHTMLページを作る時、htmlフォルダなんてのは作ったことがありません。
アクセスされた際に、どういうURLになってほしいかを考えてフォルダを切ります。
投稿2016/12/07 07:06
総合スコア130
＞＞＞
ただし、自分のパソコン上でせこせこ作って、そのhtmlファイルをダブルクリックして表示してテストしても確認できません。
これが混乱を招いているかもしれませんが、最終的にはWebサーバー上にアップするものなので、Webサーバー上からアクセスして確認すべきでしょう。
毎度アップロードして確認するのはあまりに大変ではないですか？
最後にすべて置換するしかないですかね？
どういう環境や要件のもとに開発されているのかは分かりませんが、ローカルもしくは開発環境と呼ばれる環境下に、apacheなりxamppなりでwebサーバーを立てればいいと思いますが。
ブラウザシンクを使えばもしかして解決しますか？
ブラウザシンクでsrc="/img/index/sweet.jpg"としたところちゃんと表記されています。
htdocsの中にimgフォルダがあればサーバ上でも問題なく表記されるのですね。
ただ複数のポートフォリオを/htdocs/portfolio-2、/htdocs/portfolio-3と公表している場合はどうすればいいでしょうか？
src="/htdocs/portfolio-2/img/index/sweet.jpg"として、最後に一つのルートフォルダの中にアップロードする際に、すべて置換するしかないでしょうか？
ブラウザシンク上だと下記のように
/img/index/sweet.jpg"のままでよいので、これで作って最後だけ置換とするしかないでしょうか？
@font-face {
font-family: 'Mono Social Icons Font';
src: url('/web-font/MonoSocialIconsFont-1.10.eot');
src: url('/web-font/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
url('/web-font/MonoSocialIconsFont-1.10.woff') format('woff'),
url('/web-font/MonoSocialIconsFont-1.10.ttf') format('truetype'),
url('/web-font/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');/*unuse*/
src: url('/web-font/MonoSocialIconsFont-1.10.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
上記のようにしてブラウザシンクで見たところローカル環境でも確かに問題ありませんでした。
ローカルだとindex.htmlがあるディレクトリをルートと考えればいいようですね。
ただこれは本番ではおそらくないと思いますが、ポートフォリオを複数一つのレンサバのドメインで管理していると、数分のディレクトリをルート直下に作ってその中にindex.htmlという形にどうしてもなりませんか？
するとportfolio-1、-2、-3というディレクトを入れないとルート絶対パスになりませんよね。
しかしそうすると今度はローカルのパスが通らなくなりませんか？
このような場合はどのように対処しますか？
ドメインをポートフォリオ分借りるしかないでしょうか？
src: url('../web-font/MonoSocialIconsFont-1.10.eot');とするとあたります。
つまり、上記のcssをカレントとした相対パスであれば、ローカルで当たり、
サーバ上でもcss/app.cssとなるのでmessage.htmlでも問題なく当たるのでしょうか？
cssにきぎゅつしてある相対パスはhtmlファイルからの相対パスではなくcssファイルからの相対パスなのでページが変わってもあたると考えてよいのですね。
その点imgなどはhtmlからの相対パスになってしまうので、html/message.htmlなどサブページになるとルートにあるindexとは違うフォルダにあるので相対パスで当たらなくなったということでしょうか？
0
ベストアンサー
WEBフォントや CSS は /html ではなく別のディレクトリ（/font とか /css とか）に分けておけばよいのでは？
というのはともかく、全てを1ディレクトリ内に置いた場合、I/O 性能劣化が発生する可能性があります（使われている OS、ファイルシステムによって違ってきますが）。また、実質上はあまり気にする必要はありませんが、1ディレクトリ内におけるファイル数の制限もあります。
数ファイルしかないならば構わないでしょうが、100を超えてくるあたりで管理が面倒になると思います。
※個人的には ls したときにスクロールしてしまうほどの数はいっしょくたにはしたくないですね
投稿2016/12/07 05:14
総合スコア13703
そのようにしています。
そうすると下記のような相対パスの場合おそらく開いているそのhtmlファイルをカレントディレクトリとしての相対パスになるのですよね。
よって、ルートのindex.htmlには
@font-face {
font-family: 'Mono Social Icons Font';
src: url('./web-font/MonoSocialIconsFont-1.10.eot');
}
よって、ルートのihtmフォルダ内のhtmllには下記と二つ必要になってしまいませんか？
@font-face {
font-family: 'Mono Social Icons Font';
src: url('../web-font/MonoSocialIconsFont-1.10.eot');
}
絶対パスで
src: url('/web-font/MonoSocialIconsFont-1.10.eot');
と書けば通りませんか？
＞＞＞
絶対パスで
src: url('/web-font/MonoSocialIconsFont-1.10.eot');
と書けば通りませんか？
そんな方法がありましたね。これならhtdocsをルートとして/出始めれば絶対パスで指定ができるのですね。
ただローカルで定期的にgulpwatchを使って確認しているときはこれだと通らないのですよね？
簡単な方法としては、ローカルに「も」Web サーバーを立ててしまうことです。
適切に設定してあれば、file://～ ではなく http://localhost/~ という形で表示できますから。
ブラウザシンクを使えばもしかして解決しますか？
ブラウザシンクでsrc="/img/index/sweet.jpg"としたところちゃんと表記されています。
htdocsの中にimgフォルダがあればサーバ上でも問題なく表記されるのですね。
ただ複数のポートフォリオを/htdocs/portfolio-2、/htdocs/portfolio-3と公表している場合はどうすればいいでしょうか？
src="/htdocs/portfolio-2/img/index/sweet.jpg"として、最後に一つのルートフォルダの中にアップロードする際に、すべて置換するしかないでしょうか？
ブラウザシンク上だと下記のように
/img/index/sweet.jpg"のままでよいので、これで作って最後だけ置換とするしかないでしょうか？
@font-face {
font-family: 'Mono Social Icons Font';
src: url('/web-font/MonoSocialIconsFont-1.10.eot');
src: url('/web-font/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
url('/web-font/MonoSocialIconsFont-1.10.woff') format('woff'),
url('/web-font/MonoSocialIconsFont-1.10.ttf') format('truetype'),
url('/web-font/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');/*unuse*/
src: url('/web-font/MonoSocialIconsFont-1.10.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
上記のようにしてブラウザシンクで見たところローカル環境でも確かに問題ありませんでした。
ローカルだとindex.htmlがあるディレクトリをルートと考えればいいようですね。
ただこれは本番ではおそらくないと思いますが、ポートフォリオを複数一つのレンサバのドメインで管理していると、数分のディレクトリをルート直下に作ってその中にindex.htmlという形にどうしてもなりませんか？
するとportfolio-1、-2、-3というディレクトを入れないとルート絶対パスになりませんよね。
しかしそうすると今度はローカルのパスが通らなくなりませんか？
このような場合はどのように対処しますか？
ドメインをポートフォリオ分借りるしかないでしょうか？
通らなくなるとすれば、それはローカル側とリモート側でルートディレクトリ以下の構成が異なっているからですよね。
つまりローカル側を
\(root)
+portfolio-1
| +index.html
| +...
+portfolio-2
| +index.html
|...
という形にしておけば済む話では。
サーバ側のルートはhtdocsですが、ローカル側は、index.htmlがあるディレクトリがルートになるのではないですか？
どうやって指定するのですか？
もちろん言っていることは初めからわかっているのですが、ローカルはどのようにルートを変更できるのですか？
ブラウザシンクのURLにportfolioというディレクトリ名を自分で毎回記載すればよいということですか？
src: url('../web-font/MonoSocialIconsFont-1.10.eot');とするとあたります。
つまり、上記のcssをカレントとした相対パスであれば、ローカルで当たり、
サーバ上でもcss/app.cssとなるのでmessage.htmlでも問題なく当たるのでしょうか？
cssにきぎゅつしてある相対パスはhtmlファイルからの相対パスではなくcssファイルからの相対パスなのでページが変わってもあたると考えてよいのですね。
その点imgなどはhtmlからの相対パスになってしまうので、html/message.htmlなどサブページになるとルートにあるindexとは違うフォルダにあるので相対パスで当たらなくなったということでしょうか？
ローカル側でどこをルートとするか、といえば、先ほどので \ で表現された場所です。
サーバー側は htdocs/portfolio-1/ ... という形になっているのですよね？
だけどサーバー側はおそらく VirtualHost と DocumentRoot を使って、それぞれを別々のサイトとして扱おうとしているわけですよね。
ローカル側も同様に「ローカルのWebサーバー」を立てて、その上で同じように VirtualHost と DocumentRoot を設定しておきましょう、という話なのですが。
他の方も書かれていますが、ローカルにあるのを確認するのに file://～ の形ではなく、http://～ の形でアクセスできるようにしておくべきなのです。
※file://～ の形だと JavaScript などがセキュリティの関係で動かない場合もあります
http://www.htmq.com/csskihon/012.shtml
を見るとcssの相対パスはapp.css内の相対パスであればapp.cssをカレントディレクトリとしての相対パスになるようですね。
htmlかと勘違いしていましたが、それならローカルもサーバも相対パスにすればcssはapp.cssしか存在しないので当たりますね。
ただhtmlはindex.htmlをカレントディレクトリとしての相対パスになるとは限らず、html/message.htmlの中のurlであればばルートディレクトリからの相対パスにはならずにhtmlフォルダをカレントディレクトリとしての相対パスになるので、index.htmlと同じ相対パスにしてはいけないということですね。
つまりindex.htmlがwebfont/aaa.odfならmessage.htmlは../webfont/aaa.odfとなるということですね。
../をつけるだけでローカルもサーバ上でも当たりますね。
サーバー側は htdocs/portfolio-1/ ... という形になっているのですよね？
だけどサーバー側はおそらく VirtualHost と DocumentRoot を使って、それぞれを別々のサイトとして扱おうとしているわけですよね。
そのようなURLになっています。
htdocs/portfolio-1/
htdocs/portfolio-２/
htdocs/portfolio-３/
という具合にポートフォリオ分新しいフォルダーを作っているので
index.htmlがルートに存在しないということです。
そのような場合WEBサーバは1,2,3が別サイトで、ルートはhtdocsでないと自動的に判別してくれるのですか？
index.htmlがルートにないのでそのようなことを認識するのでしょうか？
相対パス（URI）の指定方法
htmlファイルが置かれている場所（リンク元のページ、または画像を表示させるページ）を基準にして、対象となるファイルの場所を相対的に指定します。
※ スタイルシート（CSS）で背景画像を指定する場合
① CSSをhtmlファイル内に記述している時は、htmlファイルが置かれている場所を基準に指定します。
② CSSを外部ファイルに纏めて記述している時は、CSSファイルが置かれている場所を基準に指定します。
htmlファイルやCSSファイルと対象ファイル（リンク先ページや画像ファイル）との位置関係により、記述方法は次のようなパターンに分けられます
上記を見るとやはり、相対パスは、
message.html内に記述しているurlはmessage.htmlをカレントとする。
message.css内に記述しているurlはmessage.csslをカレントとする。
message.js内に記述しているurlはmessage.jsをカレントとする。
という認識でよろしいでしょうか。
最後にこれだけ確認させてください。
ルートディレクトリとは index.html があるディレクトリのことではないですよ。
端的にいえば / という URL が指し示すことになるディレクトリのことです。
index.html が特別視されるのは、サーバーの設定で「ファイルが指定されなかった場合に index.html が指定されたものとみなす」というように設定されることが多いからです。
Web サーバにとってサイトを示すのは（Apache を例に挙げれば） VirtualHost（あれば）と DocumentRoot です。
ルートディレクトリについては、
htdocsフォルダのことですよね。
相対パスについては
相対パスは、
message.html内に記述しているurlはmessage.htmlをカレントとする。
message.css内に記述しているurlはmessage.csslをカレントとする。
message.js内に記述しているurlはmessage.jsをカレントとする。
という認識でよろしいでしょうか。
ルートディレクトリは正確には「DocumentRoot として指定されているディレクトリ」であって、htdocs であるとは限りません。単に apache の標準状態だと htdocs になっているだけです。
VirtualHost の場合、個別に DocumentRoot を指定しますしね。
相対パスについてはその認識でよいです。(iframe などでも iframeの中の HTML にとっては、自身の居場所が相対パスの起点になるので）
ありがとうございました。
iframeもほかのサイトから一部抜粋しているわけですが、
それでも相対パスの概念は同じということですね。
apache の標準状態だと htdocs がルートですが、サーバ管理者が、どれをルートにするか設定ができるので、サーバ管理が設定した場合、その他のフォルダだったり、複数ルートがある場合もあり得るということですかね？
ただ私はサーバの設定は何もいじっていないので、その場合はやはりhtdocsのみがルートになると考えてよいでしょうか？
それともindex.HTMLが複数あると自動的にその数分ルートができるような仕様なのでしょうか？
ルートディレクトリの設定については、サーバ管理者による設定（apache であればたいていは httpd.conf の中の DocumentRoot の記述）によります。VirtualHost で複数サイトをまとめている場合は、VirtualHost の中に個々の DocuementRoot が記述されます。
で、index.html があるだけではそれはルートディレクトリでもなんでもありません。上にも書いたように index.html は「ファイル指定が省略された場合のデフォルト」（であることが多い）なので、
http://～/folder1/ などと書かれた場合、（DocumentRootから見て）/folder1/index.html が表示されるようになる、というだけです（なければ 404 File Not Found になるか、403 Forbidden になるか、はたまた autoindex でファイルリストが出るかは設定次第）
やはりサーバ側で設定しないとそのようにならないのですね。
私はlv9やさくらインターネットなどのレンサバを使っているのですが、
ふつうそこまでいじらせてくれなくないですか？
もしいじれるのなら、クライアントさんがお金がなく、同じドメインやサーバ上に複数のサイトを作って公開したいといわれたときに、これでクローラーに同じ第一ドメイン名だが、
別サイトであると認識させることが可能になるということでしょうか？
まれにそのようなクライアントさんいますよね。
直接 httpd.conf をいじれないにしても、サービスとしてマルチドメインを提供している（例：さくらインターネット）なら、内部的にはそれらの対応をしているのでしょう。
※逆に、不用意にいじらせたくないのでそういうインターフェースを用意しているわけですが
もう少し自由にしたいというなら Amazon AWS という選択肢もありますしね。
ありがとうございます。
初期設定でそのような設定があるのですね。
http://aaa/1
http://aaa/2
http://aaa/3
とあった場合、それぞれが別サイトとして勝手に認識してくれるということですかね？
どうやって別と把握しているのですか？
上のではマルチドメインになってませんよ。
それこそさくらインターネットでも懇切丁寧に解説してくれていますから、それを読み、さらに apache での VirtualHost の設定とか、いろいろ調べてみることをお勧めします。
※apache が受け付けた URL から対応する VirtualHost を導き出して、その DocumentRoot を処理するあたりとかは、一度やってみれば直感的にわかるかと思います
「マルチドメイン」とは・・・1つのサーバーで複数のドメインを管理できる事を指します。
つまりさくらならさくらのアカウントrootでと管理することを言っているのでしょうか？
http://aaa/1
http://bbb/2
http://ccc/1
アカウントをもう一つ作るとアカウント数でコストが上がるのでそのようにするということでしょうか？
今まで私が言っていた下記の例は
htdocs/portfolio-1/
htdocs/portfolio-２/
htdocs/portfolio-３/
つまり
http://sample/portfolio-1/
http://sample/portfolio-２/
http://sample/portfolio-３/
という形のことでした。
違います。マルチドメインとは、「一つの Web サーバーで、複数のドメインを管理する」ことです。
例えば Apache で
<VirtualHost www.aaa.com:80>
DocumentRoot /var/www/aaa
</VirtualHost>
<VirtualHost www.bbb.com:80>
DocumentRoot /var/www/bbb
</VirtualHost>
と書けば（他にもいろいろ書くことはありますが）、適切に DNS 設定されていれば、
http://www.aaa.com/ ならば /var/www/aaa/index.html が返され、
http://www.bbb.com/ ならば /var/www/bbb/index.html が返される、
という動作をするようになります。
さくらインターネットなどのレンタルサーバーでのマルチドメインもやってることは同じで、ただコントロールパネルのようなインターフェースを用意することで、直接設定ファイルをいじる必要がないようになっているだけです。
http://sample/portfolio-1/
http://sample/portfolio-２/
http://sample/portfolio-３/
が別サイトだとどうやって認識するtかと思ったのですが
http://aaa/1
http://bbb/2
http://ccc/1
は第一ドメインが違うのでクローラーが別サイトと思うのはある意味当たり前ですね。
クローラーは第一ドメインが同じかどうかで同じサイトか判断しているわけですから。
つまりこの状態で別サイトにしたいとクライアント様が言った場合は、
やはり無理なので、別ドメインをとってサイト数分年間費を払ってもらうしかないという認識で正しかったのですね。
http://aaa/1
http://aaa/2
http://aaa/3
アカウントを増やせばコストが上がりますが、逆にアカウント単位でディスクをクォート（容量制限）しているので、容量が十分に余裕がないならばアカウントを増やさざるを得ないでしょうね。
そのあたりはプランとやりたいこととの勘案で決まるものなので、これといった正解があるわけではありません。
ドメイン管理費用はどんなドメインを取得したとしてもかかりますから、そりゃ別ドメインをとって提供したいならその費用はかかりますよ。それでも別サーバーを用意する費用がかかるわけではないのが、マルチドメインというサービスです。
※サブドメイン（aaa.com というドメインの中で、www1.aaa.com と www2.aaa.com という形でわける）なら、また話は違ってきますが。
全体として、インターネットで Web にアクセスするということがどういう風にいろんなサービスが連携することによって成り立っているのか、という部分がきちんと理解できていないように感じます。そこをきちんと勉強しなおされた方がよろしいかと思います。
やはりマルチドメインでもドメイン数分のドメイン年間費がかかりますよね。
ただサーバ代は同じアカウントなら別途追加料金にならないというのがマルチドメインのメリットなのですね。
まれに、すでに一サイトあるので、ドメインの年間費を追加したくないという人が、
困ることがあったということです。
その場合は、マルチドメインでも、ドメインの年間費は2つ分になると伝えればいいのですね。
同じドメインなら一つ分ですが、クローラーは同じサイトだと思ってしまうことは避けられないという認識で正しかったのですね。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/12/07 11:28
退会済みユーザー
2016/12/07 11:32
2016/12/07 12:27
2016/12/07 12:35 編集