- 締切済み
2列ずつの横並びのレイアウトについて
コンテンツを並べるレイアウトについて質問をお願い致します。 2列ずつに写真とテキストを並べるレイアウトを作りたいと考えていますが次の3つの条件を満たしたいです。 1．コンテンツの数は今後増える可能性があり、コンテンツが奇数の場合最後のコンテンツは左の列に配置したいです。 2．説明テキストの行数は一定ではなくコンテンツごとに変わりますが、その場合でも高さのズレを起こしたくないです。 3．スマートフォン（480px以下）で閲覧した場合は、2カラムレイアウトから1カラムレイアウトに切り替えて、1列で表示をさせたいです。 この3つの条件を満たせるcssの方法はありますでしょうか。 現在はFlexboxを使用していますが、もしFlexbox以外で同じレイアウトが可能であるか知りたいと思い質問させていただきました。 よろしくお願い致します。 参考URL：http://muko.hiho.jp/shoshin/
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- amaryllis_watch
- ベストアンサー率57% (4/7)
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カラムに変える */ } } ↑ このようにすることでスマホに対応させることができます。
