目次

• CSSコーディングの練習、腕だめしにぴったり
• 縛りプレイ
• 国旗には仕様がある
• 実際に作ってみよう
  • 日章旗の作例1
  • 作例2
  • 作例3
  • 作例4
  • ユニオンジャック

CSSコーディングの練習、腕だめしにぴったり

縛りプレイ

コーディングに自分なりの制約を設けると、難易度を調整できます。たとえば、

• div要素1個のみ使用可1
• before/after擬似要素は使用禁止
• clip-pathプロパティは使用禁止
• 相対サイズのみ使用可

などの制約は、きっとこのゲームを（もうゲームと言ってしまいますが）格段に面白くしてくれることでしょう。

国旗には仕様がある

さて、多くの国旗は詳細な仕様が決められています。寸法、使う色などの設計図です。”国名 national flag specifications”といった条件でWebを検索すると探し出すことができます。たとえば日本国旗（日章旗）の場合は「国旗及び国歌に関する法律」で、以下のように定められています。

• 縦横比は縦が横の2/3
• 円の直径は縦の3/5
• 円の中心は旗の中心
• 地の色は白、円の色は紅色

• 

実際に作ってみよう

日章旗の作例1

.japan {
    background-color: #fff;
    aspect-ratio: 3/2;
    position: relative;
    &::before {
        background-color: #c00;
        content: '';
        display: block;
        height: 60%;
        aspect-ratio: 1;
        border-radius: 100%;
        position: absolute;
        top: 20%;
        left: 30%;
    }
}

擬似要素と絶対配置を用いたトラディショナルな実装例です。比較的新しいプロパティはaspect-ratioくらいでしょう。

作例2

.japan {
    background-color: #fff;
    aspect-ratio: 3/2;
    display: grid;
    place-content: center;
    container-type: size;
    &::before {
        background-color: #c00;
        content: '';
        display: block;
        width: 60cqh;
        aspect-ratio: 1;
        border-radius: 100%;
    }
}

作例3

.japan {
    background-color: #fff;
    aspect-ratio: 3/2;
    &::before {
        background-color: #c00;
        margin: auto;
        content: '';
        display: block;
        height: 100%;
        aspect-ratio: 1;
        clip-path: circle(30%);
    }
}

作例4

.japan {
    --red: #c00;
    --white: #fff;
    --radius: 60%;
    aspect-ratio: 3/2;
    background-image: 
        radial-gradient(
            circle closest-side,
            var(--red) var(--radius),
            var(--white) var(--radius));
}

ユニオンジャック

.uk {
    --blue: #012169;
    --white: #fff;
    --red: #c8102e;
    --angle: atan2(3, 5);
    --background-stripe:
        transparent calc(50% - 6cqi),
        var(--white) calc(50% - 6cqi) calc(50% - 4cqi),
        var(--red) calc(50% - 4cqi) 50%,
        var(--white) 50% calc(50% + 6cqi),
        transparent calc(50% + 6cqi);
    --stripe1:
        linear-gradient(
            var(--angle),
            var(--background-stripe)
        ) left top / 50% 50%;
    --stripe2: 
        linear-gradient(
            calc(180deg - var(--angle)),
            var(--background-stripe)
        ) right top / 50% 50%;
    --stripe3: 
        linear-gradient(
            calc(180deg + var(--angle)),
            var(--background-stripe)
        ) right bottom / 50% 50%;
    --stripe4: 
        linear-gradient(
            calc(var(--angle) * -1),
            var(--background-stripe)
        ) left bottom / 50% 50%;
    --stripe5: 
        linear-gradient(
            90deg, 
            transparent 40cqi, 
            var(--white) 40cqi 60cqi, 
            transparent 60cqi
        );
    --stripe6: 
        linear-gradient(
            transparent 20cqi, 
            var(--white) 20cqi 24cqi, 
            var(--red) 24cqi 36cqi, 
            var(--white) 36cqi 40cqi, 
            transparent 40cqi
        );
    --stripe7: 
        linear-gradient(
            90deg, 
            transparent 44cqi, 
            var(--red) 44cqi 56cqi, 
            var(--white) 56cqi, 
            transparent 56cqi
        );
    background:
        var(--stripe7),
        var(--stripe6),
        var(--stripe5),
        var(--stripe4),
        var(--stripe3),
        var(--stripe2),
        var(--stripe1);
    background-color: var(--blue);
    background-repeat: no-repeat;
    height: 60cqi;
}

•