質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1680閲覧

CSSのiphoneへの反映

aquz5200

総合スコア16

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2015/09/11 02:46

テーブルレイアウトについて教えて下さい。
下記のCSSでスマホの場合は@media***以下(縦組)を表示されるようにしたいのですが、うまく表示されません。PC上のブラウザテストでは問題ないのですが、何か良い方法はありませんでしょうか?
ちなみにテスト端末はiPhone5sです。

@charset "UTF-8";
/* CSS Document */
section table { width: 100%; }
section th, section td { padding: 10px; border: 1px solid #ddd; }
section th { background: #f4f4f4; }

/----------------------------------------------------
.demo01
----------------------------------------------------
/
.demo01 { margin: 0 -10px; width: 100%; }
.demo01 th {
width: auto;
text-align: center;
background:-moz-linear-gradient(rgba(34,85,136,0.3), rgba(34,85,136,0.5) 50%);
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.3)), to(rgba(34,85,136,0.5)));
}
.demo01 td {
width: auto;
text-align: center;
background:-moz-linear-gradient(rgba(34,85,136,0.1), rgba(34,85,136,0.3) 50%);
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.1)), to(rgba(34,85,136,0.3)));
}

@media only screen and (max-width:680px){
.demo01 { margin: 0 -10px; width: 100%; }
.demo01 th{
width: 100%;
display: block;
border-top: none;
text-align: center;
background:-moz-linear-gradient(rgba(34,85,136,0.3), rgba(34,85,136,0.5) 50%);
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.3)), to(rgba(34,85,136,0.5)));

} .demo01 td{ width: 100%; display: block; border-top: none; text-align: center; background:-moz-linear-gradient(rgba(34,85,136,0.1), rgba(34,85,136,0.3) 50%); background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.1)), to(rgba(34,85,136,0.3))); } .demo01 tr:first-child th { border-top: 1px solid #ddd; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

私の場合ですが、PCも含めてしているので

@media screen and (min-width: 1024px) {
...
}
@media screen and (min-width: 569px) and (max-width: 1023px){
...
}
@media screen and (min-width: 321px) and (max-width: 568px) {
...
}
@media screen and (max-width: 320px) {
...
}

としています。

後、ヘッダーに

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0" />

viewport を追加しているでしょうか?

投稿2015/09/14 03:38

zoro

総合スコア32

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問