【ITニュース解説】🎯 CSSBattle September 2 Puzzle – My Solution

今回のニュース記事は、CSS（Cascading Style Sheets）を使って特定の図形を作り出す「CSSBattle」というパズルに挑戦し、その解決策を共有する内容だ。システムエンジニアを目指す初心者にとって、Webページの見た目を制御するCSSの奥深さや、問題解決のための発想の転換がいかに重要かを知る良い機会となる。

CSSBattleとは、与えられた画像と全く同じ図形をHTMLとCSSだけで再現するという、Webデザイナーやフロントエンドエンジニア向けのパズルゲームだ。このゲームは、CSSの様々なプロパティの理解を深め、より効率的で短いコードで目的の見た目を作り出すスキルを養うのに役立つ。

今回のパズルでは、ある特定の複雑な図形をCSSで描画することが課題だったようだ。記事の投稿者は、まず最初に「3本の棒（長方形）を曲げて形を作る」というアプローチを試みたが、すぐにその方法では複雑な曲線をCSSで表現するのが難しいことに気づき、行き詰まってしまったという。CSSで滑らかな曲線を表現するには、border-radiusを巧みに使うか、transformプロパティのskewやrotateを組み合わせるなど、高度なテクニックが必要になる場合がある。初心者がいきなりこれらの方法で複雑な曲線を扱うのはなかなか難しい。

そこで投稿者は発想を転換し、ある重要なCSSプロパティが解決の鍵になると気づいた。それが「overflow: hidden」だ。このプロパティは、親要素の領域からはみ出した子要素の内容を非表示にする機能を持つ。この特性を逆手に取り、「曲げる」のではなく「切り抜く」というアプローチで目的の図形を作成することにしたのだ。具体的には、円や長方形といったシンプルな基本図形を組み合わせて配置し、overflow: hiddenを使って不要な部分を隠すことで、あたかも複雑な図形を切り出したかのように見せる手法だ。これは、限られたツールの中で創意工夫を凝らす、まさにエンジニアリング的な発想と言える。

では、実際にどのようなHTMLとCSSが使われているのかを見てみよう。

まずHTMLの構造から。

Copy
1<div class="main">
2     <div class="rect">
3       <div class="circle">
4          <div class="in-circle">
5              <div class="stick"></div>
6          </div>
7      </div>
8     </div>
9</div>

このように、div要素が何重にも入れ子になっている。一番外側のmainが全体の配置を調整し、その中のrectが主要な「切り抜き」を行う長方形の領域となる。さらにその中にcircle（大きい円）、in-circle（内側の円）、そしてstick（棒状の要素）が配置されている。これらの要素一つ一つが、図形を構成する部品となる。

次にCSSのコードを見てみよう。

Copy
1      *{
2          background:#5DBCF9;
3          box-sizing:border-box;
4          margin:0;
5          padding:0;
6          height:100vh;
7      }

最初の*セレクタは、すべてのHTML要素に適用されるスタイルだ。ここでは、Webページの背景色を水色にし、要素のサイズ計算方法（box-sizing: border-box;）や余白（margin:0; padding:0;）をリセットしている。height:100vh;は、ページ全体の高さをブラウザの表示領域いっぱいに設定していることを意味する。

Copy
1    .rect{
2        display:flex;
3        align-items:center;
4        justify-content:center;
5        height:180px;
6        width:285px;
7        overflow:hidden;
8    }
9
10    .main{
11        display:flex;
12        align-items:center;
13        justify-content:center;
14    }

mainとrectのクラスには、display:flex; align-items:center; justify-content:center;という記述がある。これは、CSSのFlexboxという強力なレイアウト機能を使って、子要素を親要素の中央に配置するための定型的な書き方だ。mainは全体の図形をページの真ん中に持ってくる役割を、rectはその中に配置された円や棒を中央に揃える役割を担っている。

そして、rectクラスにはoverflow:hidden;が設定されている。これが今回のパズルの肝だ。rect要素は幅285ピクセル、高さ180ピクセルの長方形の領域を持つが、この領域からはみ出した子要素（この場合はcircle）の内容はすべて表示されなくなる。これが「切り抜き」のメカニズムだ。

