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

あとがき

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

矢印のSVGアイコンはiconpharm

ネイビーモバイルより。