CSSグリッドで会議スケジュールを構築します

新しいテクノロジーを巧みに使用していることの達成感は比類のないものです！さまざまな入門ガイドを読んで、クールなデモンストレーションに感謝するのは良いことですが、自分のプロジェクトで実際にそれらを使用している場合にのみ、その本質を本当に理解できます。

会議スケジュールの柔軟なレイアウトを構築する過程で、CSSグリッドの新たな理解を得ました。プロジェクトのさまざまな要件は、グリッドの利点、つまり2次元（垂直および水平）レイアウト、および子要素の複雑な位置付けに完全に沿っています。概念実証を構築する過程で、コードを非常に読みやすく、非常に興味深い使用にするためのいくつかのトリックを発見しました。

最終的なデモには、いくつかの興味深いCSSグリッド機能が含まれており、日常の開発ではあまり遭遇しないグリッドの詳細を掘り下げることを余儀なくされました。

開始する前に、別のタブを開き、CSS-TricksのCSSグリッドガイドを参照して、いつでもテキストに関係する概念を確認することをお勧めします。

レイアウト要件定義

私は、WordCampに触発された次のレイアウトを作成しようとしました。毎年世界中でWordPressをテーマにした会議を何百ものカンファレンスにしました。これらのアクティビティはサイズとフォームが異なりますが、すべて同じスケジュールレイアウトツールを使用しています。

WordCampの手配を何度か手に入れ、WordCampのWebサイトを設計したので、既存のHTMLテーブルレイアウトの欠点を理解しています。スケジュールが統一グリッドに準拠していない場合、...¯\ _（ツ）_/¯

より良いアプローチを見つけるために、最初にレイアウト要件をリストしました。

• 可変長さの会議（設定された時間刻みに限定）
  同時に3つの部屋に1時間の講義があり、他の部屋で2時間のセミナーがあることを想像してください。
• 1つ以上の「トラック」を横切る会議トラックは、多くの場合、会場の特定の部屋に関連付けられています。ワードキャンプがシアトルで懸念している限り、会場は2つの部屋をマージするために壁で取り壊すことができます！
• スケジュールには、自由時間を含めることができます
  土壇場でのキャンセルまたは超短い会議は、スケジュールの余地を残します。
• CSSでカスタマイズできるように設計されています
  WordCamp Webサイトでは、CSSを介したテーマ設定のみが許可されています。
• レイアウトは、CMSコンテンツに基づいて自動的に生成できます
  数千のウェブサイトで構造化された会議データに基づいてレイアウトを構築しているため、過度に賢いまたはカスタマイズされたHTMLまたはCSSに頼ることはできません。

開始：安定したHTML

CSSを書く前に、私は常に固体HTMLから始めます。

トップレベル<div> <code>.scheduleクラスがあり、メッシュ親要素として機能します。それぞれのユニークな開始時間には、独自のタイトルがあり、その後、その時点で始まるすべての会議が続きます。各会議のマーキングは重要ではありませんが、会議がいつどこにあるかを知るためにレイアウトを見る必要がないことを確認してください。 （後で理由を理解するでしょう。）

<h2 id="会議のスケジュール">会議のスケジュール</h2>
<div class="schedule">

  <h3 id="午前-時">午前8時</h3>
  <div class="session session-1">
    <h4 id="a-href-https-www-php-cn-link-ac-c-dd-dc-b-e-fe-c-e-b-会議のトピック-a"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">会議のトピック</a></h4>
    午前8時 - 午前9時
    トラック1
    スピーカーの名前</div>


  <h3 id="午前-時">午前9時</h3>
  <div class="session session-2">
    <h4 id="a-href-https-www-php-cn-link-ac-c-dd-dc-b-e-fe-c-e-b-会議のトピック-a"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">会議のトピック</a></h4>
    午前9時 - 午前10時
    トラック1
    スピーカーの名前</div>




</div>

モバイルレイアウトとグリッドフォールバックが完了しました！

独自のCSSをいくつか追加してページを美化し、CSSグリッドブラウザーなしでモバイルレイアウトとフォールバックが完了しました！

これが私が使用している色を使用しているように見えるものです：

グリッドレイアウトを追加します

今が実際のCSSグリッドパーツです！

