HTML,CSSにてブラウザでマンダラートを表示する際のフロントコーディングメモ

やりたいこと

• ブラウザでマンダラートを表示させたい。

実装

PHP

<?php
    $item = [];
    $item[] = 'Fruit';
    $item[] = 'apple';
    $item[] = 'banana';
    $item[] = 'orange';
    $item[] = 'lemon';
    $item[] = 'strawberry';
    $item[] = 'melon';
    $item[] = 'grape';
    $item[] = 'cherry';
    $item[] = 'peach';
?>

HTML

<div class="mandal">
    <div class="box cell"><center class="cell-inner"><?=$item[1]?></center></div>
    <div class="box cell"><center class="cell-inner"><?=$item[2]?></center></div>
    <div class="box cell"><center class="cell-inner"><?=$item[3]?></center></div>
    <div class="box cell"><center class="cell-inner"><?=$item[4]?></center></div>
    <div class="box cell-center"><center class="cell-inner"><?=$item[0]?></center></div>
    <div class="box cell"><center class="cell-inner" ><?=$item[5]?></center></div>
    <div class="box cell"><center class="cell-inner"><?=$item[6]?></center></div>
    <div class="box cell"><center class="cell-inner"><?=$item[7]?></center></div>
    <div class="box cell"><center class="cell-inner"><?=$item[8]?></center></div>
    <div class="clear"></div>
</div>

CSS

    div.mandal {
        width: 608px;
        height: 608px;
        border: 2px solid #999;
        padding-top: 2px;
        padding-left: 2px;
    }
    div.box:hover {
        background-color: white;
    }
    div.box {
        float: left;
        text-align: center;
        width: 200px;
        height: 200px;
        border: 1px solid #999;
    }
    div.cell-center {
        display:table;
        background-color: #fff;
    }
    div.cell {
        display:table;
        background-color: #efefef;
    }
    center.cell-inner {
        display:table-cell;
        vertical-align: middle;
    }
    div.clear {
        clear: both;
    }