display: list-item; が列になってしまう


このサイトを参考にして
http://c-brains.jp/blog/wsg/14/08/05-195003.php
tableレイアウトのデザインをレスポンシブにしようとしています。

tdタグを
display: list-item;
にしていると思うのですが、
tdタグが行にならないで列になってしまいます。
下記をご覧ください。
http://1811way.com/work008/test001.html

ソース(test001.html と mystyle001.css)は
http://1811way.com/work008/sample001.txt
でご覧いただけます。

どこが悪いかご指摘ください。
よろしくお願いします。

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2015/04/11 22:10:54
  • 終了:2015/04/13 21:46:04

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4595ベストアンサー獲得回数19342015/04/11 22:28:01

ポイント150pt
@media only screen and (max-width:480px){
    ...
    td {
        display: list-item;
        width: 90%;
        margin-left: 20px;
        border:none;
    }
    ...
}

max-width:480px でくくっているからです。
これは、スクリーンのサイズが 480px 以下のときに、括った CSS が有効になる、という指定です。
試しに、ブラウザのウィンドウの幅を小さくしてみてください。
きちんと、行方向に表示されます。

常に、行方向に表示させたいのであれば、この指定を取っ払ってください。
閉じる方の中括弧も削除するのをお忘れなく。

/* @media only screen and (max-width:480px){ */
    ...
    td {
        display: list-item;
        width: 90%;
        margin-left: 20px;
        border:none;
    }
    ...
/* } */
/*
    分かりやすいようにコメントアウトしましたが、削除しちゃって構いません。
 */


displayプロパティを使ってレスポンシブウェブデザインのtableレイアウトを変化させてみる
...
(1)の状態から(2)の状態へデザインを変化させます。
メディアクエリ―を使ってブレイクポイント(480px)を設定し、その中に上書きするCSSを書いていきます。

displayプロパティを使ってレスポンシブウェブデザインのtableレイアウトを変化させてみる | バシャログ。

幅が 480px 以下のスマホなどでスタイルを切り替える、ってことです。



追記です。

あ、言ってることが分かったような気がします。
「スマホで見たのに、縦に並ばないじゃない」ってことでしょうか。

今どきのスマホって、ディスプレイのサイズは小さいですけど、解像度は PC のディスプレイと比べて遜色がありません。
以下のようなサイトやベンダーのサイトで、ご自分のスマホの解像度を調べてみてください。
http://www.find-job.net/startup/iphone-android-size-2013-summer

きっと、縦に見ても幅が 480px 以上あるんじゃないかと思います。

他3件のコメントを見る
id:rouge_2008

適当なページで開発ツールを使って試した時は動作するので、しばらく首をかしげていました。
IEは確認していませんが、各種ブラウザに対応させるのって大変ですね・・・

2015/04/13 21:07:36
id:kohhi

ありがとうございました。できました。

2015/04/13 21:45:29

その他の回答(1件)

id:a-kuma3 No.1

a-kuma3回答回数4595ベストアンサー獲得回数19342015/04/11 22:28:01ここでベストアンサー

ポイント150pt
@media only screen and (max-width:480px){
    ...
    td {
        display: list-item;
        width: 90%;
        margin-left: 20px;
        border:none;
    }
    ...
}

max-width:480px でくくっているからです。
これは、スクリーンのサイズが 480px 以下のときに、括った CSS が有効になる、という指定です。
試しに、ブラウザのウィンドウの幅を小さくしてみてください。
きちんと、行方向に表示されます。

常に、行方向に表示させたいのであれば、この指定を取っ払ってください。
閉じる方の中括弧も削除するのをお忘れなく。

/* @media only screen and (max-width:480px){ */
    ...
    td {
        display: list-item;
        width: 90%;
        margin-left: 20px;
        border:none;
    }
    ...
/* } */
/*
    分かりやすいようにコメントアウトしましたが、削除しちゃって構いません。
 */


displayプロパティを使ってレスポンシブウェブデザインのtableレイアウトを変化させてみる
...
(1)の状態から(2)の状態へデザインを変化させます。
メディアクエリ―を使ってブレイクポイント(480px)を設定し、その中に上書きするCSSを書いていきます。

displayプロパティを使ってレスポンシブウェブデザインのtableレイアウトを変化させてみる | バシャログ。

幅が 480px 以下のスマホなどでスタイルを切り替える、ってことです。



追記です。

あ、言ってることが分かったような気がします。
「スマホで見たのに、縦に並ばないじゃない」ってことでしょうか。

今どきのスマホって、ディスプレイのサイズは小さいですけど、解像度は PC のディスプレイと比べて遜色がありません。
以下のようなサイトやベンダーのサイトで、ご自分のスマホの解像度を調べてみてください。
http://www.find-job.net/startup/iphone-android-size-2013-summer

きっと、縦に見ても幅が 480px 以上あるんじゃないかと思います。

他3件のコメントを見る
id:rouge_2008

適当なページで開発ツールを使って試した時は動作するので、しばらく首をかしげていました。
IEは確認していませんが、各種ブラウザに対応させるのって大変ですね・・・

2015/04/13 21:07:36
id:kohhi

ありがとうございました。できました。

2015/04/13 21:45:29
id:rafting No.2

ラフティング回答回数2652ベストアンサー獲得回数1762015/04/12 07:14:03

ポイント50pt

もしかしてブラウザはIEを使っていませんか?
IEは別対応が必要です。

id:kohhi

Chrome使ってます。

2015/04/12 08:59:02
id:rafting

@media only screen and (max-width:480px)●スペースを入れてみてください●{

2015/04/12 09:17:37
  • id:rouge_2008
    kohhiさん、はてなメッセージの確認をお願いします。
    a-kuma3さんからこの質問の件で私にポイント送信がありましたので・・・
  • id:kohhi
    ouge_2008さん、確認しました。DOCTYPE宣言、教えていただいたんですね。ありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません