普通にタグによって作成しているページに、スタイルシートで一括で指定をしています。
ところが、IEではきちんと表示できるのに、Safariではスタイルシートでの指示がはずれてしまいます。
以前、同じ指定で作っていたときは、きちんと表示できていたのですが、原因が究明できません。
スタイルシートの記述は、まったく同じです。Safariの環境設定も同じなのに、前に作ったものは、きちんと表示でき、今回作ったものだと表示できないのです。
IEで表示できるなら大丈夫かな、と、思わないでもないのですが、このような場合の原因をさぐるのは、どうしたらいいのでしょうか?
よろしくお願いします。

このQ&Aに関連する最新のQ&A

作成 タグ」に関するQ&A: タグ作成の依頼

A 回答 (3件)

このCSS、ソースそのままコピーですか?


だとしたら、漢字の空白が入っているためと思われます。
    ↓ここ
.main h1  {font-size:18px; color:#666666;
font-family:Arial, Helvetica}
    ↓ここ
.main h2  { color: #666666; font-size: 12px;
↓ここ
       border-bottom: 3px solid #666666}
.main p {font-size:11px; color:#666666}
--></style>

確認してみてください。
    • good
    • 0
この回答へのお礼

3番目の空白は、ここに貼ってから入れたものでしたが、
h1とh2の横のスペースは全角のスペースが入ってました。
IEで表示できていたもので、ミスを見つけられませんでした。
初歩的なミスをしてしまってお恥ずかしいです。
ありがとうございました!

お礼日時:2005/08/04 22:08

> 以前、同じ指定で作っていたときは、きちんと表示できていた…


> スタイルシートの記述は、まったく同じ…
>Safariの環境設定も同じ…
それなのに、結果が違う。

こういう場合に考えられる事は、
1) 前回と今回で、別のコンピュータを使って作った
2) 前回と今回で、OSの種類が違った
3) 前回と今回で、種類の違うテキストエディタを使って書いた

などが考えられますが、どれか該当しますか?

この回答への補足

ありがとうございます。
1)と2)が該当します。
テキストエディタも、OSの変更に伴い、バージョンが変わってます。
前の環境に戻すことができないのですが、どうしようもないのでしょうか?
よろしくお願いします。

補足日時:2005/08/03 21:28
    • good
    • 0

文字コード指定などの記述ミスが考えられます。



実際に見せていただければ原因の特定が可能かもしれません。

この回答への補足

