【復活求む!】惜しくも解散してしまったバンド|J-ROCK編 >>

趣味でホームページを作成している者です。。
cssファイルを階層の異なるHTMLファイルに反映できなくて
3日間くらい試行錯誤しながら困っています。
cssを反映したいHTMLファイルの
<head>部分には<link rel="stylesheet" type="text/css" href="mystyle.css" >と記載しております。

フォルダ構造は以下です。

homepageフォルダにmystyle.cssファイルがあります。
さらに同フォルダにmyfavoriteフォルダがあり
その中にさらにMFフォルダにAndrea_Pirlo.htmlファイルがあります。

このAndrea_Pirlo.htmlファイルに2階層上のcssファイルが
反映されません。

わかりにくい説明で申し訳ございませんが
どなたかご教授頂けたらと思います。

A 回答 (1件)

homepage/myfavorite/MF/Andrea_Pirlo.html に homepage/mystyle.css を適用したい、ということですね?



それでしたら、

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

とすればOKでしょう。
    • good
    • 0
この回答へのお礼

おおおおおおおおおおおおおおお!!!

つ、ついに表示できました。。
本当に有難うございます。
kaorineさん、お忙しい中有難うございます。。

お礼日時:2009/12/25 17:57

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qスタイルシート(CSSスタイル)が読み込めない。

Webデザイナー修行中の者です。

社内の人が作ったホームページ。背景や線の画像を各
ページで統一するため、ソースをコピー&ペーストして
新たなページを作ったのですが、作成の時点では線画像も
背景も表示されるのですが、ブラウザで見てみると背景も
線も出ません。
おそらくスタイルシートというもの(CSSスタイル)が
読み込めていないのだと思いますが、考えられる原因は
どんなものでしょう?
作成者に聞けばいいのでしょうが、いないので聞くことが
できません。
かといって、大幅にページを変更する時間もなく、私が
作るページだけを全く別の背景等にするのも、不自然な
ものになってしまいます。
業務にかかわるものですので、Webページやタグを公開
できないのですが、アドバイス、よろしくお願いいたし
ます。

作成はメモ帳、またはDreamweaver4を使用しています。

Aベストアンサー

No1です。
えと、あなたのPCにサイトの全データがあるわけではないのですね。
だったらそのPC上では確認できないかもしれませんね。
方法としては、言われるとおりアップして確認する方法。
もう1つはCSSファイルをDLし、サイトと同じ階層構成を作り上げることです。
<link rel="stylesheet" href="../catalog/stylesheet.css" type="text/css">
の場合は、保存してあるフォルダの1つ上に「catalog」というフォルダを作り、そこにDLした「stylesheet.css」を配置しブラウザで確認してください。
ちゃんとCSSが認識されるはずです。

Qアップロードすると、スタイルシートが反映されない

外部にcssファイルを作り、
文字のみスタイルシートで制御します。
DREAMWEAVER上でスタイルシートは反映されています。
F12を押しても、スタイルシートは反映されています。
しかし、フォルダからhtmlファイルを直接ひらいたり、
アップロードしたファイルをみると、
スタイルシートが反映されていません、
もちろん、cssファイルも一緒にアップロードしてます。
DREAMWEAVER4を使っています。

なんでだか、わかりません。。。
お手数かと思いますが、よろしくお願いします。

Aベストアンサー

こんばんわぁ、Blackwinglsです。

ちょっと心配になって動作確認してみました。

あれ、確かに思った通りの動作しませんねぇ・・・

でソースを良くみてみたらパスがチョットおかしいかも(^^;)

ソースの
<link rel="stylesheet" href="/textStyle.css" type="text/css">
の部分を
<link rel="stylesheet" href="./textStyle.css" type="text/css">
に変更して試してみてください。

恐らくhtmlファイルと同じ階層(フォルダ)にcssファイルをアップしてるんですよね。
最初の記述だとルートにcssファイルがあることになってしまうので・・・・・

