リスト要素の項目を横並びにする（ウィンドウ幅に応じて項目の幅を変える方法）

リスト要素の項目を横並びにする で、ウィンドウ幅に応じて項目の幅（列数）を変える方法。

具体的には、スマートフォンでは２列、タブレットでは３列、パソコンでは５列表示にする場合、以下のように指定する。

デモページを表示

CSS

補足

• CSS の個別定義で、ウィンドウ幅ごとに、メディアクエリを使って li 要素の幅（列数）を指定する。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

関連投稿

• リスト要素の項目を横並びにする