お久しぶりです。ネイビーモバイルです。
お盆にお休みを私はいただきましたので、何か書きたいと思います。
ただいまネイビーモバイルでも製作中の複雑っぽい表を製作していますので近いものを掲載したいと思います。
先程の画像の様に左から右、下がって右から左とになる表を製作します。
デスクトップ画面
数字はこうなります。
スマホ画面
ちゃんと携帯サイズでレスポンシブで縦１列になるように書いていきます。
※今回はさっくり書いてあります。本番の製作ではもうちょっときれいに書きます。
html/php
<article>
<section class=”cont”>
<?php
$list = array();
$list[0][title] = ‘タイトル１’;
$list[0][text] = ‘テキストテキスト１’;
$list[0][img] = ‘img-1’;
$list[1][title] = ‘タイトル２’;
$list[1][text] = ‘テキストテキスト２’;
$list[1][img] = ‘img-2’;
$list[2][title] = ‘タイトル３’;
$list[2][text] = ‘テキストテキスト３’;
$list[2][img] = ‘img-3’;
$list[3][title] = ‘タイトル４’;
$list[3][text] = ‘テキストテキスト４’;
$list[3][img] = ‘img-4’;
$list[4][title] = ‘タイトル５’;
$list[4][text] = ‘テキストテキスト５’;
$list[4][img] = ‘img-5’;
$list[5][title] = ‘タイトル６’;
$list[5][text] = ‘テキストテキスト６’;
$list[5][img] = ‘img-6’;
$list[6][title] = ‘タイトル７’;
$list[6][text] = ‘テキストテキスト７’;
$list[6][img] = ‘img-7’;
$list[7][title] = ‘タイトル８’;
$list[7][text] = ‘テキストテキスト８’;
$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以下で４並びを１並びにする
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以下で１列縦並びなので下段の順番通りに戻す。
&--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様
ネイビーモバイルより。
