段組み(column-count)を使って崩れないレスポンシブなカラムを作る

リストタグでレスポンシブなカラムを作る

レスポンシブウェブデザインで、あるブロックをPC&Tablettなら2カラムや3カラム、スマホなら1カラムにするということがよくありますが、column-count を使うと幅を自動で決めてくれるのでとても便利です。

リストタグで作る場合はこんな感じになります。

  • リスト1つ目
  • リスト2つ目
  • リスト3つ目

分割をコントロールする

この時、リストの内容にバラツキがあると、下の例のように予期せぬところでボックスが分割されてしまうことがあります。

  • リスト1つ目
  • リスト2つ目:Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  • リスト3つ目

これを回避するには、break-inside: avoid; を指定します。

リストタグで作る場合は、<ul> に column-count を指定し、<li>break-inside: avoid; を指定します。

 

以下が指定した例です。

  • リスト1つ目
  • リスト2つ目:Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  • リスト3つ目:Lorem Ipsum is simply dummy text of the printing and typesetting industry.

 

HTML&CSS

これのHTMLとCSSはこんな感じです。

HTML

<ul class="three-column">
 	<li>リスト1つ目</li>
 	<li>リスト2つ目</li>
 	<li>リスト3つ目</li>
</ul>

CSS

.three-column {
  list-style: none;
  column-count: 1;/*スマホの時は1カラム*/
  padding: 1rem 0;
}

@media screen and (min-width:768px) {/*PC&Tablettの時*/
  .three-column {
    column-count: 3;/*3カラム*/
  }
  .three-column li {
    display: inline-block;
    break-inside: avoid;
  }
}

SASS(SCSS)でもっと便利に

Sassで書くともっと使いやすくなります。

// カラム分割
@mixin column-set($column-count:3){
  list-style: none;
  column-count: 1;
  padding: 1rem 0;
    @include pc{
      column-count: $column-count;
      li{
        display: inline-block;
        break-inside: avoid;
      }
    }	
}
// 2カラム
.two-column{
  @include column-set(2);
}
// 3カラム
.three-column{
  @include column-set;
}

カラムの数は適宜変えられるように引数にしているので、とっても便利。

 

尚、@include pc は以下のように指定してあります。私はタブレットとPCは同じ画面で良いと思っているので、基本的にはひとまとめにしています。

$pc: 768px; // タブレット・PC

@mixin pc {
  @media (min-width: ($pc)) {
    @content;
  }
}

 

以上です。

誰かの役に立つかな?

 

制作者近影

制作者 : 樋口 美徳(ひぐち みのり)
Webデザイナー・グラフィックデザイナー・イラストレーター
美大卒業後インターネット黎明期に独学でWebサイト制作を学び、1999年より日本の会社でデザイナーとして2008年まで勤務。勤務中2007年にドイツ・ベルリンへ移住し、以後フリーランスとして働いています。
夫と長女(大学生)、長男(高専生)の日本人4人家族でドイツ生活絶賛サバイバル中です。

制作者の紹介へ制作実績へお問い合わせ