2020年10月30日金曜日

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

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

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

デモページを表示

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 個別定義 */
 
/* for スマートフォン */
@media screen and (min-width:0) {       /* ウィンドウ幅が 0px 以上の場合*/
  #container ul[data-flex-wrap] > li {
    width: 50%;      /* ２列表示 */
  }
}
 
/* for タブレット */
@media screen and (min-width:640px) {    /* ウィンドウ幅が 640px 以上の場合 */
  #container ul[data-flex-wrap] > li {
    width: 33.3%;    /* ３列表示 */
  }
}
 
/* for PC */
@media screen and (min-width:960px) {    /* ウィンドウ幅が 960px 以上の場合 */
  #container ul[data-flex-wrap] > li {
    width: 20%;      /* ５列表示 */
  }
}
補足
  • CSS の個別定義で、ウィンドウ幅ごとに、メディアクエリを使って li 要素の幅（列数）を指定する。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

関連投稿

ラベル: , ,
⬆