window


この質問記事は解決しています。
トップページ > 記事閲覧
*左右のフレームにスタイルシートを適用したいのですがリンク切れ
日時: 2009/12/23 15:47
識別: ID:cGwbR5sOXSy.
名前: けん
 トップページが縦2列のフレームページになっています。
 left.htmlとright.htmlです。

 左は、目次の内容を羅列したページで、右は、トップページの本文です。

 これらのページにもスタイルシートを適用したいと思ったので、他の
本文で使っていた記述をコピーして貼り付けました。
 そうしたら、左フレームの方はスタイルシートを反映できました。

 しかし、右フレームが反映できず、黒い文字ばかりになってしまいました。

 そして、いずれのフレームも、ホームページビルダーで全体の確認をすると、
2つのページだけ、リンク切れを表わす赤い矢印が表示されます。
 リンクが切れてしまったのかと思って確認しましたが、リンクが切れている
様子はありません。

 htmlにスタイルシートを適用しようとしたことに問題があったのでしょうか。
メンテ

Re: 左右のフレームにスタイルシートを適用したいのですがリンク切れ ( No.1 )
日時: 2009/12/23 16:27
名前: nn
参照: http://www-06.ibm.com/jp/domino01/swhc/esupport.nsf/keysearch

現物を見れば何かわかるかもしれません。

あと、複数のページに共通のスタイルシートを適用するのなら、
外部スタイルシートを使ったほうが効率的です。
メンテ
index.htmlページに外部スタイルシートを適用したい。 ( No.2 )
日時: 2010/01/10 07:35
名前: けん

 ホームページ・ビルダーのリンク確認画面(全体のツリーが確認できる画面)
で、今まで表示されなかったリンク切れの赤い矢印の表示について新たなこと
を発見しました。

 フォルダ画面で、「リンクエラーのあるファイル」の中を確認したところ、
index.htmのファイルに何らかの問題があることが分かりました。
 そのファイルをクリックしたところ、ページ編集画面に遷移して、
 WEB上、ジオシティーズの広告の表示される箇所に、<!>とか<SXS>なる
表示が出ていました。
 そのhtmlソースを見てみたら、次のような記述がありました(一部改変)。

<!-- geoguide start --><div align=center><script language="JavaScript">var jps=383;var jpt=146453</script><script language="JavaScript" src="http://bc.geocities.yahoo.co.jp/js/gg.js"></script></div><!-- geoguide end -->

 たぶん、ジオシティーズの広告を挿入するための記述だと思うので、とり
わけ問題にはならないと勝手に判断しています。
 ジオシティーズで公開するには、広告を載せる決まりになっているので、
むしろ、これを削除してしまうのは規定違反になってしまうんだと思います。

 それにしても、今まで、このようなエラー表示が出なかったのに、急に
現れたのが不思議でなりません。

 ともかく、この問題は解決したと考えておりますが、外部スタイルシート
がindex.htmlのページだけに反映されないという現象はまだ未解明です。
 それ以外のページにはすべて反映できているのですが。
 フレームページは解消して、単一ページとしましたが、それが原因でもない
ようです。
 もう少し自分で研究してみます。

 
メンテ
Re: 左右のフレームにスタイルシートを適用したいのですがリンク切れ ( No.3 )
日時: 2010/01/10 10:24
名前: nn
参照: http://www-06.ibm.com/jp/domino01/swhc/esupport.nsf/keysearch

解決済みにはなってないようなので一応気付いたことを書いておきます。

>  たぶん、ジオシティーズの広告を挿入するための記述だと思うので、とり
> わけ問題にはならないと勝手に判断しています。
>  ジオシティーズで公開するには、広告を載せる決まりになっているので、
> むしろ、これを削除してしまうのは規定違反になってしまうんだと思います。

ローカルで削除しても、サーバー上で挿入されるので問題ないと思います。
通常ローカルで作成したページには広告は挿入されていないはずですから。
http://help.yahoo.co.jp/help/jp/geo/free/free-05.html

ちなみに、FAQ「編集領域に「!」や「?」マークが表示されます」
http://www-06.ibm.com/jp/domino01/swhc/esupport.nsf/all/hpb0781

>  それにしても、今まで、このようなエラー表示が出なかったのに、急に
> 現れたのが不思議でなりません。

web上のページ、つまり広告が挿入された状態のページを保存したのではありませんか?
ジオのユーザーではないのでよくわかりませんが。


>  ともかく、この問題は解決したと考えておりますが、外部スタイルシート
> がindex.htmlのページだけに反映されないという現象はまだ未解明です。
>  それ以外のページにはすべて反映できているのですが。
>  フレームページは解消して、単一ページとしましたが、それが原因でもない
> ようです。

各ページのlink要素(外部cssファイルを参照している部分)を比べてみましょう。
もしくはスタイルシートマネージャーで、外部cssファイルを適切に参照しているか確認。

