kazuki.m

Appearance

sumnail

レスポンシブな2カラム構成と3カラム構成サンプル

created at : 2024/05/17

CSS

基本の画面構成 ​

2カラム構成のレスポンシブデザインサンプル ​

基本的なサイドメニューとメインカラムの2カラム構成
例） slackとか

ブラウザ表示ではサイドメニューとメインの2カラムで表示し、ディスプレイサイズがタブレットくらいになったら 1カラム表示を基本とするパターン（サイドメニューはハンバーガーメニューになったりする）

Menu

  • menu 1
  • menu 2
  • menu 3

Title

sampel description...

3カラム構成のレスポンシブデザインサンプル ​

メニューや関連記事、目次などを表示するサイドバーでメインカラムを挟んだ3カラム構成
例）ブログ、ドキュメントサイト

3カラムの場合は、2段階に分けて表示変更する（ことが多い）
最初に右側のサイドメニューを非表示にし、次にモバイルサイズくらいになったら2カラム同様に1カラム表示になる

Menu

  • menu 1
  • menu 2
  • menu 3

Title

sampel description...

ToC

  • # 1
  • # 2
  • # 3

1カラム構成 ​

コンテンツやHPなど請求したい内容を表示したい場合は1カラム構成
（＊個人の感想ですが、余白や文字、イメージの配置バランスが難しい）

サンプルコード ​

最後に記事にある2カラム構成、3カラム構成のサンプルコードを掲載します。

vue
<template>
  <div class="grid">
    <!-- 1カラム -->
    <div class="side-bar common-shape">
      <h3>Menu</h3>
      <ul>
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
      </ul>
    </div>
    <!-- 1カラム -->
    <div class="main common-shape">
      <h3>Title</h3>
      <p>sampel description...</p>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.grid {
  gap: 15px;
  display: grid;
  /* grid　縦フレームの割合 */
  grid-template-columns: 1fr 3fr;
}
.main {
background: #faa;
}
.side-bar {
background: #fae;
}
.common-shape {
padding: 0px 15px;
border-radius: 10px
}

/* サイズによる表示変更 */
@media (600px <= width <= 1024px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .side-bar {
    display: none;
  }
}
</style>
vue
<template>
  <div class="grid">
    <!-- 1カラム -->
    <div class="side-bar common-shape">
      <h3>Menu</h3>
      <ul>
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
      </ul>
    </div>
    <!-- 1カラム -->
    <div class="main common-shape">
      <h3>Title</h3>
      <p>sampel description...</p>
    </div>
    <!-- 1カラム -->
    <div class="aside-bar common-shape">
      <h3>ToC</h3>
      <ul>
        <li># 1</li>
        <li># 2</li>
        <li># 3</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.grid {
  gap: 15px;
  display: grid;
  /* grid　縦フレームの割合 */
  grid-template-columns: 1fr 3fr 1fr;
}
.main {
  background: #faa;
}
.side-bar {
  background: #fae;
}
.aside-bar {
  background: #fac;
}
.common-shape {
padding: 0px 15px;
border-radius: 10px
}

/* サイズによる表示変更 */
@media (600px <= width <= 1024px) {
  .grid {
    grid-template-columns: 1fr 3fr;
  }
  .aside-bar {
    display: none;
  }
}

@media (width <= 600px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .side-bar {
    display: none;
  }
  .aside-bar {
    display: none;
  }
}
</style>