PHPとHTMLとSCSSだけで少し複雑な画像っぽい表を作る

 

お久しぶりです。ネイビーモバイルです。
お盆にお休みを私はいただきましたので、何か書きたいと思います。
ただいまネイビーモバイルでも製作中の複雑っぽい表を製作していますので近いものを掲載したいと思います。

先程の画像の様に左から右、下がって右から左とになる表を製作します。

デスクトップ画面


数字はこうなります。

 

スマホ画面


ちゃんと携帯サイズでレスポンシブで縦1列になるように書いていきます。

※今回はさっくり書いてあります。本番の製作ではもうちょっときれいに書きます。

html/php

<article>
<section class=”cont”>

<?php
$list = array();
$list[0][title] = ‘タイトル1’;
$list[0][text] = ‘テキストテキスト1’;
$list[0][img] = ‘img-1’;

$list[1][title] = ‘タイトル2’;
$list[1][text] = ‘テキストテキスト2’;
$list[1][img] = ‘img-2’;

$list[2][title] = ‘タイトル3’;
$list[2][text] = ‘テキストテキスト3’;
$list[2][img] = ‘img-3’;

$list[3][title] = ‘タイトル4’;
$list[3][text] = ‘テキストテキスト4’;
$list[3][img] = ‘img-4’;

$list[4][title] = ‘タイトル5’;
$list[4][text] = ‘テキストテキスト5’;
$list[4][img] = ‘img-5’;

$list[5][title] = ‘タイトル6’;
$list[5][text] = ‘テキストテキスト6’;
$list[5][img] = ‘img-6’;

$list[6][title] = ‘タイトル7’;
$list[6][text] = ‘テキストテキスト7’;
$list[6][img] = ‘img-7’;

$list[7][title] = ‘タイトル8’;
$list[7][text] = ‘テキストテキスト8’;
$list[7][img] = ‘img-8’;
?>

<article class=”row o-cell”>
<?php for($i = 0; $i < count($list); $i++): ?>
<section class=”col3 o-cell__section <?php echo ‘o-cell__section–‘ . $i; ?>”>
<div class=”bg-img  o-cell__body”>
<?php echo ‘o-cell-arrow–‘ . $i; ?>
<div class=”o-cell-arrow <?php echo ‘o-cell-arrow–‘ . $i; ?>”>

<!– Forward icon by Icons8 –>
<svg xmlns=”http://www.w3.org/2000/svg”; xmlns:xlink=”http://www.w3.org/1999/xlink”; version=”1.0″ x=”0px” y=”0px” viewBox=”0 0 512 512″ class=”icon icons8-Forward” ><path d=”M256 171V85l171 171-171 171v-86H85V171h171z”></path></svg>
</div>
<img class=”img” alt=”<?php echo $list[$i][title]; ?>” src=”img/test/<?php echo $list[$i][img]; ?>.jpg”;>
<h3 class=”h3-item”><?php echo $list[$i][title]; ?></h3>
<div class=”font-s”><?php echo $list[$i][text]; ?></div>
</div>
</section>

<?php endfor; ?>
</article>

</section>
</article>

scss

// --------------------
// コンテナ幅
// --------------------

.cont{
	width: 100%;
	max-width: 1280px;
	padding-left: 32px;
	padding-right: 32px;
	margin-left: auto;
	margin-right: auto;
}

// --------------------
// 文字
// --------------------

.h3-item{
  font-size: 20px;
  margin-top: 8px;
  margin-bottom: 16px;
}


.font-s{
  font-size: 14px;
}

// --------------------
// flex要素
// --------------------

.flex {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -16px;
}


.col3{
  width: 25%;
  min-width: 25%;
	padding: 0 16px 32px 16px;

  @media screen and (max-width: 480px){
    //480px以下で4並びを1並びにする
    display: block;
    width: 100%;
  }
}

// --------------------
// 表全体のカラー
// --------------------

.bg-img{
  background: #a8d2f1;
}

// --------------------
// 画像の幅指定
// --------------------
//表いっぱいに広げるため
.img{
	max-width: 100%;
	height: auto;
	display: block;
}


// --------------------
// ソリューションのマス
// --------------------
.o-cell{
  &__section{
    @media screen and (min-width: 480px){
    //480以上で下段4~7は右から左になり、480px以下で1列縦並びなので下段の順番通りに戻す。
      &--4{ order: 3; }
      &--5{ order: 2; }
      &--6{ order: 1; }
      &--7{ order: 0; }
    }
  }

  &__body{
    position: relative;
    padding: 18px;
  }
}


// --------------------
// 矢印
// --------------------

.o-cell-arrow{
  position: absolute;
  top: calc(50% - 18px);
  height: 36px;
  width: 36px;

  .icon{
    //iconpharm.comさんのhtml用SVGアイコン
    fill: #4b7fa5;
    display: block;
    height: inherit;
    width: inherit;
  }
}

.o-cell-arrow--0,
.o-cell-arrow--1,
.o-cell-arrow--2{
  right: -36px;
  @media screen and (max-width: 480px){
    top:inherit;
    right: calc(50% - 18px);
    bottom: -36px !important;
    transform: rotate(90deg);
  }
}

.o-cell-arrow--3{
  top: inherit;
  bottom: -36px;
  left: calc(50% - 18px);
  transform: rotate(90deg);
}

.o-cell-arrow--4,
.o-cell-arrow--5,
.o-cell-arrow--6{
  left: -36px;
  transform: rotate(180deg);

  @media screen and (max-width: 480px){
    top:inherit;
    left: calc(50% - 18px);
    bottom: -36px !important;
    transform: rotate(90deg);
  }
}

.o-cell-arrow--7{
  display: none;
}

あとがき

phpでカラムをループさせています。ナンバーもループで自動で取得できます。flexを使った表作りでorderで順番を替えています。

矢印のSVGアイコンはiconpharm

ネイビーモバイルより。