とにかく、>>1 でも書いた通り、現物を見ないことにははっきりとしたことはわかりません。
推測で回答するのも結構疲れるんで。
メンテ
現物アップ、もうしばらくお待ちください。 ( No.4 )
日時: 2010/01/10 19:55
名前: けん

 丁寧なアドバイス誠にありがとうございます。とても助かります。
 そういえば、!が表示されたことの心当たりがありました。

 いろいろHPの記述を変えていたら、間違って必要なファイルの
内容を変えてしまったので、すでにアップロードしてあるWEB上
のHPの表示ソースをコピーして復元したんです。
 それを他のHP作成にもコピーして使ったところ、そのような現象
が現れました。
 コピーするときに、表示ソースを間違って貼り付けたり、いろいろ
と操作していましたから、それが原因で、そうなってしまったようです。

 ちなみに、実際に、ジオシティーズで表示を見てみたら、広告が二重
に挿入されていました。もちろん、!記述は、その後、すぐに削除しま
した。

 現象には、それなりの理由があるということがよく分かりました。

 それから、現物のアップの準備がもうすぐ完了します。
 今しばらく、お待ちください。
 
メンテ
現物をUPしましたが、全く予期せぬ結果に。 ( No.5 )
日時: 2010/01/10 22:50
名前: けん
参照: http://hanako.yuki-mura.net/

 現物をUPすることができました。

 ところが、UPした現物は、きちんと外部スタイルシートが反映
されています。

 構造は、
@ index.htmlの下に
A mokuji.htmlのページ。このさらに下に
  (↑ mokujiというディレクトリ中)
B contents1.htmlとなっております。
  (↑ contentsというディレクトリ中)
C これに、css.ファイルとしてhpb9tm06_4.css (←記述は長いので下記)
  (↑ sitethemeというディレクトリ中)
 

(1)パソコンのデスクトップに保存した@のindex.htmlをダブルクリックして
ブラウザ上に表示したとき。
 そして、
(2)ホームページ・ビルダー13でプレビュー表示で確認したとき。
 いずれにおいても、AとBは、スタイルシートが反映されているのに、
なぜか@だけが反映されません。

 まったく反映されないのかというと、文字の大きさの指定だけは、反映され
るようですが、背景だとか位置だとか、そういったものは反映されないのです。

 ホームページ・ビルダーで、フォルダ表示すると「リンクエラーのあるファイル」に唯一、@が表示されているので、やはりこれが原因になっているので
しょうか。
 しかし、私の知識では、このあたりは皆目見当がつきません。

 以下は、css.ファイルの内容です。

/*- themeid=hpb9tm06_4; --------------------------------*/
/*-------------------- element type --------------------*/

H1 {
color: #0000FF;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
font-size : 23px;
text-decoration:underline;3px
}

H2 {
color: #000080;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
font-size : 23px;
text-align : center;
}

H3 {
color: #008000;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 15px;
font-size: 20px;
font-weight: bold;
}

H4 {
color: #000000;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 15px;
font-size: 18px;
font-weight: bold;
color : #ff6600 ;
}

H5 {
color: #000000;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 30px;
font-size: 17px;
font-weight: bold;
text-decoration:underline;3px
}

H6 {
color: #ff0000;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 15px;
font-size: 15px;
font-weight: bold;
}

caption {
color: #008000;
font-size:30px;
}

table {
border-collapse:collapse;
border: 1px #000000 solid;
border-width: thin;
width: 100%;
height: 100px;
}


thead {
background-color: #c0c0c0;
}

th {
border: 1px #000000 outset;
text-align: center;
vertical-align: middle;
}

tbody {
}

td {
border: 1px #000000 solid;
vertical-align: top;
font-size: 15px;
color: #000000;
padding: 5px 5px 5px;
margin-left: 5px;
margin-right: 5px;
}

p {
padding: 5px 5px 5px;
margin-left: 30px;
margin-right: 5px;
color: #000000;
font-size:15px;
line-height:150%;
line-break:strict;
}

body {
padding: 5px 5px 5px;
margin-left: 15px;
margin-right: 5px;
background-color: #FFFFCC;
font-size: 15px;
color: #000000;
line-height:150%;
line-break:strict;
}

a:hover {
font-weight:bold;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 30px;
color: blue;
}

b {
font color: #000080;
}
メンテ
Re: 左右のフレームにスタイルシートを適用したいのですがリンク切れ ( No.6 )
日時: 2010/01/11 10:33
名前: nn
参照: http://www-06.ibm.com/jp/domino01/swhc/esupport.nsf/keysearch

参照URIが多すぎてスパムとしてブロックされるので、URIの頭にスペースを入れています。


h ttp://hanako.yuki-mura.net/index.html
7行目:
<LINK href="../sitetheme/hpb9tm06_4.css" rel="stylesheet" type="text/css" id="hpb9tm06_4">

