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

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

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

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

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

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

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

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

また、スマブラ公式はキャラクター画像は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の各種プロパティについてまとめました！横並びや縦並びなどを柔軟に設定できるため、レスポンシブデザインにも向いている非常に便利なプロパティです。

kinocolog.com

もう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タグでキャラクターを表示させることで、より変更が加えやすくなりました。

完成デザインはこちら

んほ～

なんか思ったよりそれっぽくファイターの一員っぽくなったので満足です。

PCで見ている方は、ブラウザの横幅を狭くすると1行リストに切り替わるのでお試しください。

ただ、画像を用意するのと適切な位置に調整するのが思ったより面倒くさいので、今のところ使う予定はありません。

各スマブラサイトの運営様はよかったら使ってやってください。

以上、スマブラ風キャラクターリストを再現するWEBデザイン、でした。