ＣＳＳで指定してます。プラザーによっては文字の位置

締切済

質問者：-t-
質問日時：2014/07/16 20:48
回答数：2件

よろしくお願いします。

文字の大きさ、行間を指定しているのですが
プラウザーによっては文字の位置が一行ほどずれてしまいます。
何か対策はないのでしょうか？

ＩＥは文字半角分左に、Chromeは一行上に、Operaは半角分右によってます。

ＣＳＳを自力で書き込むのは初めてで、サンプルブックを見ながらしてます。
書き方を間違えているのでしょうか。

-------------------------------------------
【スタイルシート】
*{
margin:0;
padding:0;
}

#boxA{
background : none 0% 0% / auto auto repeat scroll padding-box border-box #ffffff;
}

#boxB{
background:#ffffff;
}

#boxE{
background : none 0% 0% / auto auto repeat scroll padding-box border-box #ffffff;
}

body{
text-align:center;
}

#container{
width:892px;
margin-left:auto;
margin-right:auto;
text-align:left;
}

h1{
font-size : 11.5px;
color:#333333;
font-weight : 500;
text-indent:0px;
letter-spacing : -0.1em;
}

.text1{
font-size : 11.5px;
letter-spacing : -0.1em;
}

.text2{
font-size : 70%;
}

.text3{
font-size : 85%;
line-height : 1.3em;
}

#boxA{
width : 892px;
}

#boxA2{
width : 708px;
margin-top : 10px;
margin-left : 90px;
background-image : url(../img/top_img.jpg);
height : 328px;
}

#boxA3{
width : 708px;
margin-top : 10px;
background-image : url(../img/porishi.jpg);
background-repeat : no-repeat;
background-position : 50% 50%;
margin-left : 90px;
height : 130px;
}

#boxE{
width:100%;
clear:left;
}

#boxB{
width : 892px;
float : none;
}

#boxB2{
margin-top : 10px;
margin-left : 100px;
width : 708px;
}
-------------------------------------------

【webページ】
</head>
<body background="img/bgcolor.png">
<div id="container">
<div id="boxA">
<br />
<div id="boxA2" class="text1">
<br />
<br />
<br />
<br />
<a href="http://www.wakayama2015.jp/" target="_blank"><img src="img/top_kokutai.png" width="106" height="276" border="0" align="left" alt="2015年紀の国わかやま国体　わかやま大会" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h1>　　　　　　　　　　暮らしに欠かせない食・住・遊に関する事業を展開する丸長グループ。 </h1>
　　　　　　　　　　日々の生活が安心・快適で、そして豊かであってほしい…<br />
　　　　　　　　　　その想いがグループ企業の分野を超えたノウハウの共有につながり、<br />
　　　　　　　　　　さらなるサービスの向上へと結びついているのです。<br />
　　　　　　　　　　これからも郷土和歌山県を拠点に県内外に事業フィールドの拡大に<br />
　　　　　　　　　　邁進してまいります。<br />
</div>
<div id="boxB" style="text-align : center;" align="center">
<div id="boxB2">
<img src="img/top_mainimg.png" width="703" height="815" border="0" />
</div>
</div>
<div id="boxE" style="text-align : center;" align="center">
<p style="text-align : center;" align="center" class="text2"><br />
<font color="#000000">Copyright (C) 2000 MARUCHO GROUP Corporation. All Rights Reserved.</font></p>
</div>
</div>
</div>
</body>
</html>

【webテスト】
http://www.dream-web.jp/test/maru/

サンプルブック見れば見るほど解らなくなってしまって困ってます。
助力よろしくお願いします。

通報する

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

質問の本文を隠す

回答 (2件)

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

No.2

回答者： wmin-2014
回答日時：2014/07/23 15:06

1行ずれるのは、改行タグ（<br />）を乱用しているからではないですか？

基本的に、改行タグ（<br />）は2個以上続けて使うものではありません。
段落ごとに空間を設けたい場合は、段落タグ（<p>）にマージンを設定します。