h ttp://hanako.yuki-mura.net/mokuji/mokuji.html および
h ttp://hanako.yuki-mura.net/contents/contents1.html
7行目:
<LINK href="../sitetheme/hpb9tm06_4.css" rel="stylesheet" type="text/css" id="hpb9tm06_4">

単純にコピペしたのか、いずれもhref属性値が全く同じ記述になっていますが、index.htmlと、mokuji.htmlならびにcontents1.htmlは違う階層にあるのですからhpb9tm06_4.cssへの相対URIはそれに応じて変わってきます。

h ttp://hanako.yuki-mura.net/index.html
<LINK href="../sitetheme/hpb9tm06_4.css" rel="stylesheet" type="text/css" id="hpb9tm06_4">
これだと、index.htmlのひとつ上の階層のsitethemeディレクトリのhpb9tm06_4.cssを参照していますが、index.htmlはトップディレクトリにあるので、そのようなファイルは実際には存在しない、またはアクセス出来ません。

hpb9tm06_4.cssの実際の場所は、
h ttp://hanako.yuki-mura.net/sitetheme/hpb9tm06_4.css
つまり、index.htmlと同じディレクトリにあるsitethemeディレクトリにあるのですから、正しくは
<LINK href="./sitetheme/hpb9tm06_4.css" rel="stylesheet" type="text/css" id="hpb9tm06_4">
または、
<LINK href="sitetheme/hpb9tm06_4.css" rel="stylesheet" type="text/css" id="hpb9tm06_4">

h ttp://www.tagindex.com/html_tag/basic/uri.html

現在のファイルと参照先のファイルの位置関係に常に注意を払ってください。
まあ、ビルダーを適切に扱いさえすれば、作者が意図しなくてもちゃんとやってはくれますが。



なぜかweb上で反映されるのは……、あり得ない参照先をサーバーでリカバーしてるのかな?(わかりません)

なお、cssに一部誤りがありますので、下記などで文法チェックされるとよいでしょう。
h ttp://jigsaw.w3.org/css-validator/

ついでにHTMLの文法チェック
h ttp://openlab.ring.gr.jp/k16/htmllint/htmllinte.html
メンテ
Re: 左右のフレームにスタイルシートを適用したいのですがリンク切れ ( No.7 )
日時: 2010/01/11 21:40
名前: けん
状態: 解決!

 アドバイスをいただいたとおりに記述を書き換えたところ、スタイル
シートを反映させることに成功しました。
 ご指摘、ご指導、ほんとうにありがとうございます。
 あれほど、自分でやってみて、全く歯が立たなかったのに、感激です。

 html内の外部スタイルシート参照先を

<LINK href="./sitetheme/hpb9tm06_4.css" rel="stylesheet" type="text/css" id="hpb9tm06_4">

 としました。
 そうしたら、ホームページ・ビルダーでリンク切れのエラーメッセージも
解消しました。
 もちろん、サーバーにUPしても、期待どおりの結果です。

<LINK href="sitetheme/hpb9tm06_4.css" rel="stylesheet" type="text/css" id="hpb9tm06_4">
 でも、やってみましたが、これも同様に反映されます。
 ただし、構文チェックでは、先の方がデータをきちんと拾ってくれますので、
先の方にしました。

 今回の私の失敗の原因は、とにかくスタイルシートをすべてのページに
適用させようと、同じリンク参照記述をすべてのページにコピーして貼り付けた
ことでした。
 階層ということに全く無頓着だったのが悪かったです。
 教えていただく前まで../の記述は、単なる省略記号との認識でしかあり
ませんでした。
 階層という重要な意味を持っていたのですね。

 ところで、構文チェックを受けたところ、エラーが多数検出されました。
 スタイルシートのエラーを可能なかぎり解消したいと思っていますが、
私の知識では、この解消には、またかなりの時間が必要です。
 とにかく、やってみようと、考えています。

 今回、アドバイスをいただき、ほんとうに感謝しております。
 重ねて、お礼申し上げます。
メンテ
- ( No.8 )
日時: 2011/12/10 11:40
名前: pl517.nas821.p-osaka.nttpc.ne.jp

#SPAM

メンテ
- ( No.9 )
日時: 2012/06/15 12:40
名前: 7c294cd1.i-revonet.jp

#SPAM

メンテ

 返信フォーム (上記スレッドに返信する場合は以下のフォームから投稿します)
題名 ※必須 スレッドをトップへソート
名前
E-Mail
URL
パスワード 記事メンテ時に使用します (メンテは該当記事のメンテアイコンをクリック)
返信内容
※必須
エラーメッセージや内容などは省略せず詳細にご記入下さい
状態の設定

・問題が解決したら 解決 を選択して投稿して下さい HELP(新しいウィンドウが開きます)
・既存記事の状態設定はメンテ(メンテアイコン)から修正する事ができます。


投稿内容をご確認下さい(記事の削除は出来ません)

   クッキー保存