Q&A
ターゲットはどんな感じですかね。
ブラウザとかもバージョンによってはアドバイス方法変わってくるので。
いつも勉強させて頂いております。
サイト制作時のレイアウトの配置についての質問です。
コーポレートサイトなどでもよくある下記画像のようなデザインの場合
色々な実装の仕方があるかと思います。
この場合どのようにhtml、cssを書くのが正しいのでしょうか？
私が思いつくのはリストにしfloatさせてそれぞれを配置するという方法ですが、
より適している方法を教えてください。
よろしくお願い致します。
会社のサービス案内などで使用するようなページを想定しています。
対応ブラウザ、対応バージョンとか、あとPCなのかスマートフォン対応なのかを知りたいっす。
対応ブラウザは主流の４つ（IE、chorome、safari、firefox）で動けば問題ありません。スマホは対応です。
なるほどっす！あざっす！
回答2件
0
ベストアンサー
そっすね、対応ブラウザが一般的なものすべて、バージョン指定特になし、なら、
float: left;とclearfixをつかっていけると思います。
ただ、リストにする必要はないと思うので、普通にdivで良いかもしれないすよ。
全体のマージン、パディングに気をつけて最大幅をはみ出ないようにしてみてください。
ちなみにこの方法は一世代前のレガシーなcssになりますが、古いブラウザも対応となるとこの方法が一番安全ですね。
同じレガシーの手法を説明してる本として、こちらが参考になるかもしれません。
投稿2016/03/23 06:41
総合スコア765
補足
コーポレートサイトのトップページみたいなのをイメージしてたんですが、いわゆるメディアリストとよばれる、画像＋タイトル＋説明文がワンセットになったものの羅列ってことでしたら、リストにした方がよいですね。
すいません、しっかり質問内容読んでなかったかも。ぺこり。
メディアリストってわけではないですが、たまたま同じ配置になったということです。
説明の中身も写真の中身も固定なのでfloatで作ってみようと思います。ありがとうございました。
ラジャっす！
(´・ω・｀)丿
0
好みによると思いますが、「説明」にはテキストが入るだろうと思いますので、高さが流動的になるかと思います。
floatは高さが違う要素を上手く配置できませんからjavascriptのお世話になると思います。
また、display:tableは流れで行を変えさせるのが難しいので、レスポンシブ対応で疲れそう。
そういうわけで私なら、inline-block、flexのどちらかで配置をするかなー、と思いました。IE9を捨てないならinline-blockかと。
投稿2016/03/23 07:51
総合スコア36074
あなたの回答
tips
プレビュー
