現在ホームページを開設しているのですが、先日ドコモ端末をお使いの訪問者様から「サイトの中身が見れない」というお問い合わせをいただきました。
見れないというのは「コンテンツには入れるが文章が読めない」ということらしいのですが、原因がわかりません。
考えられるのは、行間に空白を入れる<div style="line-height:23px">のタグと、
ページ左右に空白を入れる<blockquote style="margin:0em 1em 0em 1em">のタグをほぼ全ページに使用しているのですが、このタグはドコモから見たら文字化けや反映されない等の原因になるのでしょうか?
iPhone、auのandroid、パソコンからは正常に動作確認済みです。
わかる方いらっしゃいましたら参考までに御指導いただけたら有難いです。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
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=""を書くと、優先順位が高くなりすぎてしまい。外から調整できなくなります。
特に古いブラウザを考慮しなければならないときは配慮しないと
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- その他(プログラミング・Web制作) ワードプレスのプラグインであるAddQuicktagを使いたいが… 3 2022/04/18 15:03
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- ヤフオク! ヤフオクの利用制限について 4 2023/08/07 23:17
- その他(学校・勉強) この中で間違ってある説明はありますか?詳しい方に教えていただきたいです。 A. 1つのプログラムが複 2 2023/07/14 01:15
- HTML・CSS HPに文章で改行はすべてBRタグとかで改行しなきゃだめなのですか?改行が活きたまま書く方法ないの? 1 2022/12/03 21:00
- PHP if(preg_match("/[^0-9]/",$gu_d)){意味を教えてください。 1 2022/05/06 05:37
- Ameba(アメーバブログ) アメブロは、HTMLのタグの入力を許さないブログ・サイトですか? 1 2023/06/18 18:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
<!DOCTYPE html>あってますか?↑
-
メモ帳の段落の揃え方
-
Duolingo のソースコードの名前...
-
HTMLを正しく表示させるには
-
ウェブサイトにアップされてい...
-
、URL化させるにはどうしたらい...
-
テーブルの行を折りたたみたい...
-
角丸画像の背景色を透明にした...
-
詐欺メールがまた来ました。5月...
-
スマホでHTMLファイルを開いて...
-
goo は、放置?
-
CSS、Bootstrapについて contai...
-
htmlソース文の 各行 改行位置...
-
静止画画像をクリックすると音...
-
コードを書いて下さい( ; ; )...
-
CSSデータの作成方法について(...
-
css初心者 フレックスボックス...
-
URLにアクセスした際に指定した...
-
トリミングで表示した画像をク...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルのセルデータを自動改...
-
goo は、放置?
-
htmlソース文の 各行 改行位置...
-
1つの「ホームページビルダー2...
-
HPレイアウトが同じページのヘ...
-
CSS、Bootstrapについて contai...
-
CSSについて教えてください。 ...
-
静止画画像をクリックすると音...
-
、URL化させるにはどうしたらい...
-
テーブルの行を折りたたみたい...
-
css初心者 フレックスボックス...
-
WEBページを強制的に横画面で見...
-
Webページのリンクの貼り方を教...
-
Duolingo のソースコードの名前...
-
メモ帳の段落の揃え方
-
スマホ(android)のタッチパネ...
-
コードを書いて下さい( ; ; )...
-
HTMLで画像をポップアップで表...
-
角丸画像の背景色を透明にした...
おすすめ情報