スマブラ風キャラクターリストを再現するWEBデザイン【HTML+CSS】

スマブラの公式サイトで見れるキャラクターリストって、かっこいいですよね。

選ばれしファイターがここに集まってるオールスター感をヒシヒシと感じる、格式あるデザインに仕上がっていると思います。

ただ、このデザインを自作しちゃえば、俺もそのオールスターの一員になれるのでは？

という、小学生並の発想が止まらなかったので、今回はスマブラ公式サイト風リストデザインについて解説していきます。

スマブラ公式サイト風キャラクターリストデザインの定義
スマブラ風リストボックスデザイン
- CSS
- HTML
完成デザインはこちら

スマブラ公式サイト風キャラクターリストデザインの定義

画像を改めて見直すと、以下のルールのもと作れば多分スマブラっぽくなると判断しました。

黒い背景
白い文字
横長の長方形ボックス（横は可変・縦は固定）
キャラクター名の前に連番を振る
右にキャラクターの画像を張る
メインの部分だけ表示し、外回りは隠れているとオシャレ度ＵＰ

というかなり適当な定義でやっていこうと思います。

また、スマブラ公式はキャラクター画像はbackgroundのCSSプロパティを使用し、画像もリストボックス専用のものが用意されていました。

同じやり方を真似ると、まず下準備が死ぬほど大変な上に、backgroundは張り替えがめんどいので、imgタグで再現することにします。

スマブラ風リストボックスデザイン

CSS

.smashlist{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    counter-reset: number 0;
}

.smashlist > a{
    position: relative;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    width: 50%;
    height: 80px;
    align-self: center;
    text-decoration: none;
    overflow: hidden;
    background-color: #000;
    color: #FFF;
    font-weight: bold;
    font-size: 20px;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    z-index: 1;
}

.smashlist > a:nth-child(2n){
    border-right: none;
}

.smashlist > a:before{
    counter-increment: number 1;
    content: counter(number, decimal-leading-zero);
    padding-right: 5px;
}

.smashlist > a > img{
    position: absolute;
    height: auto;
    /* 以下、画像サイズや種類によって要調整 */
    right: 5%;
    top: 50%;
    transform: translateY(-37%);
    width: 150px;
}
    
@media screen and (max-width: 768px){
    /* スマホは1行で表示に変更 */
    .smashlist{
        flex-direction: row;
        -webkit-flex-direction: row;
    }
    .smashlist > a{
        width: 100%;
        border-right: none;
    }
}

黒い背景、白いボックスのデザインです。

ボックスはflexboxで作成します。

最近display:flexを使うようになったのですがめちゃめちゃ便利です。
(便利すぎて記事も書いたよ)

CSSのdisplay:flexとは？サンプルコードで解説

CSSのflexboxの各種プロパティについてまとめました！横並びや縦並びなどを柔軟に設定できるため、レスポンシブデザインにも向いている非常に便利なプロパティです。

もうfloatとかclearfixとかしなくてよいと思うと晴れやかな気持ちになります。

それはさておき、flexの便利なところは、横並びが縦並びかをプロパティ1つ「flex-direction」で切り替えできるところ。

横幅がせまいデバイスでは、flex-direction: rowにすることで、レスポンシブにリストを切り替えられます。

また、キャラクターの連番数字は、content: counterを使用することで、自動的に要素に01,02と挿入され修正しやすいです。

HTML

自分のアイコンはともかく、肝心のキャラクターたちのほとんどはイラストやさんから賄いました。

<div class="smashlist">
    <a href="#">
        のちょう
        <img src="https://kinocolog.com/wp-content/uploads/2019/06/kinococo-300x227.png">
    </a>
    <a href="#">
        うしお
        <img src="https://kinocolog.com/wp-content/uploads/2019/07/ushio.png">
    </a>
    <a href="#">
        かいしゃいん
        <img src="https://kinocolog.com/wp-content/uploads/2019/05/shinsyakaijin_run_man2.png">
    </a>
    <a href="#">
        ねこ
        <img src="https://kinocolog.com/wp-content/uploads/2019/06/animal_quiz_neko_maru.png">
    </a>
    <a href="#">
        りんご
        <img src="https://kinocolog.com/wp-content/uploads/2019/07/apple.png">
    </a>
    <a href="#">
        神
        <img src="https://kinocolog.com/wp-content/uploads/2019/07/shinwa_zeus.png">
    </a>
    <a href="#">
        ゴーレム
        <img src="https://kinocolog.com/wp-content/uploads/2019/07/fantasy_golem.png">
    </a>
    <a href="#">
        堕天使
        <img src="https://kinocolog.com/wp-content/uploads/2019/07/character_tenshi_angel_datenshi.png">
    </a>
    <a href="#">
        ワイバーン
        <img src="https://kinocolog.com/wp-content/uploads/2019/07/fantasy_dragon_wyvern.png">
    </a>
    <a href="#">
        クトゥルフ
        <img src="https://kinocolog.com/wp-content/uploads/2019/07/character_cthulhu_kuturufu.png">
    </a>
</div>

cssで、aタグをブロック要素にしましたので、クリックすることでページを飛ばすこともできます。

リンクにしないなら、divとかに置き換えても良いでしょう。（cssの再設定が必要です）

また、backgroundプロパティではなく、imgタグでキャラクターを表示させることで、より変更が加えやすくなりました。