建設プロセス中の私のインスピレーションの瞬間は、CSS-Tricksに関するロビンの記事「CSSグリッドを使用したバーチャートを作成してください」を読んだことから来ました。要するに、グリッドの行はチャートの高さの1％を表しているため、バーがスパンする行の数は、それが表す割合と同じです。

 .chart {
  ディスプレイ：グリッド;
  グリッドテンプレート列：繰り返し（100、1FR）; /* 1行= 1％！ */
}

.fifty-percent-bar {
  グリッドロー：51 /101; / * 101-51 = 50 => 50％ */
}

これにより、グリッドは、ある種のルールインクリメンタルユニットに関連するレイアウトに最適であることがわかりました。スケジュールの場合、ユニットは時間です！このデモでは、30分間の増分を使用しますが、ニーズに合わせて調整できます。 （Chromeのバグに注意してください。グリッドレイアウトを1000行に制限します。）

私が試した最初のバージョンでは、同様の構文といくつかの基本的な数学を使用して、ロビンに似たバーチャートに会議を入れます。午前8時から午後12時までに8つの30分の増分があるため、8行を使用します。暗黙のグリッドライン番号は1（0ではなく）から始まるため、グリッドラインには1から9に番号が付けられていることを忘れないでください。

 。スケジュール {
  ディスプレイ：グリッド;
  グリッドテンプレート列：繰り返し（8、1Fr）;
}

.session-1 {
  グリッドロー：1/3; /* 8：00-9：00 am、3-1 = 2 30分刻み*/
}

.session-2 {
  グリッドロー：3/6; /* 9：00-10：30 am、6-3 = 3 30分刻み*/
}

この手法の欠点は、多くの行でグリッドにアイテムを置くことは非常に抽象的で混乱することです。 （この質問は、ロビンのバーチャートのデモにも多くの複雑さを追加します。）

これは、グリッドラインという名前が登場する場所です！グリッドライン番号に依存する代わりに、各ラインに対応する時間に応じて予測可能な名前を付けることができます。

 。スケジュール {
  ディスプレイ：グリッド;
  グリッドテンプレート列：
    [TIME-0800] 1FR
    [Time-0830] 1FR
    [TIME-0900] 1FR
    [Time-0930] 1FR;
    /*など...
        注：24時間の時間をライン名*/
}

.session-1 {
  グリッドロー：TIME-0800 / TIME-0900;
}

.session-2 {
  グリッドロー：TIME-0900 / TIME-1030;
}

これはとても理解しやすいです。会議が開始または終了する前または終了後の行数を決定する複雑な数学計算は必要ありません。さらに良いことに、WordPressに保存されている情報を使用して、グリッドライン名を生成し、レイアウトスタイルを満たすことができます。グリッドに開始時間と終了時間を追加すると、大丈夫です！

スケジュールには複数のトラックがあるため、各トラックの列を設定する必要があります。トラックは、各グリッドラインの名前のトラックラインを使用して、時間と同様に機能します。開始時間タイトルの追加の最初の列もあります。

 .schedule { / *続き * /
  Grid-Template-Columns：
    [時間] 4em
    [トラック1-スタート] 1FR
    [トラック1エンドトラック2-スタート] 1FR
    [トラック2エンドトラック-3-Start] 1FR
    [トラック3エンドトラック-4-Start] 1FR
    [トラック4エンド];
}

しかし、ここでは、命名グリッドラインをさらに一歩進めます。各行は2つの名前を取得します。それが開始するトラックを示すトラックと、終了を示すトラックです。これは厳密に必要ではありませんが、特に会議が複数の列にまたがる場合、コードをより明確にします。

時間とトラックベースのグリッドラインが定義されたら、会議の時間と追跡を知る必要があります。

 .session-8 {
  グリッドロー：Time-1030 / Time-1100;
  Grid-Column：Track-2-Start / Track-3-End; /* 2つのトラックを越えます！ */
}

これらすべてをまとめると、使用するのが非常に快適な長いが非常に読みやすいコードがいくつかあります。

 @media画面と（min-width：700px）{
  。スケジュール {
    ディスプレイ：グリッド;
    グリッドギャップ：1EM;
    グリッドテンプレート列：
      [トラック] Auto /*予言！ */
      [TIME-0800] 1FR
      [Time-0830] 1FR
      [TIME-0900] 1FR
      [Time-0930] 1FR
      [TIME-1000] 1FR
      [Time-1030] 1FR
      [Time-1100] 1FR
      [Time-1130] 1FR
      [TIME-1200] 1FR;
    Grid-Template-Columns：
      [時間] 4em
      [トラック1-スタート] 1FR
      [トラック1エンドトラック2-スタート] 1FR
      [トラック2エンドトラック-3-Start] 1FR
      [トラック3エンドトラック-4-Start] 1FR
      [トラック4エンド];
  }

  .time-slot {
    Grid-Column：Times;
  }
}

<div style="grid-column: track-1; grid-row: time-0800 / time-0900;">

</div>
<div style="grid-column: track-2; grid-row: time-0800 / time-0900">

</div>

最終コードでは、会議の配置にインラインスタイルを使用しています。これを行うのが好きではなく、より最新のブラウザを使用している場合は、CSS変数を介して行名をCSSに渡すことができます。

簡単な説明：FRユニットと自動値を使用して、ラインの高さを設定します

注目に値する詳細の1つは、行の高さを定義するためのFRユニットを使用することです。

1FRを使用して行の高さを決定する場合、すべての行の高さが同じです。この高さは、スケジュールの最高の列の内容によって決まります。 （これを理解するためにFRに関するW3C仕様を読む必要がありました！）これは、時間に比例するが、非常に高いレイアウトにつながる可能性のある素晴らしいスケジュールを生成します。

たとえば、スケジュールグリッドが午前7時から午後6時まで15分の増分を使用している場合、合計48のグリッド行があります。この場合、各グリッド行の高さがそのコンテンツによって決定されるため、スケジューリングの高さがよりコンパクトになるため、自動を行の高さとして使用することをお勧めします。

補助機能に関する文

一部のCSSグリッドテクノロジーには、アクセシビリティの懸念があります。具体的には、ソース順序と一致しない方法で情報の順序を視覚的に変更する能力は、キーボードナビゲーションを使用している人に問題を引き起こす可能性があります。

このレイアウトはこの機能を使用してグリッドにアイテムを任意に配置するため、注意が必要です。ただし、タイトルとソースの順序は開始時間の視覚化と一致するため、これは安全な方法であるように思えます。

似たようなことをしたい場合は、アクセシビリティ機能について慎重に考えてください。この場合、情報を年代順に配置することは理にかなっていますが、タブの順序が水平ではなく下向きである正当なケースを想像できます。 （これを行うためにこのデモを変更することはそれほど難しくないはずです！）

あなたが何をするにしても、常にアクセシビリティを考慮してください。

スティッキートラック名を追加します

最後に、各列の上部にテーブルタイトルのように見えるトラック名を追加する時が来ました。カンファレンストラックはすでに表示されているため、 aria-hidden="true"を使用してAssistiveテクノロジーの「タイトル」を隠すことにしました。

トラック名は最初の行グリッドにあり、「トラック」と名付けられた便利な名前です。奇妙なオーバーフローの問題がない限り、 position: stickyスクロール中にこれらの名前を表示します。

トラック1
トラック2
トラック3
トラック4

 .track-slot {
  表示：なし; /*グリッドレイアウトを使用する場合にのみ表示されます*/
}

@supports（display：grid）{
  @media画面と（min-width：700px）{    
    .track-slot {
      グリッドロー：トラック;
      表示：ブロック;
      位置：粘着性;
      上：0;
      z-index：1000;
      背景色：RGBA（255,255,255、.9）;
    }
  }
}

これは、最終プレゼンテーションの巧妙な仕上げです。 ✨

結果

これが、私たちがまとめたすべての後のように見えるように紹介したものです！

始めたばかりです

このスケジュールは間違いなく私が今までに作った中で最も満足のいくCSSグリッドアプリです。私はその「データ駆動型」とセマンティックの行の命名が好きで、アクセシビリティとCMSの要件は不便なく完全に一致しています。

私にとって残っている唯一の質問は、他の種類の「データ駆動型」メッシュを構築できることです。優れたカレンダーレイアウトと独占ボードのレイアウトを見ました。では、サッカースタジアム、タイムライン、ダイニングテーブル、劇場席はどうですか？ほかに何か？