ではでは~☆彡

Q階層の違うディレクトリでのCSSの呼び出し方

現在FC2さんにサーバーをお借りしてPCサイトをつくっているものです。
HIMEISM(http://neo-himeism.net/)さんに疑似フレームのテンプレートをお借りして、半分以上はうまくいっているのですが、中身が増えてきたので小説と漫画とイラストをそれぞれ、indexなどより一つ下の階層に分けようとしたのですが、そうすると<link rel="stylesheet" type="text/css" href="img/style.css">としているにも関わらずCSSスタイルシートが呼び出されません。
今は何のディレクトリにも入っていないindexやlink、offなどが一番上の階層にあり、一つ下にスタイルシートやアイコンなどに使う画像が入れられた最初から入っていたimgのディレクトリ、小説、漫画、イラストそれぞれのディレクトリがある状態です。
img以外全部、何のディレクトリにも入れなければ正常に反映されます。

階層を分けたまま、すべてにテンプレートが反映されるようにしたいのですが、どうすればいいでしょうか。

Aベストアンサー

index.html が、href="img/style.css" なのですから、1つ下の階層に保存したファイルからなら、href="../img/style.css" です。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

QCSSファイルを入れるフォルダは統一すべき?

こんにちは。

ホームページを作っているものです。

わたしのホームページはhtmlファイルがあるフォルダの中に必ず『CSSフォルダ』を作っています。そしてhtmlファイルは必ずその階層にあるCSSフォルダに入っているCSSファイルを参照しています。

それで本日ふと思いました。「この様なやり方で良いのか?例えばトップページがある階層に『CSSフォルダ』を作って、全てのhtmlファイルはその中に作るCSSファイルを参照した方が良いのでは?」。

ググったり、有名どころのサイトさんのソースを見たりしましたが、どちらが適切かは分かりませんでした。

どの様にすべきでしょうか、ご教示下さい。

よろしくお願い申し上げます。

Aベストアンサー

CSSの一番の利点は何ですか?

「スタイルシートを変えることでプレゼンテーションを一挙に変更できる」
「プレゼンテーションをHTMLと切り離すことで、HTMLも(CSSも)簡略になり、ネットワークの付加が低減できる」
 などですね。

 答えは、出たと思います。

 画像などと同じく、そのディレクトリ以下のすべてに利用されるものは、そのディレクトリに置くということです。

/ ルート
|-- index.html
|-- contactus.html
|-- CSS/  サイトすべてで利用されるCSS
|-- images/ サイトすべてで使用される画像
|-- dir1/  サブディレクトリ
|  |-- index.html
|  |-- CSS/  サブディレクトリ以下でのみ使用される画像
|  |-- images/ サブディレクトリ以下でのみ使用されるスタイルシート
|-- dir2
|  |-- index.html
|  |-- CSS/
|  |-- images/
|  |-- dir2-2/
|      |-- index.html
|      |-- CSS/
|      |-- images/
|-- dir3/

などですかね。

 唯スタイルシートは、ユーザビリティの関係でサイト全体で統一されることが多いのでサブディレクトリにあるものは極めて少ないです。

CSS/ の中身は
general.css   サイト全体で共通に使用される永続的スタイルシート
standardSape.css 配置やデザインを指定するスタイルシート
standardColor.css色のスタイルシート
top.css     各ディレクトリのトップページindex.htmlで使用するスタイルシート
content.css   一般的記事のスタイルシート
smartPhone.css  メディア別 スマホ用スタイルシート
ttyhandheld.css メディア別 携帯電話用、モバイル端末スタイルシート
print.css    メディア別 印刷用
・・・必要な場合aural(読み上げソフト用)やbraille(点字端末)用がある場合もあるでしょう。

そして、代替スタイルシート
revers.css  反転表示用
small.css  狭いディスプレイ用
などを用意していることもあります。プレゼンテーション用のものがあったり

ユーザーの選択、または端末の種類によってスタイルシートは選択され、それぞれのスタイルシートが適用された状態で利用できるようにしてあります。したがって、一箇所で管理するほうが楽です。スタイルシートの編集時にHTMLを開く必要はないので、HTMLの近くにおかれる必要もありませんし・・

例えばトップページがある階層に『CSSフォルダ』を作って、全てのhtmlファイルはその中に作るCSSファイルを参照した方が良いのでは?」

 基本--第一原則--はそうです。そうすることで、スタイルシートを変えるだけですべてのページのデザインを一挙に変えられますし、おなじ設定を何度も読み込ませる必要もなくなります。

CSSの一番の利点は何ですか?

「スタイルシートを変えることでプレゼンテーションを一挙に変更できる」
「プレゼンテーションをHTMLと切り離すことで、HTMLも(CSSも)簡略になり、ネットワークの付加が低減できる」
 などですね。

 答えは、出たと思います。

 画像などと同じく、そのディレクトリ以下のすべてに利用されるものは、そのディレクトリに置くということです。

/ ルート
|-- index.html
|-- contactus.html
|-- CSS/  サイトすべてで利用されるCSS
|-- images/ サイトすべてで使用される画像...続きを読む

QconfirmのOK・キャンセルを押した後の操作制御

いつもお世話になっています。

<script language="JavaScript">
<!--
function startConfirm(){
confirm("本当によろしいですか?");
}
// -->
</script>
</head>

(中略)

<form action="next.asp" target="_top" name="me">
<td>
<input TYPE="submit" value="全削除" name="all_del" onclick="startConfirm()">
</td>
</form>

と、このようなボタンを押したときに確認メッセージを表示させています。
キャンセルを押した場合にnext.aspに遷移せず、自分の画面に戻る
または他の画面に遷移させたいのです。

startConfirm()の中に処理を書けば良いのでしょうが、哀しいかな、わかりません(涙)。
やり方をご存知の方、教えてください。

alertでOKを押された時の処理を任意に行う方法も教えていただけたら嬉しいです。

いつもお世話になっています。

<script language="JavaScript">
<!--
function startConfirm(){
confirm("本当によろしいですか?");
}
// -->
</script>
</head>

(中略)

<form action="next.asp" target="_top" name="me">
<td>
<input TYPE="submit" value="全削除" name="all_del" onclick="startConfirm()">
</td>
</form>

と、このようなボタンを押したときに確認メッセージを表示させています。
キャンセルを押した場合にnext.aspに遷移せず、自分の画面に戻る
または他の画面に遷...続きを読む

Aベストアンサー

こんにちはさん、xruzです。
submitボタンにこだわらずscriptでsubmit()すれば柔軟に対応できますよ。
こんな感じではいけませんか?

<html>
<head>
<title>submit</title>
</head>
<script language="javascript">
<!--
function frmSubmit() {
var errFlag=true;
// チェックとか処理とかをします
if(errFlag==false) {
// alert("Err"); // エラー処理かな
return;
}
if(confirm("Send Ok?")) {
// document.frm.target="main"; // 表示先の変更
// document.frm.action="hoge.asp"; // リンク先の変更
document.frm.submit();
} else {
// this.location.href="jump.cgi"; // キャンセルした場合のリンク先?
}
}
//-->
</script>
<body>

<form method="post" action="" name="frm" target="_self">

<input type="button" value="send" onclick="frmSubmit();">
</form>

</body>
</html>

がんばってくださいね。

こんにちはさん、xruzです。
submitボタンにこだわらずscriptでsubmit()すれば柔軟に対応できますよ。
こんな感じではいけませんか?

<html>
<head>
<title>submit</title>
</head>
<script language="javascript">
<!--
function frmSubmit() {
var errFlag=true;
// チェックとか処理とかをします
if(errFlag==false) {
// alert("Err"); // エラー処理かな
return;
}
if(confirm("Send Ok?")) {
// document.frm.target="main"; // 表示先の変更
// document.frm.action="hoge....続きを読む

Qイラストレーターデータを、解像度350ののJpegデータにするには?

windows2000
illustrator10.0for win
photoshop4.0for win

を使用しています。

イラストレーターで作ったデータを、Jpeg(解像度300)にしなければなりません。

フォトショップが古いので、フォトショップを介さずに、
イラストレーターで処理したいのですが、
方法がありましたら、ぜひ教えてください。

どうぞ宜しくお願いいたします。

Aベストアンサー

昨日別の質問で回答しましたmuchoです。連日くらいに質問をされていますが、多分同じ案件の質問ですよね?今日の質問だけ見ると確かにイラストレータだけで簡単に解決できますが、多分明日になったら「実は解像度だけでなく、サイズの指定もあるのでそれはどうやったらいいか教えて下さい」といった質問が出るのではないかと心配しています。

(私のおすすめ)
画像関係の処理をイラストレータだけでやるのはちょっと無理があります。イラストレータを使う時には「解像度」の概念はあまりないのでこれはphotoshopでやるべきと思います。「解像度」と「サイズ」の関係を指定されている場合はphotoshopは必須です。

とりあえず、イラストレータで解像度を350dpiにして、それをphotoshopで指定されたサイズに変更するやり方を以下に示します。

(イラストレータでの処理)
1.「ファイル」→「データ書き出し」
ファイルの種類→JPEGにして保存

2.JPEGオプション
解像度の項目で以下のように入力
深度:「カスタム」
解像度:「350」dpi

(注意点)
このやり方は解像度を350dpiにするだけで画像サイズはイラストレータで作ったオブジェクトのサイズのままです。

(photoshopでの処理)
1.「イメージ」→「画像解像度」
ドキュメントサイズでお好きなサイズに変更します
幅:(  )mm
高さ:( )mm
解像度:350dpi

こんな感じでしょうか?質問をされる時は抱えている問題点を全部書いてくれると回答が早いと思います。(それにしても毎日、毎日大変ですね。ご苦労をお察しします)
頑張って下さい。

昨日別の質問で回答しましたmuchoです。連日くらいに質問をされていますが、多分同じ案件の質問ですよね?今日の質問だけ見ると確かにイラストレータだけで簡単に解決できますが、多分明日になったら「実は解像度だけでなく、サイズの指定もあるのでそれはどうやったらいいか教えて下さい」といった質問が出るのではないかと心配しています。

(私のおすすめ)
画像関係の処理をイラストレータだけでやるのはちょっと無理があります。イラストレータを使う時には「解像度」の概念はあまりないのでこれはphotos...続きを読む

Qの意味を教えてください。

Javascriptを見ていると
<a href="#" onClick="new_open();return false">
なる記述がありますが、
この<a href="#"
の部分の意味を教えてください。
<a herf まではわかるのですが、この#はどのようないみなのでしょうか?

Aベストアンサー

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとページ最上部にジャンプしてしまいます。

このスクリプトを書いた人は onClick だけが必要だったのでしょうが、href がないとリンクの下線が出ないなどの不都合があるため、やむなく # を書いたのでしょう。

JavaScriptの内容を実行したいだけなら、
<a href="javascript:new_open()">
と書けば十分なのですが、一部のブラウザではこのタイプのリンクをクリックすると、アニメーションGIFが止まってしまうなどの弊害があるため、嫌う人もいるようです。

また、JavaScriptが有効でない環境の人は、質問に書かれたリンクをクリックしてもページ最上部に戻されるだけで、開くべきページの内容を見ることができません。
なので、
<a href="ページのURL" target="_blank" onClick="new_open(); return false">
とするなどして、非JavaScript環境にも対応した方が親切です。

長文失礼しました。

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとペー...続きを読む

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング