人に聞けない痔の悩み、これでスッキリ >>

ホームページで時間に応じて2行のテキストを時計画像の上に表示したいのですが
以下のCSSを使った方法ではPCやアンドロイドではズレないで表示されます。
ただし親のiPhoneを借りて見ると
何故か文字位置が下の方にずれてしまい画像から文字がはみ出してしまいます。
ブラウザは標準ではいってるやつ(Safari?)です。

<div style="position: relative;">
<img src="hoge.jpg" width=250 height=46>
<div style="position:absolute; top:6px; left:20px;">
<table border=0 cellspacing=0 cellpadding=0>
<tr><td>この文章は</td></tr>
<tr><td>サンプルですよ</td></tr>
</table>
</div>
</div>

どうもiPhoneのSafariはフォントサイズを自動で調整する機能があるそうで
それを解除するために以下のCSSを追加してみました。
-webkit-text-size-adjust: none;

このCSSを追加するとフォントサイズは変えていなくても表示は小さくなり
位置ずれはマシにはなりました。
が、それでも行間が大きいためか画像からははみ出しています。
テーブル部分を2個に分離してそれぞれ位置を修正すれば、と思ったのですが
それだとSafari以外は詰まって表示されてしまいますよね・・・シクシク。

他のブラウザならともかくiPhoneの標準ブラウザなので何とか直したいです。
これを修正できる方法をご存知の方はおられますでしょうか?
画像の上に文字を表示できるのでしたら、
上記のCSSとはまったく別のものになっても構いません。

よろしくおねがいします。

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

A 回答 (1件)

 それが背景画像でしたら、背景で指定しましょう。

位置が時間によって変わるのでなければ背景をcoverで置けばよいです。
 tableを配置のために使用するのは禁止です。tableは表のマークアップ以外に使用すべきではありません。
 位置指定は、親になるコンテナブロックに対して相対的/絶対配置で指定すると良いでしょう。
 HTML要素のstyle属性で指定すると、詳細度が[1,0,0,0]となってしまって外部スタイルシートなどで調整できなくなります。CSS3のメディアクエリ(Media Queries)を使用して端末の幅に合わせてスタイルを切り替えることができなくなります。

<div class="TimeMessage">
 <p>この文章は、</p>
 <p>サンプルです</p>
</div>
div.TimeMessage{width:250px;height:46px;margin:0 auto;background:url(hoge.gif);}
div.TimeMessage p{font-size:14px;margin:0;line-height:20px;padding-left:20px;}

※折角、文書構造とプレゼンテーションの分離のためにスタイルシートを使うのですから、HTMLにはプレゼンテーションに関わることは一切記述したらダメです。tableが配置目的なら無論です。
 こうしておけば、スタイルシートを書き換えるだけで、背景をやめることも、すべてのページの<div class="TimeMessage">のデザインを変更できます。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
ほう・・・背景にしてしまうのですか、なるほど。
時計のフレームなので背景でも問題ないです。
CSSは個人サイトを運用する上で趣味の一環として始めたばかりなので
使い方のほうもとても参考になりました!
ありがとうございました。

お礼日時:2012/12/03 13:40

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

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

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

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

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。


人気Q&Aランキング