[返信する]
スマートフォンからのレイアウト表示について
By ゆき
2011-04-25 17:01:42
検索をかけてみたのですが、引っかからなかったので質問させて頂きます。
ご回答頂れば幸いです。

サイトをつくった所、ＰＣ・携帯では綺麗に表示されているのですが、スマートフォンの方からは「左詰め。一行が七文字程度」になっているようです。
どこがおかしいのかわからず困っています。
よろしくお願いいたします。


▼HEAD内

<style type="text/css"><!--

a:link { color:#000000; }
a:visited { color: #666666; }
a:hover { color: #333333; text-decoration: none; cursor: help; }
a:active { color: #cccccc; }

body,td {font-color:#000000 ; font-family:'Century Gothic,Osaka' ;line-height:115%; }

input,textarea { color:#ffffff;
background-color:#000000;
border:solid 1px #000000; }


body{scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#000000;
scrollbar-darkshadow-color:#000000;
scrollbar-face-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-shadow-color:#ffffff;
scrollbar-track-color:#000000; }

body{line-height : 115%; letter-spacing : 0.1em; }

<noimode>table {width: <pc>40%</pc><nopc>95%</nopc>;
height: auto;
border: 1px #ffffff solid;}

td, th {padding: <pc>6px</pc><nopc>4px</nopc> 4px ; </noimode>--></style>


▼レイアウト内

<br /><div style="text-align:center" align="center"><table<mobile> widht="95%"</mobile>><tr><td><font size="2"><nopc><blockquote style="margin:0px 8px 0px 7px;"></nopc><font size="3">サイト名</font>

子ページのリンクが三つほど


Thanks <a href=ＵＲＬ></a> / <a href=ＵＲＬ></a> / <a href=ＵＲＬ></a>


<nopc></blockquote></nopc></font></td></tr></table></div>
pc
[編集]
By 通
2011-04-26 14:18:24
気になったところだけ書きます。

<noimode>table {width: <pc>40%</pc><nopc>95%</nopc>;
height: auto;
border: 1px #ffffff solid;}
ここではスマホを分けていないですよね。なのでPCと同じくwidth40%になると思います。
そしてレイアウトで
<table<mobile> widht="95%"</mobile>>
スペルが間違っているので95%は無効になり、スマホは40%のままです。

もう一つ、HEADの終わりに書かれている、
td, th {padding: <pc>6px</pc><nopc>4px</nopc> 4px ; </noimode>--></style>
これに　}　がありません。

左詰めの理由は分かりません。
pc
[編集]
By ゆき
2011-04-26 16:14:27
ありがとうございます。
自分でも改良してみたいと思います

pc
[編集]
By 匿名
2011-04-26 16:22:42
通さんに追加して補足を失礼します。
スペルを修正しても、属性指定よりはstyle要素のCSSが優先されるので、40%になるのは変わりません。

DOCTYPEが空欄の場合、スマホにはHTML5の宣言が自動出力されます。
そのため<div style="text-align:center" align="center">は文字の中央寄せであり、テーブルの中央寄せにはなりません。

同じく自動出力される文書型宣言の影響で、docomo機種には<!--と-->の間にあるCSSが反映しません。（理由は「css コメントアウト」で検索してください）

これはご存知の上かもしれませんが。
blockquote(引用文)やtable(表)は余白を作るためのタグではありません。
CSSを使われるのなら、divなどでやるほうがいいと思いますよ。
pc
[編集]
[1-10表示]
[返信する]
[新規トピ]
[戻る]
無料HPエムペ！