また、「<h1>　　　　　　　　　　暮」の半角の連打も意味がわかりません。
開始タグの直後にある半角の解釈がブラウザによって異なっていることによる表示差異ではないでしょうか？

インデントを表現したいのであれば、スタイルで「text-indent:**px;」と設定します。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

インデントに関してはビルダーのインデント設置ボタン設置しようと思ったんですが
うまくいかず悩んでいたところです。

スタイルシートはサンプルブックの引き方が下手なのかもしれませんが、まだまだ色々と
勉強することがありますね。

通報する

お礼日時：2014/07/23 19:17

No.1

回答者： ORUKA1951
回答日時：2014/07/17 13:37

　厳しいですが、スタイルシートを学ぶのならそのような方法では決して上達しません。

まずHTMLを完璧にマスターしましょう。
　スタイルシートを導入する最大の目的は、『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』です。それはHTMLが、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　だからです。IE,Firefox,Chromeだけじゃない。携帯電話やスマホやプリンター・・そして検索エンジンも利用環境なのですよ。

　そのうえで、
・HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　<body background="img/bgcolor.png"> backgroundはstrictでは使えません!
　<div id="container"><div id="boxA">
　　idやclassは『DIV要素・・・は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　　なのでarticleなどにしましょう。
　<br />　余白をあけるために<br />の連続はしてはなりません。音声ブラウザだとそのたびに「改行!!」なんて読み上げちゃいます。通常のHTMLではBRはまったく登場しないはず。
・DOCTYPEをきちんと宣言してブラウザが標準モードで動作するように指定しましょう。
　https://www.google.co.jp/search?q=DOCTYPE%20%E3% …

★HTMLは文書構造以外書きません。--デザインは一切考えないくらいでよい。
★HTMLが完成したら、
　Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　（のDATA）などで文法チェックをしてから、スタイルシートを書きます.
　
　これだけで、(IE7以降の)最近のブラウザ間の誤差はなくなるはずです。

なお、XHTMLで作成されているようですが、HTMLで十分です。今後はHTMLが主流になるのは目に見えていますから。

ちなみに、あなたの書かれているHTMLはこれだけでよいはずです。
HTML5だと、
<div class="header"></div>は、<header></header>
<div class="aside"></div>は、<section></section>
<div class="footer"></div>は、<footer></footer>
となるべきところです。

<body>
　<div class="header">
　　<h1>暮らしに欠かせない食・住・遊に関する事業を展開する丸長グループ。</h1>
　　<div id="Shyokai">
　　　<p>日々の生活が安心・快適で、そして豊かであってほしい…</p>
　　　<p>その想いがグループ企業の分野を超えたノウハウの共有につながり、さらなるサービスの向上へと結びついているのです。</p>
　　　<p>これからも郷土和歌山県を拠点に県内外に事業フィールドの拡大に邁進してまいります。</p>
　　</div>
　　<div class="aside" id="wakayamakokutai">
　　　<p>
　　　　<a href="http://www.wakayama2015.jp/" target="_blank"><img src="img/top_kokutai.png" width="106" height="276" border="0" align="left" alt="2015年紀の国わかやま国体　わかやま大会" /></a>
　　　</p>
　　</div>
　</div>
　<div class="section">
　　<h2>本文</h2>
　　<div class="aside">
　　　<h3>補足記事</h3>
　　　<p>
　　　　本文と直接関係ない記事・・
　　　</p>
　　</div>
　</div>
　<div class="footer">
　　<p>Copyright (C) 2000 MARUCHO GROUP Corporation. All Rights Reserved.</p>
</body>
</html>

★こうしてHTML書くほうが絶対に楽で、将来のメンテナンスも容易。もちろん検索エンジンを含めて携帯電話電話だろうが印刷だろうが
★デザインの自由度も大幅にアップしますし、書きやすくなります。
　現状では目の悪い人がCtrl+＋でフォントを大きくしただけで崩れてしまう。検索エンジンにはワケワカメで理解してもらえない。