BLACK OR WHITE???

明らかに常人ではなく、さりとてオタクと名乗れるほどの知識も情熱もエネルギーもない半端者のタワゴト。バカかとアホかと思われたらどうぞ存分に叩いてください。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--.--.--[--] Post --:--  CO:-  TB:-  スポンサー広告  Top▲

COMMENT

NAME

SUBJECT

BLOG/HP

PASSWORD

COMMENT

SECRET: ※非公開コメントにしたい場合はBOXにチェックをして下さい ⇒ 

SUBMIT: 送信 

TRACKBACK

スポンサーサイト のトラックバックアドレス
http://kamunagi21.blog2.fc2.com/tb.php/36-03649b4f
 ⇒ この記事に対してトラックバックを送信する(FC2ブログユーザー)

複数の外部スタイルシートを呼び出す時は……

 サイトに新しいページをアップロードしたら、どういうわけか、スタイルシートでページの左右に設定したはずの余白がなくなっていた。

 ローカルで見ると何も問題はないし、以前アップした別のページ(スタイルシートは外部呼出しなので共通)にも何も変な所はないのだが、今回アップしたページだけがそういう状態になっている。それでいて、ページの左右の余白以外のスタイル――見出しの下の線とか、背景色とか――はちゃんと適用されている。
 ということはアップロード時の事故かと思い、アップし直してみたが何も変わらない。それではタグの閉じ忘れか、それともID名やクラス名の書き間違いかと思い、HTMLやCSSの文法をチェックして、タグの閉じ忘れや包含関係の狂いを全部直してみた。それでも、本来あるべき余白がなくなって、ブラウザの枠に文字や下線がくっついたような奇妙な表示は直らない。

 ほとほと困り果てたが、もしかしたら、スタイルシートのあるディレクトリの指示を間違えているのかもしれないと思った。スタイルファイルがあるのは最上位のディレクトリ、新しいページをアップしたのはその二つ下のディレクトリだから、外部スタイルシートを参照するタグはおおむね次のようになるはずだ。

<link rel="stylesheet" type="text/css" src="../../style.css">

 この「../」が一つ多くても少なくても、本来適用されるべきスタイルファイルは呼び出されないことになる。つまり今回の事態は、その「../」の数を間違えて、どこかのディレクトリに置き忘れた古いスタイルファイルを呼び出したせいではないか……と、そう思ったのだ。

 ところが、いくら見直してみても、新しいページの外部スタイルシート参照タグは上に書いたもので合っている。「../」の数を間違えている様子もない。すると、表示がおかしくなった原因は……? 想像もつかない。更新作業の疲れもあって、本当に困り果てた。

 それでも、共通のスタイルを使っているのに、新しいページの表示が変で、元からあったページの表示が変でないのならば、両者にはどこかに違いがあるはずだ。そう思い、HTMLのヘッダ部分に目を凝らして見比べて……あることに気がついた。

 元からあったページの外部スタイル参照タグは、次の二行のようになっている。

<link rel="stylesheet" type="text/css" src="../../style01.css" media="all">
<link rel="stylesheet" type="text/css" src="../../styleprint.css" media="print">

 対して、今回アップしたページのタグはこう。

<link rel="stylesheet" type="text/css" src="../../style01.css">
<link rel="stylesheet" type="text/css" src="../../styleprint.css">

 つまり、我がサイトでは、普段の表示用と印刷用とでそれぞれスタイルファイルを使い分けている。古いページのタグに含まれているmedia属性は、その使い分けのため、と言うよりも、むしろNetscape4.xなどのCSS未対応ブラウザへの対策として入れているものだ。あってもなくてもあまり変わらない気もするが、古いページと新しいページではこの有無が違っているのだから、これこそ新しいページに左右の余白が作られない原因なのかもしれない。あまり意味がないような気もするが、新しいページのタグにも追加してみよう……。

 ……こうして新しいページは、無事、他のページと同じように左右に余白を取った見た目になった。
 それでだいたいおかしな事になった原因も分かった。普段用のスタイルファイルの参照タグの下に、印刷用のスタイルファイルの参照タグがあるので、media属性の指定がないと、普段用のスタイルの後に印刷用のスタイルが読み込まれ、上書きされてしまう。印刷用のスタイルは、普段用に比べて左右の余白を小さくすることを主な設定としている。現在のサイトデザインではあまり必要のないものだが、削除も更新もしていなかったことが今回の事態を引き起こしたのだ。

 昔サイトにアップした内容さえ、もったいないとか当時の思い出だとかまた上書きするかもとか言って、なかなか消せない自分だが……やはり、ときどきはサイトの整理も必要なのかもしれない。
スポンサーサイト

スレッド:どーでもいいこと / ジャンル:コンピュータ

2009.08.21[Fri] Post 03:48  CO:0  TB:0  パソコン素人の悪あがき  Top▲

COMMENT

NAME

SUBJECT

BLOG/HP

PASSWORD

COMMENT

SECRET: ※非公開コメントにしたい場合はBOXにチェックをして下さい ⇒ 

SUBMIT: 送信 

TRACKBACK

複数の外部スタイルシートを呼び出す時は…… のトラックバックアドレス
http://kamunagi21.blog2.fc2.com/tb.php/36-03649b4f
 ⇒ この記事に対してトラックバックを送信する(FC2ブログユーザー)

Log in*/RSS*】  Design 「AZ+」Plugin Template...  Page Top▲
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。