ありがとうございます。
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<style type="text/css" media="screen"><!--
.main {width:724px;
padding-top:5px;
vertical-align:top; text-decoration:none}
.main h1  {font-size:18px; color:#666666;
font-family:Arial, Helvetica}
.main h2  { color: #666666; font-size: 12px;
       border-bottom: 3px solid #666666}
.main p{font-size:11px; color:#666666}
--></style>

これです。テーブル内をmainで指定しているのですが、
IEではちゃんと<h1>と<h2>の指定になるのですが、
Safariでは表示ができません。
ちなみに、<p>の指定はちゃんと表示できてます。
どこかミスがあるのでしょうか…。
よろしくお願いします。

補足日時:2005/08/03 20:05
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

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

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

Qスタイルシートのせいで、印刷がきちんとできません。

スタイルシートの2カラムでサイトを作成しております。

はじめて、本格的にスタイルシートでレイアウトしたので、
四苦八苦しております。

できたサイトをFirefoxで印刷しようとすると、1ページ目と最後のページは印刷されるのですが、その途中のページが印刷されなく、プレビューにものりません。

これはFirefoxのバグとわかり、IEでやってみると、きちんとプレビューもされ、印刷できます。

ただ、それでも印刷すると、サイトの右端が切れてしまい、左端のメニューはなぜかすっかりなくなっています。

このような場合、どうすればきちんと印刷できるのでしょうか?

Aベストアンサー

サイトの右端が切れるのは、100%表示とかにしているからではないですか?
印刷の設定で「縮小してページ全体を印刷する」を選択して印刷すると、
きちんを全体が印刷されると思います。
ちなみにIE6にはこの機能はありません。

IE6でも切れずに印刷させようとすると、
印刷用のcssを書いて横幅をピクセルでなく100%にして作る必要があります。

左のメニューが切れている原因はソースを見ないことにはわかりませんね。
もしかしたらメニュー自体が背景画像で構成されているのなら、
印刷設定で背景を印刷するように変更すれば見れるようになるかもしれません。
IEのデフォルトの設定では背景は印刷されないようになっています。

基本的に正しいhtmlとcssで書いていれば、IEではそこそこまともに印刷されると思います。
Firefoxの印刷はだいぶ馬鹿なので、それ用に対応しなくてはならない場合も多いです。

全てのブラウザできちんと印刷できるようにするのは意外と難しいので頑張ってください。

Qスタイルシートでかけるものはスタイルシートを使った

非推奨タグでなくても、スタイルシートでかけるものはスタイルシートを使ったほうが良い?

htmlでサイトを作ってるのですが、スタイルシートを使うべきかhtmlで書くべきか、
どちらでもかける場合があります。

その際どちらを使ったほうがいいのでしょうか?

Aベストアンサー

判断は、「どちらでもかける場合があります」ではありませんよ。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」という根本を理解していないと、この質問になります。
 HTMLは、あくまで文書構造をマークアップするものです。例えば、太字で表示したい語句があったとします。
[例文]
 「構造とプレゼンテーションの分離」という概念を理解しておかなければなりません。
 いにしえの昔の武士の侍が、馬から落ちて落馬して、・・・【中略】・・・腹を切って切腹した。

 ここで、「構造とプレゼンテーションの分離」が重要なのでしたら
<p>
 <strong>「構造とプレゼンテーションの分離」</strong>という概念を理解しておかなければなりません
</p>
でしょうし
<p>
 <b>いにしえ</b>の<b>昔</b>の<b>武士</b>の<b>侍が、<b>馬から落ちて</b><b>落馬</b>して、・・・【中略】・・・<b>腹を切って</b><b>切腹</b>した。
</p>
 でしょう。

 その上で、スタイルシートで
p strong{color:red;font-weight:normal;}
p b{color:green;font-weight:normal;text-decoration:underline;}
とか・・
 しかし、すくなくとも
<p>
 <span class="stong">「構造とプレゼンテーションの分離」</span>という概念を理解しておかなければなりません
</p>
とかいて
p span.strong{font-weight:bold;color:red;}
とするのは、望ましくはありません。

 もっと、良く指摘されるのが、配置をtableを使って行うことです。tableは、二次元以上のデータをマークアップするものですが、これを他の用途に使うのは誤りです。

 それぞれのタグの用途は仕様書に書かれています。
 ⇒要素索引( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/elements.html )
 から要素名をクリックして説明を読んでください。

>その際どちらを使ったほうがいいのでしょうか?
 それは、その要素が何であるかがわからないので、一概には答えられません。--これもわかると思います。
 HTMLは、その文書を読み解き、その文書を構成する要素に分解して、それぞれの要素をタグでマークアップしていく言語です。文書を書く本人しか、その要素(部品)をどの要素とは判断できないのです。
 そのうえで、スタイルシートで自由にプレゼンテーションを変更できる。
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
と考えたら答えは出ると思います。

(注)HTML4.01では、この文書構造を示すタグ--要素が足りませんでした。そのため、DIV,SAPNという要素が用意されて
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
 とされていましたが、ご存知の通りこれが正しく理解されずに<div id="wrapper"><div id="contener"><div id="Left">のようなおかしなマークアップが氾濫してしまいました。本来は、<div class="article"><div class="section"><div class="nav">のようになるはずでした。
 その反省から、「HTML5 では、文書をよりよく構造化するために、( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」header,section,footerなどの新しい要素が採用され、DIVやSPANは原則使わない--他に適当な要素がないときの最後の手段となりました。

>その際どちらを使ったほうがいいのでしょうか?
 これで悩むことがありませんよう、役立てば良いです。
 1度仕様書を通しで読んでみましょう。答えはそこにあります。

判断は、「どちらでもかける場合があります」ではありませんよ。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」という根本を理解していないと、この質問になります。
 HTMLは、あくまで文書構造をマークアップするものです。例えば、太字で表示したい語句があったとします。
[例文]
 「構造とプレゼンテーションの分離」という概念を理解しておかなければなりません。
...続きを読む

Qスタイルシート(CSS)の中にテーブルのようなスタイルシートをつくりたいです。

Dreamweaver8にてHPを作成しております。

今回CSSをやってみようと思い試行錯誤しながらがんばっているのですが、
現在スタイルシートのfloatタグなどを使って、
ヘッダー、メニュー、コンテンツ、フッターというよくある構成で作っております。
そしてコンテンツ部分以外はテンプレート機能を使い共有できるようにしています。

そして新しいページを作る際、コンテンツ部分だけを編集していくのですが、真ん中で2つにわかれた2段組の文章をつくりたくて、テーブルを使用したところ、テーブルが縦に長くなるとCSSで指定した範囲を超えてしまいレイアウトが崩れてしまいます。

これがテーブルでなく文章でなら縦に長くなっても自動的にCSSの高さが長くなってくれます。

ですので、題名のようにCSSでテーブルのような機能のあるものを教えていただきたいのですが、素人でなにぶん申し訳ないですがよろしくお願い致しますm(_ _)m

Aベストアンサー

横に2つ並べるのでしたら「float: left;」を入れると横に並びます。
ただ、テーブル幅を狭く設定して<div class="table">~</div>をずらっと
並べてしまうと、その分だけ横にテーブルが並んだようになってしまうので
その場合はひとつひとつ指定しなくてはならなくなります。

> 画像を挿入するとなぜか枠線が消えてしまうのですが、どうしてでしょうか。
これはテーブルの背景に画像を挿入されているということでしょうか?
それともbodyの中にということでしょうか?
枠線の色をかなり薄いグレーに設定しているので(#cccccc)
そこを別の色に変えると出てきませんか?

> その幅ではできずテキストを入力するにつれて枠線の幅も自動的的に伸びていくという感じです。
下記のCSSの記入方法で何度か試してみたのですが、テキストは延々と伸びていかず
きちんと自動的に折れ曲がってくれるのですが…。spanではなくdivで書かれてみてはどうでしょうか。

CSSファイル例

.table{
float: left;
width: 200px ;/*テーブルの幅*/
background-color: #ffffff;/*テーブルの色*/
background-image : url(sample.gif);/*テーブルの中に入れる画像(画像ファイル名は任意) */
margin: 10px;/*テーブルとテーブルの余白*/
border: solid 1px #000000;/*テーブルの枠の色(今回は黒)*/
padding: 0.5em;/*文字周りの余白*/

html記入例

<body>
<div class="table">文字など文字など文字など文字など文字など文字など文字など文字など</div>
<div class="table">文字など文字など文字など文字など文字など文字など文字など文字など</div>
</body>

横に2つ並べるのでしたら「float: left;」を入れると横に並びます。
ただ、テーブル幅を狭く設定して<div class="table">~</div>をずらっと
並べてしまうと、その分だけ横にテーブルが並んだようになってしまうので
その場合はひとつひとつ指定しなくてはならなくなります。

> 画像を挿入するとなぜか枠線が消えてしまうのですが、どうしてでしょうか。
これはテーブルの背景に画像を挿入されているということでしょうか?
それともbodyの中にということでしょうか?
枠線の色をかなり薄いグレーに設定...続きを読む

Qスタイルシートで位置固定すると、スタイルシートでの改ページ指定ができなくなる

スタイルシートのpositionを使用して位置固定すると、page-break-beforでの
改ページができなくなります。
位置固定し、かつ、その文字の直前で改ページする方法はないでしょうか?
ブラウザはIE5.5以降を考えてます。

======================================================================
<html>
<body>
<div style="position:absolute; top:100px;">
テスト1
</div>
<div style="position:absolute; top:150px; page-break-before:always;">
テスト2(この文字の直前で改ページさせたい)
</div>
<div style="position:absolute; top:200px;">
テスト3
</div>
</body>
</html>
======================================================================

宜しくお願いします。

スタイルシートのpositionを使用して位置固定すると、page-break-beforでの
改ページができなくなります。
位置固定し、かつ、その文字の直前で改ページする方法はないでしょうか?
ブラウザはIE5.5以降を考えてます。

======================================================================
<html>
<body>
<div style="position:absolute; top:100px;">
テスト1
</div>
<div style="position:absolute; top:150px; page-break-before:always;">
テスト2(この文字の直前で改ページさせたい)
<...続きを読む

Aベストアンサー

色々試したところ,以下のソースで成功しました(IE6)。

<html>
<body>
<div style="position:absolute; top:100px;">
テスト1
</div>
<div style="position:relative;page-break-before:always;">
<div style="position:absolute; top:150px;">
テスト2(この文字の直前で改ページさせたい)
</div>
<div style="position:absolute; top:200px;">
テスト3
</div>
</div>
</body>
</html>

Q今スタイルシートを学んでいるのですが、 複数のページにスタイルシートを適用する場合は、htmlファイ

今スタイルシートを学んでいるのですが、
複数のページにスタイルシートを適用する場合は、htmlファイルのheadタグ間に
<LINK rel=”stylesheet” href=”○○.css” type=”text/css”>
を記述すると学びました。

しかしあるサイトのソースを表示させたら、
hrefとrelが逆になってました。
順番は決まっていないということでオッケーですか??

Aベストアンサー

指定する属性の順序は関係ありません。
他のタグも同様です。


人気Q&Aランキング

おすすめ情報