こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

2列ずつの横並びのレイアウトについて

コンテンツを並べるレイアウトについて質問をお願い致します。

2列ずつに写真とテキストを並べるレイアウトを作りたいと考えていますが次の3つの条件を満たしたいです。

1.コンテンツの数は今後増える可能性があり、コンテンツが奇数の場合最後のコンテンツは左の列に配置したいです。
2.説明テキストの行数は一定ではなくコンテンツごとに変わりますが、その場合でも高さのズレを起こしたくないです。
3.スマートフォン(480px以下)で閲覧した場合は、2カラムレイアウトから1カラムレイアウトに切り替えて、1列で表示をさせたいです。

この3つの条件を満たせるcssの方法はありますでしょうか。

現在はFlexboxを使用していますが、もしFlexbox以外で同じレイアウトが可能であるか知りたいと思い質問させていただきました。
よろしくお願い致します。

参考URL:http://muko.hiho.jp/shoshin/

投稿日時 - 2017-10-15 11:59:27

QNo.9386068

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

1.と、2.は、nbmt345さんが掲示したURLのソースコードとCSSを参考に作れば良いでしょう。

3.は、
https://syncer.jp/how-to-create-responsive-web-design

レスポンシブにするには、
まず、ビューポート(viewport)を<head>~</head>に
<meta name="viewport" content="width=device-width,initial-scale=1">
を入れておきます。

次にメディアクエリを設定します。
/* ウィンドウ幅が0~480pxの場合に適用するCSS */
@media screen and ( max-width:480px )
{
.○○ {
display: block;/* 2カラムから1カラムに変える */
}
}

このようにすることでスマホに対応させることができます。

投稿日時 - 2017-10-15 20:39:25