コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

トップ > モダンCSSでBENTOレイアウトを作ってみよう

モダンCSSでBENTOレイアウトを作ってみよう

Let’s Create a Bento Box Design Layout Using Modern CSS

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

弁当箱（🍱）は、様々な料理を整然と別々に整理する伝統的な日本のランチボックスです。学校に手作りの弁当を持っていくことは、受け取る人への愛情の表現です。料理の質だけでなく、料理の配置と提示における配慮は、その人があなたにとってどれだけ大切かを表しています。

この習慣と、このオブジェクトのミニマリストで、バランスが取れた、機能的なデザインにインスパイアされ、BENTOレイアウト（またはBENTOボックスレイアウト）と呼ばれるUX/UIデザインのトレンドが生まれました。このチュートリアルはこのデザインアプローチに焦点を当てています：米、にんじん、またはタコ型ソーセージの代わりに、現代のHTMLとCSSを材料として使用し、同じレベルのケアと愛情を込めて組み合わせます。

CSSでBENTOボックス：基本

実験のために、シンプルでありながら非常に一般的な基本構造から始めましょう：複数のsection要素を含むmain要素です。各セクションには複数のarticle要素が含まれ、それぞれにヘッダーとセマンティックなfigure要素でラップされた画像があります：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
    <title>🍱 Bento Box Design Layout with Modern CSS</title>
  </head>
  <body>
    <main>
      <section class="bento">
        <article>
          <header>
            <h2>Box 1</h2>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
          </header>
          <figure>
            <img src="./images/0.png" alt="AI-generated anime picture">
          </figure>
        </article>
        <!-- さらに7つのarticleがここに -->
      </section>
    </main>
  </body>
</html>

モバイルファーストのアプローチで基本をレスポンシブにするために、現代的なCSS（ベースライン）を使用します：

:root {
    font-family: system-ui, sans-serif;
    font-size: clamp(14px, 5vw, 20px);
    --dark-color: #5c6378ff;
    --light-color: #edf2f4ff;
    --background-color: #2b2d42ff;
    --secondary-color: #757e93ff;
    --antiflash-white: #edf2f4ff;
    --important-color: #ef233cff;
    --fire-engine-red: #d90429ff;
}

body {
    background-color: var(--background-color);
    color: var(--light-color);
    margin: 0;
}

article {
    background-color: var(--light-color);
    color: var(--dark-color);
    padding: 1rem;
    margin-bottom: 1rem;
}

article figure {
    margin: 0;
}

img {
    display: block;
    width: 100%;
}

main {
    width: 90%;
    max-width: 1200px;
    margin-inline: auto;
    padding-block-start: 2rem;
}

スタイルシートにいくつかの変更を加えることで、HTMLの要素はデフォルトでアクセス可能で完全に使用可能になります：CSSでは「少ないほど多い」のです 🍣。

グリッドレイアウトでBENTO

コンテナで構成されたモジュラーレイアウトのために、セクション要素のdisplayプロパティをgridに設定します。記事の位置と形をカスタマイズするために、柔軟性を高めるための追加設定を行います。

.bento {
    --bento-cols: 5;
    --bento-rows: 3;
    --bento-border-radius: 1rem;
    --bento-gap: 1rem;
    display: grid;
    grid-template-columns: repeat(var(--bento-cols), 1fr);
    grid-template-rows: repeat(var(--bento-rows), 1fr);
    width: 100%;
    aspect-ratio: var(--bento-cols) / var(--bento-rows);
}

.bento > * {
    overflow: hidden;
    position: relative;
    margin: calc(var(--bento-gap) / 2);
    border-radius: var(--bento-border-radius);
}

@media screen and (aspect-ratio < 1) {
    .bento {
        --bento-cols: 3;
        --bento-rows: 5;
    }
}

列と行の数を制御する変数を導入し、「弁当グリッド」を等しい部分に分割しました。aspect-ratioプロパティを使用することで、セルが完全に正方形になり、これが私たちの戦略の鍵です。

BENTOデザインをカスタマイズする

各要素が何個のセルにまたがるかを指定することで、弁当箱をパーソナライズしましょう。grid-columnまたはgrid-rowプロパティでspan値を使用することで、水平方向（2×1セル）、垂直方向（1×2セル）、大きな正方形（2×2セル）のモジュールを作成できます。

layout-1クラスで再利用可能なテンプレートを定義する方法は次のとおりです：

.bento.layout-1 > :nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
    background-color: var(--important-color);
    color: var(--light-color);
}

.bento.layout-1 > :nth-child(2) {
    grid-row: span 2;
    background-color: var(--secondary-color);
    color: var(--light-color);
}

.bento.layout-1 > :nth-child(n + 9) {
    display: none;
}

マイクロアニメーション

インターフェースを強化するために、微妙なマイクロアニメーションを追加します：

.bento > * {
    transition: transform 0.3s ease-out, filter 0.3s ease-out;
}

.bento > *:hover {
    transform: translateY(-0.5rem);
    filter: drop-shadow(0 0.5rem 0.1rem #0009);
}

結論

このチュートリアルでは、CSSを使用して現代的なBENTOボックスレイアウトを作成する方法を探りました。グリッドレイアウト、アスペクト比、コンテナクエリ、マイクロアニメーションを組み合わせることで、柔軟で、レスポンシブで、視覚的に魅力的なデザインを実現しました。このアプローチは、実際の弁当箱と同じくらい多用途で、秩序とバランスを維持しながら無限の組み合わせが可能です。

これらのアイデアを実験して、あなたの特別なBENTOに最適なレシピを見つけてください！ボナペティ！

©コハム