Copy
1     .circle{
2          background:#FFFFCD;
3          width:280px;
4          height:330px;
5          border-radius:50%;
6          display:flex;
7          align-items:center;
8          justify-content:center;
9     }
10
11    .in-circle{
12          display:flex;
13          background:#5DBCF9;
14          width:180px;
15          height:240px;
16          border-radius:50%;
17          align-items:center;
18          justify-content:center;
19    }

circleクラスは、背景色がクリーム色で、幅280ピクセル、高さ330ピクセルの要素だ。border-radius:50%;と指定することで、この長方形の要素が完全な円形になる。この大きな円が、目的の図形の外側の曲線部分を作り出す基盤となる。その中にあるin-circleクラスは、背景色が水色（ページ全体の背景色と同じ）、幅180ピクセル、高さ240ピクセルの、一回り小さい円だ。このin-circleは、circleの中に配置され、circleの中央に穴を開けるような役割を果たす。

circleとin-circleの両方にdisplay:flex; align-items:center; justify-content:center;が設定されているのは、それぞれの子要素（in-circleとstick）を自身の中心に配置するためだ。これにより、部品の配置が正確になる。

Copy
1   .stick{
2       display:flex;
3       width:50px;
4       height:250px;
5       background:#FFFFCD;
6   }

最後にstickクラスは、背景色がクリーム色で、幅50ピクセル、高さ250ピクセルの棒状の要素だ。これはin-circleの中に配置される。

これらの要素がどのように組み合わさって最終的な図形を作るのかを想像してみよう。

1. まず、ページ全体が水色の背景色になる。
2. main要素が、すべてのコンテンツをページ中央に配置する。
3. rect要素は、幅285px、高さ180pxの透明な長方形の領域だ。重要なのは、この領域からはみ出したものがoverflow: hidden;によって見えなくなること。
4. rectの中に、circleという大きなクリーム色の楕円（ほぼ円に近い）が中央に配置される。circleの高さ330pxはrectの高さ180pxよりも大きいため、circleの上部と下部はrectによって切り取られ、見えなくなる。これにより、上下が平らになった曲線が現れる。
5. そのcircleの中に、in-circleという水色の小さい楕円が中央に配置される。この水色の円が、大きなクリーム色の円の中央部分を隠し、あたかも穴が開いているかのように見える。
6. 最後に、in-circleの中にstickというクリーム色の細長い棒が中央に配置される。この棒もin-circleからはみ出るが、in-circleの背景が水色なので、棒の上下も切り取られたように見える。

結果として、クリーム色の大きな円がrectによって上下を切り取られ、さらに中心部分をin-circleの水色でくり抜かれ、その中にクリーム色の棒が配置されることで、目的の複雑な図形が完成する。この手法は、まるで紙を切り貼りして特定の形を作るように、複数のシンプルな図形を重ね合わせ、overflow: hiddenで不要な部分を「切り取って」見せるという、非常に効率的でスマートな解決策だ。

このパズルから得られる学びは非常に大きい。 まず一つは、overflow: hiddenという一見地味なCSSプロパティが、実は要素の整形やデザインにおいて非常に強力なツールとなり得るということだ。複雑な曲線を手間をかけて描こうとする代わりに、シンプルな図形を重ねて不要な部分を隠すだけで目的の形を作り出せるというのは、Webデザインにおける強力なテクニックの一つだ。 もう一つは、問題解決における「発想の転換」の重要性だ。最初に思いついた方法でうまくいかなくても、別の視点から問題を見つめ直し、全く異なるアプローチを試すことで、よりシンプルで効果的な解決策が見つかる場合がある。これは、システムエンジニアとして様々な課題に取り組む際に常に心に留めておくべき姿勢だ。CSSBattleのようなパズルを通して、このような論理的思考力と問題解決能力を養うことは、将来のエンジニアリングキャリアにおいて必ず役立つだろう。