HTML と CSS を使用してインドの国旗を作成する

HTML と CSS が Web とデザインに使用される言語であることはわかっていますが、Web アプリを作成するだけではありません。たとえば、両方の言語の深い知識が必要となる興味深いプロジェクトを作成するためにそれらを使用することもできます。

したがって、私たちの当面のタスクは、HTML と CSS を使用してインドの国旗を作成することです。作成する旗の種類に関係なく、2 つの部分があります。1 つ目は旗竿で、2 つ目は旗そのものです。ご存知のとおり、長方形の DIV に色を追加して旗の 3 色の部分を作成するのは実際には非常に簡単です。難しいのは車輪の作成です。

したがって、アプローチは、コンテナ要素を使用してロゴ全体を保持することです。これはポールと旗の 2 つの部分に分かれています。ロゴ セクションには 3 つの要素が含まれ、それぞれが上から下にそれぞれの色を表します。これら 3 つの要素の中央の要素は、ホイールのコンテナ要素として機能します。

ロゴの作成に進みましょう。

外部コンテナ

先ほど説明したように、外側のコンテナには旗全体 (旗とポールの部分) が入ります。 div タグを使用し、それに「コンテナ」クラスを与えます。この div タグ内には 2 つの div がネストされ、1 つはポール用、もう 1 つは旗用になります。

問題は、両方の div 要素をインラインにする必要があるため、display:flex 属性を使用してこれを実現します。その後、要素の幅、高さ、色を指定します。

コードの HTML 部分は次のようになります -

CSS 部分は -

3色を追加

これからトリコロールの3色を追加していきます。これを行うには、flagPart 内で 3 つのネストされた div を使用します。次に、最初に適切な幅と高さを互いに等しい値に設定し、次にそれぞれの背景色を割り当てます。最初の div はサフランの背景色、中央の div は白の背景色、一番下の div は緑の背景色です。

HTML 部分−

CSS部分−

内部 div の幅を指定する必要がないことに注意してください。これは、内部 div を親 div (middleColor クラスの div) のサイズまで拡張したいためです。

ホイールを追加する

次に、中央セクションにホイールを追加します。ホイールには 24 本のスポークがあることがわかっています。そのため、12 本の線を使用し、CSS を使用して円を形成するように角度を付けます。

これはスポークを形成するだけであることに注意してください。ホイールの円形部分には、ホイール コンテナの「border-radius」プロパティを使用します。

HTML 部分 -

CSS 部分 -

中心から 15 度回転した 12 行で 24 個のスポークが形成されるため、nth-child 疑似クラスを使用して各行を 15 度回転しました。 n 番目の子疑似クラスは、中括弧で指定されたコンテナーの子要素の数と一致するために使用されます。

ここで作成したのは単純なフラグだけですが、CSS の高度な知識があれば、さらに多くのことを行うことができます。アニメーションを使用すると、旗が風にはためいているように見えたり、車輪で動いているように見えたりすることができますが、この記事ではそれについては説明しません。

以下は上記の完全な動作例です -

この記事では、HTML と CSS を使用してインドの国旗、三色旗を作成する方法について説明しました。 CSS で、background-color、border、border-radius、transform などのプロパティを使用して、美しい旗を作成できることがわかりました。

以上がHTML と CSS を使用してインドの国旗を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。