人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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
でご覧いただけます。

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


●質問者: kohhi
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● a-kuma3
●150ポイント ベストアンサー
@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 以上あるんじゃないかと思います。


kohhiさんのコメント
さっそくお返事ありがとうございます。 僕の説明が悪かったですね。 参考サイトのHTMLとCSSをコピペすると(=http://1811way.com/work008/sample001.txt) http://1811way.com/work008/hatena01.png の、赤も字文字「スクリーンのサイズが480px以下」の縦長のようになってしまいます、 という事です。 お手数おかけしてすいません。 よろしくお願いします。

rouge_2008さんのコメント
DOCTYPE宣言がないのが原因みたいです。 他のHTML要素に指定した場合はしっかりlist-itemの表示になるのですが、table関連ではなぜか見た目が変更になりませんでした。 Webkit系のブラウザの仕様(?)かもしれません。 Windowsなのでバージョンは古いのですが、Safariでも同じでした。 HTMLファイルにDOCTYPE宣言の記述を追加してみてください。

a-kuma3さんのコメント
なるほど、DOCTYPE 宣言ですか。 IE も meta で X-UA-Compatible を指定しないと、動きが怪しいですもんね。

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

kohhiさんのコメント
ありがとうございました。できました。

2 ● ラフティング
●50ポイント

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


kohhiさんのコメント
Chrome使ってます。

ラフティングさんのコメント
@media only screen and (max-width:480px)●スペースを入れてみてください●{
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