ドコモから閲覧したHTMLタグについて

締切済

質問者：結城ゆら
質問日時：2016/02/22 06:54
回答数：1件

現在ホームページを開設しているのですが、先日ドコモ端末をお使いの訪問者様から｢サイトの中身が見れない｣というお問い合わせをいただきました。

見れないというのは｢コンテンツには入れるが文章が読めない｣ということらしいのですが、原因がわかりません。

考えられるのは、行間に空白を入れる＜div style="line-height:23px"＞のタグと、
ページ左右に空白を入れる＜blockquote style="margin:0em 1em 0em 1em"＞のタグをほぼ全ページに使用しているのですが、このタグはドコモから見たら文字化けや反映されない等の原因になるのでしょうか？

iPhone、auのandroid、パソコンからは正常に動作確認済みです。
わかる方いらっしゃいましたら参考までに御指導いただけたら有難いです。

通報する

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

質問の本文を隠す

回答 (1件)

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

No.1

回答者： ORUKA1951
回答日時：2016/02/23 18:58

line-height:は継承されるプロパティだから、

Visual formatting model details - CSS 2.1 spec (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
body{line-height:1.6em;}
とか、<body style="line-height:1.6em">だけでよい。
＜blockquote>
は、その部分が引用であることを示すタグです。使い方が間違っている。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …
・・当然ですが、blockquoteをどうプレゼンテーションするかは、ブラウザが持っているスタイルシートによって異なる。

　HTMLは、文書の（意味的な）構造だけを正確に示して、スタイルシートはそれをどう表現するかを指定する。デザインのために<div>や<blockguote>を使ってはならない。
　divは『id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』ですから、例えば
<div class="header">
　この文書のヘッダ
</div>
<div class="section">本文
　<div class="section">
　　一つ下の項
　　<div class="aside">本部と直接関係ない記事</div>
　</div>
</div>
<div class="footer">
　この文書のフッタ
</div>
のようになるはず。HTML5では、『文書をよりよく構造化するために( http://standards.mitsue.co.jp/resources/w3c/TR/h … )』そんな小細工をせずに
<header>
　この文書のヘッダ
</header>
<section>本文
　<section>
　　一つ下の項
　　<aside>本部と直接関係ない記事</aside>
　</section>
</section>
<footer>
　この文書のフッタ
</footer>
となる。

それはさておき、
＞｢コンテンツには入れるが文章が読めない｣
　まずは、基本的にHTMLを正しく書くこと!!!
Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　でチェックすると文法的な間違いが指摘されます。
　個人ならともかく、多少なりとも公共性のあるサイトでしたら、まず正しいHTMLを書くこと。
HTMLは文書構造だけをマークアップするためでデザインはその段階では一切考えなくてよい。
Another HTML Lintでチェックし、間違いを直したら、その文書構造に従ってスタイルシートを書く。

＜div style="line-height:23px"＞
とか
＜blockquote style="margin:0em 1em 0em 1em"＞
ではなく
body{line-height:1.6em;}
/* こうしないとフォントサイズが変わったとき間隔が変わる。*/
body>div.header,body>div.section,body>div.footer{
margin:0 5%;
}
/* こうしないと、左右のマージンが変わってしまう。 */
通常は
body>div.header,body>div.section,body>div.footer{
width:90%;min-width:800px;max-width;1000px;
margin:0 auto;
}
とリキッドにしてタブレットやスマホでも利用て着るようにする。

それと、ガラケーや様々な端末で利用できるように各要素での指定はHTMLの属性で指定して、スタイルシートhead内や外部に回します。要素にstyle=""を書くと、優先順位が高くなりすぎてしまい。外から調整できなくなります。
　特に古いブラウザを考慮しなければならないときは配慮しないと