汎用性のあるCSS（カラム、一覧での最後のmargin処理）

Sponser Link

カラムの基本

See the Pen
カラム（レスポンシブ） by studio-0 (@studio-0)
on CodePen.

HTML

<h2>1カラム固定</h2>
<div class="c-col--1">
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
</div>


<h2>2カラム固定</h2>

<div class="c-col--1to2">
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
</div>

<h2>3カラム固定</h2>
<div class="c-col--3">
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
</div>

<h2>2カラム(PC)→3カラム(SP)</h2>
<div class="c-col--3to2">
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
</div>

<h2>3カラム(PC)→1カラム(SP)</h2>
<div class="c-col--1to3">
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
</div>


<h2>3カラム(PC)→2カラム(SP)</h2>
<div class="c-col--2to3">
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
</div>


<h2>4カラム(PC)→1カラム(SP)</h2>
<div class="c-col--1to4">
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
</div>

<h2>4カラム(PC)→2カラム(SP)</h2>
<div class="c-col--2to4">
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
</div>


<h2>4カラム(PC)→3カラム(SP)</h2>
<div class="c-col--3to4">
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
</div>

<h2>4カラム(PC)→2カラム(TB)→2カラム(SP)</h2>
<div class="c-col--2to2to4">
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
</div>

<h2>5カラム(PC)→3カラム(TB)→2カラム(SP)</h2>
<div class="c-col--2to3to5">
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
</div>

<h2>6カラム(PC)→3カラム(TB)→2カラム(SP)</h2>
<div class="c-col--2to3to6">
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
</div>

<h2>6カラム(PC)→3カラム(SP)</h2>
<div class="c-col--3to6">
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ullam!</div>
</div>

CSS

.c-col--1 {
  list-style: none;
  display: flex;
  flex-wrap: wrap;

  & > * {
    width: 100%;
  }

  & > * img {
    max-width: 100%;
  }

  & > * + * {
    margin-top: 10px;
  }
}

.c-col--2 > *,
.c-col--1to2 > *,
.c-col--3to2 > * {
  width: calc(50% - 10px);
}

.c-col--3 > *,
.c-col--1to3 > *,
.c-col--2to3 > * {
  width: calc(33.3% - 10px);
}

.c-col--1to4 > *,
.c-col--2to4 > *,
.c-col--3to4 > *,
.c-col--2to2to4 > * {
  width: calc(25% - 10px);
}

.c-col--3to6 > *,
.c-col--2to3to6 > * {
  width: calc(16.6% - 10px);
}

.c-col--2,
.c-col--1to2,
.c-col--3to2,
.c-col--3,
.c-col--1to3,
.c-col--2to3,
.c-col--2to4,
.c-col--3to4,
.c-col--1to4,
.c-col--2to2to4,
.c-col--2to3to5,
.c-col--3to6,
.c-col--2to3to6 {
  display: flex;
  flex-wrap: wrap;
  margin-top: -10px;
  margin-left: -10px;
  list-style: none;

  & > * {
    display: flex;
    margin-top: 10px;
    margin-left: 10px;
    box-sizing: border-box;
  }

  & a {
    width: 100%;
  }

  & img {
    max-width: 100%;
  }
}

@media (--mq-tb) {
  .c-col--2to2to4 > * {
    width: calc(50% - 10px);
  }

  .c-col--2to3to5 > *,
  .c-col--2to3to6 > * {
    width: calc(33.3% - 10px);
  }

  .c-col--1to4,
  .c-col--campaign {
    flex-direction: row;

    & > * {
      width: calc(50% - 10px);
    }
  }
}

@media (--mq-sp) {
  .c-col--1to2,
  .c-col--1to3 {
    flex-direction: column;

    & > * {
      width: calc(100% - 10px);
    }
  }

  .c-col--2to3 > *,
  .c-col--2to4 > *,
  .c-col--2to3to5 > *,
  .c-col--2to3to6 > * {
    width: calc(50% - 10px);
  }

  .c-col--3to2 > *,
  .c-col--3to4 > *,
  .c-col--3to6 > * {
    width: calc(33.3% - 10px);
  }
}

Sponser Link

リストの最初にボーダーをつける

リストの１行目は、、、（-n+Xは最初からX番目まで）

.column-1>.p_item-unit:nth-child(-n+1),
.column-2>.p_item-unit:nth-child(-n+2), 
.column-3>.p_item-unit:nth-child(-n+3), 
.column-4>.p_item-unit:nth-child(-n+4), 
.column-5>.p_item-unit:nth-child(-n+5) {
    margin-top: 0;
}

Sponser Link

PC、SPの出し分け

HTML

<img class="u-is-pc" src="../img/forPc.png" alt="パソコン用の画像">
<img class="u-is-sp" src="../img/forSp.png" alt="スマートフォン用の画像">

CSS

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.u-si-pc { display: block !important; }
.u-si-sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .u-is-pc { display: none !important; }
    .u-si-p { display: block !important; }
}

Sponser Link

画像のPC、SPの出し分け書き方

HTML

<picture>
  <source media="(max-width: 960px)" srcset="img/mdimg.png">/* ９６０px以下 */
  <source media="(max-width: 560px)" srcset="img/spimg.png">/* ５６０px以下 */
  <img src="img/pcimg.png" alt="画像">/* 960px以上 */
</picture>

Sponser Link

カラムの基本

HTML

CSS

リストの最初にボーダーをつける

PC、SPの出し分け

HTML

CSS

画像のPC、SPの出し分け書き方

HTML

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル