太陽系と同様、周期表も CSS で何度も作成されてきました…しかし、これから説明するように、これほど簡単に作成されたことはありません。

基本的なセマンティック マークアップから始めましょう:

    H
  

これは要素の順序付けされたシステムであるため、順序付きリスト、

を使用します。

各要素に

1. タグと タグができます。

   要素の名前は「abbreviation」という単語の略称で、かわいいです。
   — ヘイドン・ピッカリング。

   ここで、各元素の原子量をグーグル検索する代わりに、ChatGPT にマークアップの残りの部分を記入するよう依頼するだけです。また、要素がどの type であるかを示す 3 文字のクラスを各要素に追加するように依頼します。 「希ガス」(class="nbl") など — 118 個の要素が得られます:
   

   
       H
     
     
   
       He
     
     
   
       Li
     
    
     
   

   まだ見た目は良くありません。これは、要素の略語を含む単なる番号付きリストです。
   

   1. H
   2. He
   3. Li
   etc.
   

   リストを 18x10 のグリッドに変えてみましょう:
   

   ol {
     all: unset;
     container-type: inline-size;
     counter-reset: element;
     display: grid; 
     font-size: 2cqi;
     gap: 1px;
     grid-template-columns: repeat(18, 1fr);
     grid-template-rows: repeat(10, 1fr);
   }
   

   次に、各

2. を正方形のボックスに設定し、原子番号を左上に、質量 (データ質量) を右上に、 タグを下に配置する内部グリッドを作成します。 :
   

   li {
     aspect-ratio: 1 / 1;
     background: #EEEEEE;
     counter-increment: element;
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
     padding: .25ch;
     transition: scale .125s ease-in;
     &::before {
       content: counter(element);
     }
     &::after {
       content: attr(data-mass);
       grid-area: 1 / 2 / 2 / 2;
       justify-self: end;
     }
     &::before, &::after {
       font-size: .33em;
     }
   }
   

   私たちが何を達成したかを確認する前に、ChatGPT に、前に追加した「要素タイプ」クラスに色を追加するように依頼してみましょう。これで、

   が得られます。

   

   見た目は素晴らしいですが、学校で習った周期表とはまったく異なります。グリッドマジックを追加してみましょう。

   ヘリウムの場合は、最後の列にプッシュする必要があります。グリッドの幅が 18 列であることがわかっているため、単純に次を追加します:
   

   li {
     &:nth-of-type(2) { grid-column: 18; }
   }
   

   これは 順序付きリスト であるため、n 番目の型の値は常に各要素の原子番号に対応します。 ボロン と アルミニウム を列 13:
   に移動します。

   li {
     &:nth-of-type(5), &:nth-of-type(13) { grid-column: 13; }
   

   チェックしてみましょう:

   

   確かに改善ですが、グリッド列はグリッドを前に押し出すだけなので、要素 58 ～ 71 と 90 ～ 103 (ラテニドとアクチニド) を完全に グリッド フローから外すにはどうすればよいですか をメイン グリッドの下の 2 行に追加しますか?

   そのために、次のように定義するグリッドエリアを使用できます:

   行の先頭 / 列の先頭 / 行の末尾 / 列の末尾

   私たちの場合、それは次のようになります:
   

   li {
      /* Lanthenides */
     &:nth-of-type(58) { grid-area: 9 / 4 / 9/ 4; }
     &:nth-of-type(59) { grid-area: 9 / 5 / 9/ 5; }
     &:nth-of-type(60) { grid-area: 9 / 6 / 9/ 6; }
     /* etc. */
   
     /* Actinides */
     &:nth-of-type(90) { grid-area: 10 / 4 / 10 / 4; }
     &:nth-of-type(91) { grid-area: 10 / 5 / 10 / 5; }
     &:nth-of-type(92) { grid-area: 10 / 6 / 10 / 6; }
     / etc. */
   }
   

   そして今は次のようになります(わかりやすくするために、Dev Toolsのグリッドビジュアライザを有効にしました):

   

   フローから移動した要素の 後 がどのようにメイン フローに継続されるかに注目してください。

   ---

   フィルタリング

   さて、以前に ChatGPT に生成させたこれらの「元素タイプ」クラスを使用して、周期表を フィルタリング しましょう。

   まず、基本的な HTML を追加しましょう:
   

   Filter

   Alkali Metals

   次に、chatGPT に残りを入力してもらい、ID なしの「すべて」オプションを追加します。

   

   フィルタリングするには大量の JavaScript が必要ですよね?いいえ、これはプレーンな CSS で行うことができます:
   

   body:has(#alk:checked) li:not(.alk) { 
     opacity: 0.2;
   }
   

   ロジックは次のように機能します。本文に id="alk" のチェックボックスが含まれており、それがチェックされている場合、スタイルは、にないすべての

3. 要素に適用されます。アルコールクラス。

   すべてのタイプとクラスに対して繰り返します。

   「メタロイド」をクリックしましょう:

   

   それはなんてクールですか?

   ---

   これでこのチュートリアルは終了です…しかし待ってください…そのハイゼンベルク フィルターは何をするのでしょうか? ChatGPT のフィルターのリストにありませんでしたか?

   クリックしましょう:

   

   …これで、私の史上最も好きなテレビ番組がわかりました!

   デモ

   これが Codepen です。完全にレスポンシブですが、大きな画面で表示することをお勧めします: