Alvaro Montoro プレゼンツ: フラグを楽しむ… CSS を使用

この記事では、それぞれに 1 つの HTML 要素を使用してさまざまなフラグを作成することで、CSS グラデーションを確認します。体験の一環として、疑似要素 ::before および ::after、およびクリップパス プロパティもチェックします。

単純なフラグをコーディングし、紋章のコーディングは CSS では難しいため避けます。不可能ではありませんが、実行する価値のある作業でもありません。そのためには SVG を使用してください。

さまざまな国旗のウィキペディア ページを使用して、寸法、サイズ、位置、色を取得しました。間違いが含まれている場合は、あらかじめご容赦ください。

ステージの設定

まず、フラグの HTML コードとなるものと、いくつかの一般的なスタイルを追加しましょう。

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

これらの機能について簡単に説明します:

• display: inline-grid: これは要素を（ほぼ）画像のように扱い、テキストと並んで表示します。 inline-flex または inline-grid を使用すると、より強力な位置合わせの可能性が提供されます。
• 高さ: 1em: フラグが異なれば、サイズも異なります。 固定高さを設定することで、すべてのフラグの高さを一定に保ちながら、アスペクト比プロパティを追加して適切な幅を生成できます。
• Position:relative: 疑似要素が必要な場合は、おそらく絶対位置が必要になるため、フラグをその絶対位置の参照点にしたいと考えています。
• overflow: hidden: 何らかの理由で擬似要素がコンテナからオーバーフローした場合、オーバーフローをビューから非表示にします。
• vertical-align: top: フラグをテキストと一列に並べて配置すると、配置が「より自然」になるため、見栄えがよくなります。

これらの一部はオーバーエンジニアリングです。はい、CSS をオーバーエンジニアリングすることができます。ほとんどのフラグではそれらが必要ないためです。特に、この記事でコーディングするものです…しかし、最終的にはプロパティを必要とするものがいくつか見つかるでしょう。それらを個別に何度も追加する代わりに、クラスに直接含めてはどうでしょうか?

---

線形勾配

線形グラデーションは、単一方向のプログレッシブ カラー トランジション (線に沿って名前が付けられています) を作成します。 デフォルトでは、方向は上から下へ垂直です。これにより、フラグの作成が簡単になります。

ポーランド

ポーランドの国旗から始めましょう。同じ高さを占める 2 つの色があります。上部は白、下部は赤です。これは、最もシンプルなグラデーションの 1 つです。

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

このグラデーションでは、上から 50% (旗の半分) に達するまで白が色として設定され、その後、同じく 50% から赤に変わります。

アスペクト比も追加しました: 8 / 5;それがポーランドの国旗の公式の比率（5:8）だからです。次の例ではこのプロパティを無視してかまいませんが、必ず追加してください。追加しないと、フラグに幅がなく、表示されなくなります。

---

ドイツ

CSS グラデーションは 2 色に限定されず、必要な数だけ使用できます。ただし、色が多すぎると一部のブラウザーではグラデーションが正しく表示されない場合があることに注意してください。

この例としてはドイツの国旗が挙げられます。ここでは上から下まで 3 色になります。

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

この例の表記は、意図的に複数行で非常に長くなりました。 value の後に 2 つの値を追加したことに注目してください。これらはそれぞれ、各色の開始点と終了点です。上の例では、黒は上 (0%) から始まり、旗の 3 分の 1 (33.33%) まで進み、赤は直後 (33.33%) から始まり、旗の 3 分の 2 (66.66%) まで進みます。 )、そして最後に、黄色は 66.66% の直後から始まり、旗の一番下 (100%) まで進みます。フラグの場合、終了値とそれに続く開始値は一致しますが、一致しない場合、ブラウザは色を段階的に遷移させます。

デフォルトで最初の色が 0 で始まり、最後の色が 100% で終わることを考慮すると、線形グラデーションからこれらの値を削除できます。また、開始値が前の終了値よりも低い場合、色の間で急激な停止が発生します。フラグにはこれが必要ですが、あまり入力したくないので、開始値としてできる限り低い値、つまり 0% または単に 0 を入力するだけです。そうすることで、上記の CSS は次の結果をもたらすものに縮小されます。同様の結果ですが、かなり短くなります:

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

---

ベルギー

垂直方向の線形グラデーションしか生成できないとしたら、それは退屈で役に立たないでしょう。グラデーションが描画される方向を変更する方法があります。いくつか確認してみましょう:

• キーワードで方向を指定: 色を右から左に動かしますか?カラーリストの前に左のキーワードで示します。下から上へ？トップへ。左下から右上へ斜め？右上に使用します。本当にとても簡単です!
• アクションの角度を指定する: 難しいかもしれませんが、前のオプションよりも多くの可能性が提供されます。アクションの角度を 8 つに制限する代わりに、指定することで任意の方向を選択できます。この場合、0 度は下から上、90 度は左から右、180 度は上から下、270 度 (または -90 度) は右から左になります。

ベルギーの国旗を例に挙げてみましょう。色は垂直方向に重ねられるのではなく、水平方向に重ねられます。左から右に、それぞれ黒、黄色、赤です。これは少なくとも 2 つの異なる方法で実現できます:

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

---

放射状グラデーション

放射状グラデーションは、1 つの原点から全方向への漸進的な色の遷移を作成し、色の楕円 (辺が等しい場合は円) のように見える放射状の効果を生成します。 デフォルトでは、その点は要素の水平方向と垂直方向の絶対中心です。

考慮すべき重要な点がいくつかあります:

• 円ではなく楕円が生成されます。コンテナが長方形の場合、楕円のように見えます。コンテナが正方形であれば、円のように見えます。結果の形状が楕円ではなく円形になることを保証するためのキーワード (円) があります。
• 楕円のサイズはコンテナとその位置によって異なります (これについては後ほど詳しく説明します)。 0% は原点、100% はその原点から最も遠い角になります。これを変更するには、キーワード (最も近い側、最も遠い側、最も近いコーナーなど) を使用できます。

これらの最初の考え (およびキーワード) を念頭に置いて、いくつかのフラグを作成してみましょう!

日本

日本の国旗は、白い旗の中央にある大きな赤い円です。これは、見つけることができる最も単純な放射状グラデーションの 1 つです。フラグは長方形であるため、前に確認した円キーワードを使用することになります。これを使用しない場合は、代わりに楕円が表示されます。

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

最も近い側のサイズ キーワードと円形のキーワードを組み合わせて、高さの 60% の円を生成しました (上辺と下辺が左辺と右辺よりも近いため)。

---

バングラデシュ

要素の中心から円と楕円だけを作成できれば、CSS を使用していくつかのフラグ (ラオスやブルンジなど) を複製できます。それでも、中心から外れた円を持つ他のもの (コスタリカやエチオピアなど) を開発することはできませんでした。

radial-gradient() メソッドを使用すると、グラデーションの原点を示すことができます。サイズと形状のキーワード (存在する場合) の後に at posX posY を使用してこれを行います。これを使ってバングラデシュの国旗を作成してみましょう:

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

グラデーションの中心を移動し始めると何が起こるでしょうか?最奥コーナーまでの距離が変わる！これにより、それに応じてサイズを調整するための三角関数の計算が行われます。または、代わりに、最も遠い隅 (この場合は最も近い側など) ではない別の基準点を特定することもできます。

これを避けるために、幅と高さの絶対サイズを指定できます。そうすると、その絶対値で形が決まってしまうので、円なのか楕円なのかが分かりません。

---

円錐形のグラデーション

円錐グラデーションは、1 つの原点から時計回りに回転するプログレッシブ カラー トランジションを作成します。このように視覚化するのは複雑に聞こえるかもしれないので、人々に説明するときは例を使用することを好みます。紙に印刷された規則的な線形グラデーションを想像してください (ここまではうまくいきました)。次に、紙を取り出し、片側を折り、円錐形に丸めます（これが名前の由来です！）結果として得られる図形は、上から見ると円錐形のグラデーションのように見えます。お役に立てば幸いです。

放射状グラデーションと同様、円錐グラデーションのデフォルトの原点は要素の絶対中心です。また、放射状のグラデーションとして、at posX posY を使用してその点を変更できます。

ベナン

これは、円錐形のグラデーションを使用して作成する非常に単純なフラグです。まず、中心を水平方向 40%、垂直方向 50% に配置し、停止点を指定する必要があります。

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

先ほども言いましたが、簡単です!あまり内容がありませんので、ベナンの国旗についてあまり知られていない事実をご紹介します。黄色は国の宝を表し、赤は祖先の勇気を表し、緑は民主主義の希望を表しています。

---

チェコ共和国

これに基づいて、チェコ共和国の国旗の描き方を見てみましょう:

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

これは問題なく動作しますが、#fff を 2 回使用していることに注意してください。一度だけ使えたら良いと思いませんか？ご想像のとおり、答えは「可能です」です。勾配勾配は必ずしも 0 度から開始する必要はありません。 from [角度] を使用して開始位置を指定できます。

たとえば、赤色から始めたいとします:

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

角度は正または負の値にすることができ、その場合、開始点はそれぞれ時計回りまたは反時計回りに移動します。

---

グラデーションの結合

線形、放射状、円錐形のグラデーションを使用して比較的単純なフラグを生成する方法を学びました…しかし、場合によってはフラグが複雑になり、単一のグラデーションでは対応できない場合があります。その場合はどうすればよいでしょうか?

CSS では、要素内に複数の背景画像 (およびグラデーション) を使用できます。値をカンマで区切る必要があります。直観に反するかもしれませんが、覚えておくべき重要なことの 1 つは、上の背景が重なって下の背景を隠してしまうということです。

スウェーデン

スウェーデンの国旗は、青色の背景に黄色の十字です。線形グラデーションの透明-黄色-透明を使用して、それぞれの黄色のバーを生成できます。

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

この例には、見た目以上のものがあります:

• 複数のグラデーションを組み合わせる方法を示します。カンマで区切ります。
• 背景色を追加します。 その色が常に背景リストの最後にあることに注目してください。リストの他の場所に配置すると無効になり、背景は表示されません。
• 絶対単位を使用します。これまでは勾配にパーセンテージを使用してきましたが、必要に応じて他の単位を使用しない理由はありません。

---

バハマ

前の旗は複数のグラデーションの動作を示していましたが、透明度を使用していたので、グラデーションがどのように重なっているかを示すのはうまくいきませんでした。それでは、別の例を見てみましょう。異なるタイプの複数のグラデーションを使用する例です。

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

背景を組み合わせる場合、グラデーションの種類は 1 つだけに限定されません。どの種類でも使用できます。

---

サイズと位置の変更

これまで、線形、放射状、円錐形のグラデーションと、それらを組み合わせる方法について見てきました。しかし、いずれの場合も、グラデーションが旗全体を占めていました。一部の透明度ではそのように見えない場合がありますが、グラデーションのサイズは常に幅と高さの 100% でした。

しかし、ニーズに合わせてグラデーションのサイズを変更する方法があります。最も簡単な方法は、背景サイズを指定することです。サイズがコンテナより小さい場合、背景は繰り返されます (background-repeat: none のようなものを使用しない限り)

カタール

カタールの国旗を使った例を見てみましょう。旗はパターンを 9 回繰り返し、円錐形のグラデーションで簡単に複製できます。グラデーションの幅を旗の 100%、高さを旗の高さの 9 分の 1 に指定すると、ブラウザはコンテナがいっぱいになるまで背景を繰り返し、描画を完成させます。

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

---

スウェーデン…またか！

もちろん、サイズを指定したら、グラデーションが配置される位置も指定できます。これは、background-position を使用して行います (ここで、background-repeat プロパティが役に立ちます)。

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

最後の色のサイズと位置を指定する必要がないことに注意してください。コンテナ全体を自動的に占有するもののみを設定できます。

背景画像、サイズ、位置の値はカンマで区切ることができます。これは、背景が少数しかない場合には便利ですが、背景が複数ある場合は非常に面倒な作業になる可能性があります。迷ったり、価値観が混在したりするのは簡単です。

代わりに、以下に示すように、background プロパティの短い形式を使用して、すべての値を一度に指定できます。background: グラデーションの位置 / サイズの繰り返しです。

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

---

グラデーションの繰り返し

線形、放射状、円錐形のグラデーションを見てきましたが、それぞれのバリエーションで「カラー パターン」を追加できます。フラグはこれに最適です。多くは水平線の繰り返しで構成されています。

私は反復グラデーションについて話しています。これらは通常のグラデーションと同じように動作し、100% または 360 度に達するまで指定されたパターンを繰り返します。 3 つの繰り返しグラデーションがあります:

• 繰り返し線形グラデーション
• 繰り返し放射状グラデーション
• 繰り返し円錐グラデーション

ギリシャ

ギリシャの国旗を例に挙げてみましょう。これを達成するには、3 つまたは 4 つの大きな線形グラデーションを使用することも、3 つの繰り返し線形グラデーションを使用することもできます。

• 十字の垂直部分を生成する 1 つの繰り返し線形グラデーション (透明と白を使用)
• 十字の水平部分を生成する 2 番目の繰り返し線形グラデーション (青と白を使用)
• 後ろに 9 つのバーを描画する最後の繰り返し線形グラデーション。

左上の十字を実現するには、最初の 2 つの線形グラデーションの位置とサイズの両方を定義する必要があります。

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(#000 33.33%, #f00 0 66.66%, #fc0 0);
}

---

ウガンダ

ウガンダの国旗には美しい灰色のタンチョウが描かれていますが、実用的な理由から CSS でコーディングしません。残りの 2 つの旗の部分に焦点を当てます。中央の白い円と、黒、黄色、赤の数本の水平線です。

この構成は 2 つの異なる方法で実現できます:

• 旗の高さ全体を占める繰り返し線形グラデーションを使用します。または
• フラグの半分のみを占める単一の線形グラデーションの場合、ブラウザは自動的にそれを繰り返して残りのスペースを埋めます。

最初のオプションは次のようになります:

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

2 番目のオプションは次のようになります:

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

しかし、どちらのオプションも最終的には同じように見えます。 CSS では、他のプログラミング スタイルと同様に、通常、目標を達成する方法が複数あることを覚えておくことが重要です。

---

疑似要素の使用

「単一要素フラグ」という用語は誤解を招く可能性があります。空ではないすべての HTML 要素には、描画にも使用できる少なくとも 2 つの疑似要素 (::before と ::after) が含まれています。したがって、実際には、個別にスタイル設定でき、多くの可能性を提供する 3 つの要素があります。

• 回転が必要な図面。 CSS で背景を使用する場合の制限の 1 つは、背景を回転できないことです。
• ボーダー半径、クリップパス、マスクなどを使用することで恩恵を受ける可能性のある複雑な形状
• デザインをきれいに見せるには、クリップされたパスのエッジがグラデーションのエッジよりも滑らかになります。

バーレーン

上記のようにグラデーションを使用してカタールの国旗をコーディングした場合、一部のモニターではグラデーションの三角形のエッジがシャープすぎて見苦しく見えることに気付いたかもしれません。これを解決する方法はたくさんありますが、私が気に入っている解決策は、クリップパスを備えた疑似要素を使用して、より滑らかできれいな線を作成することです。

このオプションは、いくつかの線形グラデーションと、次のセクションで説明するピクセル差のトリックを使用する場合に比べて、コードを簡素化します。

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

この場合の擬似要素は複雑なパターンに限定される必要はありません。たとえば、キュ​​ーバ、バハマ、ヨルダンの国旗を考えてみましょう。左側には円錐形のグラデーションを使用して描画した三角形があります。これらのグラデーションには問題があります。特定のモニターではエッジが硬すぎるか、ピクセル化して見えます。次のセクションで線形グラデーションを使用してこれを解決するトリックがあります。代わりに、疑似要素 (3 点ポリゴン パス) を使用して三角形を作成すると、エッジがより滑らかに見えます。上のバーレーンの国旗に似ています。

---

パナマ

5 つの星の頂点のおおよその点を取得し、それらを ::before および ::after 疑似要素のクリップパスを使用して適用しました。多くの CSS アーティストはクリップパス チートの使用を検討しており、星は円錐形のグラデーションで描画できます。ただし、簡単にするために、クリップパスとして残しておきます。

旗の背景として円錐形のグラデーションを追加し、擬似要素に星を追加すると、すぐにパナマの国旗を描くことができます。

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

---

リマインダーとヒント

グラデーションの積み重ね

背景を組み合わせると、リストされている順序で積み重ねられることに注意してください。つまり、最初のものが上に来て、下のものと重なり、その後も続きます。

設計の観点からは理にかなっていますが、CSS の観点からは直観に反している可能性があります。カスケードにより、プロパティまたはクラスの最後の出現が以前に定義されたものよりも優先されます。

1pxの差のトリック

この記事では、グラデーション エッジが鮮明すぎる、またはピクセル化して見える可能性があることについて説明しました。これはブラウザがグラデーションをレンダリングする方法が原因で発生しますが、特に SVG のハードストップ エッジでは発生しないため、迷惑です。

たとえば、次の行はモニターによってはうまく表示されない可能性があります:

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

これを回避するコツは、終点と次の始点の間にピクセルの差を追加することです。それぞれからそれぞれ 0.5 ピクセルを減算または追加するか、より簡単には、それらの 1 つから 1 ピクセルを減算または追加するだけです。この線はすべてのモニターで滑らかに見えます:

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

繰り返すグラデーションの 0 を忘れないでください

繰り返しのグラデーションを扱うときによくある間違いは、最初の色の開始点を追加しないことです。これにより、グラデーションが奇妙に見えます。繰り返しグラデーションが期待どおりに機能しない場合は、そこに 0 (または任意の値) を追加したかどうかを必ず確認してください。

疑似要素を恐れないでください

疑似要素は最初は恐ろしいかもしれませんが、他の要素と何ら変わりはなく、疑似要素と一緒に HTML 要素に付加されるだけです。

値を指定して content プロパティを追加することを忘れないでください (表示するだけの場合は空の文字列が一般的です)。そうしないと、擬似要素が表示されません!

クリップパスはあなたの友達です

CSS で描画したり CSS アートを作成したりする場合、クリップパス プロパティの使用は不正行為であると多くの人が主張します。作業が簡単になり、ベルトに取り付けておくと便利なツールです。 「不正行為」という理由だけでそれを破棄するつもりはありません。

クリップパスとマスクの使用方法を学びましょう。最終的にはプロジェクトで役立つでしょう。

結論

今度は CSS グラデーションを練習します。ぜひ、自分でフラグを作り直してみてください。以下は、練習に適した国旗を持つ国のリストです (複雑さの順に並べ替えられています):

• モナコ
• イエメン
• アラブ首長国連邦
• ラオス
• アイスランド
• ドミニカ共和国 (国章なし)
• セントルシア

そして、フラグをコーディングする独自の方法はないことを覚えておいてください。それぞれの方法はさまざまな方法で実行できます。使いやすいグラデーション、または最もよく見えるグラデーションを使用してください。

以上がAlvaro Montoro プレゼンツ: フラグを楽しむ… CSS を使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。