Scss @each周期表

eachで周期表を作る

htmlは極力シンプルに設定

cssの手打ちでは凄まじい労力を使うところを、JS等の配列+繰り返し処理のノリでスタイル情報を格納・格納できる

室温での状態
  • 固体
  • 液体
  • 気体
分類
  • アルカリ金属
  • アルカリ土類金属
  • 遷移元素
  • 卑金属
  • 半金属
  • 非金属元素
  • ハロゲン
  • 希ガス
  • ランタノイド
  • アクチノイド
  1. 水素
  2. ヘリウム
  3. リチウム
  4. ベリリウム
  5. ホウ素
  6. 炭素
  7. 窒素
  8. 酸素
  9. フッ素
  10. ネオン
  11. ナトリウム
  12. マグネシウム
  13. アルミニウム
  14. ケイ素
  15. リン
  16. 硫黄
  17. 塩素
  18. アルゴン
  19. カリウム
  20. カルシウム
  21. スカンジウム
  22. チタン
  23. バナジウム
  24. クロム
  25. マンガン
  26. コバルト
  27. ニッケル
  28. 亜鉛
  29. ガリウム
  30. ゲルマニウム
  31. ヒ素
  32. セレン
  33. 臭素
  34. クリプトン
  35. ルビジウム
  36. ストロンチウム
  37. イットリウム
  38. ジルコニウム
  39. ニオブ
  40. モリブデン
  41. テクネチウム
  42. ルテニウム
  43. ロジウム
  44. パラジウム
  45. カドミウム
  46. インジウム
  47. スズ
  48. アンチモン
  49. テルル
  50. ヨウ素
  51. キセノン
  52. セシウム
  53. バリウム
  54. ランタン
  55. セリウム
  56. プラセオジム
  57. ネオジム
  58. プロメチウム
  59. サマリウム
  60. ユウロピウム
  61. ガドリニウム
  62. テルビウム
  63. ジスプロシウム
  64. ホルミウム
  65. エルビウム
  66. ツリウム
  67. イッテルビウム
  68. ルテチウム
  69. ハフニウム
  70. タンタルス
  71. タングステン
  72. レニウム
  73. オスミウム
  74. イリジウム
  75. 白金
  76. 水銀
  77. タリウム
  78. ビスマス
  79. ポロニウム
  80. アスタチン
  81. ラドン
  82. フランシウム
  83. ラジウム
  84. アクチニウム
  85. トリウム
  86. プロトアクチニウム
  87. ウラン
  88. ネプツニウム
  89. プルトニウム
  90. アメリシウム
  91. キュリウム
  92. バークリウム
  93. カリホルニウム
  94. アインスタイニウム
  95. フェルミウム
  96. メンデレビウム
  97. ノーベリウム
  98. ローレンシウム
  99. ラザホージウム
  100. ドブニウム
  101. シーボーギウム
  102. ボーリウム
  103. ハッシウム
  104. マイトネリウム
  105. ダームスタチウム
  106. レントゲニウム
  107. コペルニシウム
  108. ウンウントリウム
  109. フレロビウム
  110. ウンウンペンチウム
  111. リバモリウム
  112. ウンウンセプチウム
  113. ウンウンオクチウム