レスポンシブな会議スケジュール テンプレート: CSS グリッドに基づく複数の場所のタイムライン デザイン

この記事では、CSS グリッドを使用して構築されたレスポンシブな会議スケジュール ソリューションを紹介します。このソリューションは、デスクトップ (タイムラインは垂直、場所は水平に配置) とモバイル (場所は垂直、タイムラインは水平、水平にスクロール可能) 間のデュアルモード切り替えをサポートし、列間/行間をまたぐ「休憩期間」ブロック レイアウトをネイティブにサポートします。

この記事では、CSS グリッドを使用して構築されたレスポンシブな会議スケジュール ソリューションを紹介します。このソリューションは、デスクトップ (タイムラインは垂直、場所は水平に配置) とモバイル (場所は垂直、タイムラインは水平、水平にスクロール可能) 間のデュアルモード切り替えをサポートし、列間/行間をまたぐ「休憩期間」ブロック レイアウトをネイティブにサポートします。

複数の会場や期間で会議やイベントを開催する場合、複数のデバイスに適応できる明確で柔軟なスケジュール視覚化ソリューションが重要です。

• など) には 2 次元空間制御機能がありません。 CSS グリッドは、明示的な行と列の定義と範囲の結合機能を備えており、このような動的なスケジュールの構築に最適です。

  以下は、次のコア ロジックを備えた実稼働対応の合理化されたテンプレートです。

  • グリッド領域を使用して、グリッド内の各ブロックの開始行と終了行と列を正確に定義します。
  • @media クエリを使用して、横向き (デスクトップ) レイアウトと縦向き (モバイル) レイアウトを区別し、向きに依存しないようにします (この属性はデスクトップ ブラウザーでは信頼できません)。
  • モバイル端末で水平スクロール (overflow-x: auto) を有効にして、狭い画面でも完全なコンテンツが表示されるようにします。
  • すべてのブロックはセマンティック ID を使用し、アクセシビリティ ラベルをサポートします (後で aria-label と role="region" を追加することをお勧めします)。

  ✅ 完全な HTML CSS サンプル

  
  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width、initial-scale=1.0">
    <title>会議のスケジュール</title>
    
      * { ボックス サイズ: ボーダー ボックス; }
      体 {
        マージン: 0;
        フォントファミリー: -apple-system、BlinkMacSystemFont、「Segoe UI」、Roboto、サンセリフ;
        行の高さ: 1.5;
      }
  
      #タイムテーブル {
        表示: グリッド;
        幅: 100vw;
        最小高さ: 100vh;
        パディング: 1レム;
        ギャップ: 0.75rem;
        /* デフォルトはモバイル レイアウトです: 左側に位置、上部に時間が表示されます*/
        グリッドテンプレート行:repeat(3, 1fr); /* 3 つの場所の行*/
        グリッド テンプレート列: 8remrepeat(12, 1fr); /* 最初の列は場所、最後の 12 列は時間スロット (30 分ごとに 1 グリッドなど) */
        オーバーフロー-x: 自動;
        スクロール動作: スムーズ;
      }
  
      /* デスクトップ: 時間を左に、場所を上に変更します*/
      @media (最小幅: 768px) {
        #タイムテーブル {
          グリッドテンプレート行: 3remrepeat(12, 1fr); /* 最初の行は時間のタイトル、最後の 12 行は時間帯です*/
          グリッド テンプレート列: 6remrepeat(3, 1fr); /* 最初の列は時刻、最後の 3 列は場所です*/
          オーバーフロー-x: 表示されます。
        }
      }
  
      /* パブリックスタイル*/
      .slot {
        パディング: 0.75rem;
        境界半径: 0.375rem;
        カラー: #333;
        フォントの太さ: 500;
        ホワイトスペース: 通常;
        オーバーフロー: 非表示;
        テキストオーバーフロー: 省略記号;
        ディスプレイ: フレックス;
        フレックス方向: 列;
        コンテンツの位置揃え: 中央;
        align-items: flex-start;
      }
  
      .スロット時間、.スロット場所 {
        背景色: #f1f5f9;
        フォントサイズ: 0.875rem;
        フォントの太さ: 600;
        色: #475569;
        ディスプレイ: フレックス;
        整列項目: 中央;
        コンテンツの位置揃え: 中央;
      }
  
      /* サンプル ブロック - 必要に応じて実際のデータに置き換えることができます*/
      #location-a { グリッドエリア: 2 / 1 / 3 / 2;背景色: #e0f2fe; }
      #location-b { グリッドエリア: 3 / 1 / 4 / 2;背景色: #dbeafe; }
      #location-c { グリッドエリア: 4 / 1 / 5 / 2;背景色: #f0fdf4; }
  
      #time-0900 { グリッド領域: 1 / 2 / 2 / 3;背景色: #f1f5f9; }
      #time-0930 { グリッド領域: 1 / 3 / 2 / 4;背景色: #f1f5f9; }
      #time-1000 { グリッド領域: 1 / 4 / 2 / 5;背景色: #f1f5f9; }
  
      #talk-1 { グリッドエリア: 2 / 2 / 3 / 4;背景色: #bfdbfe; }
      #talk-2 { グリッド領域: 3 / 3 / 4 / 5;背景色: #c7d2fe; }
      #lunch { グリッドエリア: 2 / 4 / 4 / 5;背景色: #fcd34d; } /* 2 つの場所にまたがる*/
      #keynote { グリッド領域: 2 / 5 / 5 / 6;背景色: #a78bfa; } /* 3 つの場所にまたがる*/
  
      /*デスクトップの移動*/
      @media (最小幅: 768px) {
        #location-a { グリッドエリア: 1 / 2 / 2 / 3;背景色: #e0f2fe; }
        #location-b { グリッドエリア: 1 / 3 / 2 / 4;背景色: #dbeafe; }
        #location-c { グリッドエリア: 1 / 4 / 2 / 5;背景色: #f0fdf4; }
  
        #time-0900 { グリッド領域: 2 / 1 / 3 / 2;背景色: #f1f5f9; }
        #time-0930 { グリッド領域: 3 / 1 / 4 / 2;背景色: #f1f5f9; }
        #time-1000 { グリッド領域: 4 / 1 / 5 / 2;背景色: #f1f5f9; }
  
        #talk-1 { グリッドエリア: 2 / 2 / 3 / 3;背景色: #bfdbfe; }
        #talk-2 { グリッド領域: 3 / 3 / 4 / 4;背景色: #c7d2fe; }
        #lunch { グリッドエリア: 2 / 4 / 4 / 5;背景色: #fcd34d; } /* 2 つのタイムスロットにまたがる*/
        #keynote { グリッド領域: 2 / 2 / 5 / 5;背景色: #a78bfa; } /* 3 つのタイムスロットと 3 つの場所にまたがる → 実際にはエリア全体を埋める*/
      }
    スタイル&gt;
  
  
    <div id="時刻表">
      <!-- 場所のタイトル (モバイルでは最初の列) -->
      <div id="location-a" class="slot slot-location">メイン会場 A</div>
      <div id="location-b" class="slot slot-location">支店会場 B</div>
      <div id="location-c" class="slot slot-location">オンライン会議室 C</div>
  
      <!-- 時間のタイトル (モバイルでは一番上の行) -->
      <div id="time-0900" class="slot スロットタイム">09:00</div>
      <div id="time-0930" class="slot スロットタイム">09:30</div>
      <div id="time-1000" class="slot スロットタイム">10:00</div>
      <div id="time-1030" class="slot スロットタイム">10:30</div>
      <div id="time-1100" class="slot スロットタイム">11:00</div>
  
      <!--アクティビティブロック-->
      <div id="talk-1" class="slot">基調講演: 今後の動向</div>
      <div id="talk-2" class="slot">ラウンドテーブル ディスカッション: 技術実践</div>
      <div id="lunch" class="slot">ランチとネットワーキング</div>
      <div id="keynote" class="slot">重厚な基調講演</div>
    </div>
  

以上がレスポンシブな会議スケジュール テンプレート: CSS グリッドに基づく複数の場所のタイムライン デザインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。