PCにより、HTMLやCSSが正しく表示されないことはあるんですか？

締切済

質問者：jamfruits
質問日時：2020/06/13 18:21
回答数：4件

HTMLとCSSを勉強中です。
こちらのサイトに掲載されているコードを入力しながら１つずつ行っていますが、たまに表示が見本のようにならないときがあります。
https://saruwakakun.com/html-css/basic/relative- …

たとえば、
・本当は要素と要素がくっつくはずなのに、余白（margin?)ができてしまう
・親要素に指定したCSSが反映されない
などです。

打ち間違いなどでもなさそうで、例えば以下のコードをコピペしてみました。
一番上に「fixed」という文字の位置を固定する、というコードです。
しかし、一番上に表示はされるものの、次の要素「これは文章です」という文字とかぶってしまいます。

コピペでもダメとなると、PC本体の設定の問題か、もしくは使っているテキストエディタの設定の問題化と思うのですがいかがでしょうか。
ちなみに、ブラウザをIE、chrome、Edgeと変えてみましたが、特に表示には変わりなかったです。

【CSS】
#fixed {
position: fixed;
/*基準を画面の左上に*/
top: 0;
left: 0;
/*余白が入らないように*/
margin: 0;
/*以下装飾*/
width: 100%;
background: #FFC778;
color:white;
}
【HTML】
#fixed {
position: fixed;
/*基準を画面の左上に*/
top: 0;
left: 0;
/*余白が入らないように*/
margin: 0;
/*以下装飾*/
width: 100%;
background: #FFC778;
color:white;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.1

回答者： lv4u
回答日時：2020/06/13 18:53

＞＞PCにより、HTMLやCSSが正しく表示されないことはあるんですか？

ＰＣだけでなく、携帯やスマホでも、期待するように表示してくれないことは普通にありましたし、今でもそうかもしれません。

だから、ソフト開発担当者は、テーブルの上にずらりといろんなメーカの携帯やスマホを並べてテストしていました。
また、ＰＣやＭａｃの場合も、いろんなブラウザーソフトでテストするっていう大変な作業を行っているのではないでしょうか？

- 2
- 件

通報する

この回答へのお礼

なるほどたしかにそうですね。
もしかしたら他のPCて試したら上手くいくかもしれません。
いろいろ難しいですね(^^;;
見た目が違ってしまうと、一体どのサイズを想定してつくればいいのかわかりません。

通報する

お礼日時：2020/06/14 06:53

No.2

回答者： artoo
回答日時：2020/06/13 21:44

正しく表示されないことはありませんが、期待通りに表示されないことはよくあります。

表示が自分の期待通りじゃないとしても、ブラウザに表示された状態が「正しい」のです。

どのブラウザでも期待通りに表示させるためには、ブラウザ毎の細かい仕様の違いを熟知することが必要です。

- 0
- 件

通報する

No.3

回答者： gura_
回答日時：2020/06/14 08:35

jamfruitsさん

　････「これは文章です」という文字とかぶってしまいます･･････････

その参考サイトの説明に抜けがあるのですね。

ご参考に↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
*{ margin:0; padding:0; } /* 追加 */
p{ margin-top: 20px; } /* 追加 */
#fixed {
position: fixed;
/*基準を画面の左上に*/
top: 0;
left: 0;
/*余白が入らないように*/
margin:0;
/*以下装飾*/
height:20px; /* 追加 */
width: 100%;
background: #FFC778;
color:white;
}
</style>
</head>
<body>
<p>これは文章です。</p>
<p>これは文章2です。</p>
.
.
.
<p>これは文章20です。</p>
<p id="fixed">fixed</p>
</body>
</html>

- 0
- 件

通報する

No.4

回答者： kon77
回答日時：2020/06/14 10:15

「position: fixed」は、質問文のURLに、「画面の決まった位置に要素を固定させたいときに使います」と書かれている通り、例の画面上部に「fixed」と書かれた要素を固定させています。

質問文のURLの例は、Edge、IE、Chrome、Firefoxで、同じレイアウト（下の文字が隠れる）になります。

これは正しいレイアウトであり、コードの間違いや、ブラウザのバグではありません。

下の要素が隠れるのは、上の要素が固定されているので当然で、隠れてしまわないようにしたいなら、No.3さんの例でも良いですし、CSSに「body{padding-top: 2em;}」等を付けて、bodyの上部に2文字分の余白を付けてやると、簡易的に対処出来ますが、固定された要素内の文字数が多かったり、ブラウザの幅が小さかったりすると、固定された要素内のテキストが改行されて、要素の高さが増えてしまい、body上部に増やしたpaddingで対処しきれなくなりますので、完璧なサイトを作りたい場合は、より良い方法を考える必要があるかと思います。

又、全てのブラウザで同じレイアウトで表示させるには、No.3さんが「*{ margin:0; padding:0; }」と書かれているように、「リセットする」という事も重要です。

デザインによっては、「*{ margin:0; padding:0; }」では効かない場合もあるので、その場合は、リセットCSSをお試しください。「リセット CSS」でWEB検索すると見付かるかと思います。