作業おばけ


css超入門!cssアートで縦3色の国旗を作る(疑似要素とflexbox)


こんにちは、作業おばけです。
今回は縦3色の国旗をCSSアートで作ります。
CSSの勉強も兼ねて、::before ::after などの疑似要素を使っていきます。

また、国旗の3色の色分けもFlexboxを使います。


実際にCSSで動作しているCSSアートサンプル

まずは、サンプルを用意したのでご覧ください。
色違いの縦3色国旗を10枚作りました。



実際に国旗を作る

今回はイタリアの国旗を作ります。

手順を追ってひとつずつ解説していきます。


① 雛形を作りdivタグを追加する

      
<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <style>
    </style>
  </head>
  <body>
    <div class="flag"></div><!--←これ-->
  </body>
</html>
      
      

class名がflagのdivタグを追加します。
まだ何も表示されません。


② 国旗の枠組みと影を作る

      
<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <style>
      /*==========================*/
      .flag { 
        width: 300px;
        height: 200px;
        background-color: red;
        box-shadow: 1px 1px 10px;
      }
      /*==========================*/
    </style>
  </head>
  <body>
     <div class="flag"></div>
  </body>
</html>
      
      

色は赤です。
影を付けるbox-shadow横の幅、縦の幅、ぼかしの幅の3つを指定します。
コードを実行すると真っ赤な長方形に影がついているはずです。


③ flagの疑似要素を作成する(重要)

      
<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <style>
      .flag {
        width: 300px;
        height: 200px;
        background-color: red;
        box-shadow: 1px 1px 10px;
      }

      /*============================*/
      .flag::before, .flag::after {
        content: "";
        width: 100px;
        height: 100%;        
      }
      /*============================*/
    </style>
  </head>
  <body>
     <div class="flag"></div>
  </body>
</html>      
      
      

ここがめっちゃ重要ですw

疑似要素とはHTMLタグを使わずに文字や図形を表示できるものです。
ボタンをクリックした後の動作などをつくるときに使われます。

疑似要素は基本的に元の要素の前後に生成できます。
元となる要素の.flagの前に::before 後ろに::afterを追加します。
今回は::before::afterを同時に使うので2つ繋げてカンマ(,)で区切ります。

また、content: '' がないと疑似要素は使えません。


④ ::beforeと::afterに色をつけて並べる(完成)

      
<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <style>
      .flag {
        width: 300px;
        height: 200px;
        background-color: red;
        box-shadow: 1px 1px 10px;
        /*=================*/
        display: flex;
        flex-direction: row;
        /*=================*/
      }

      .flag::before, .flag::after {
        content: "";
        width: 100px;
        height: 100%;        
      }

      /*=================*/
      .flag::before {
        background: green;
      }
      .flag::after {
        background: white;
      }
      /*=================*/
    </style>
  </head>
  <body>
     <div class="flag"></div>
  </body>
</html>      
      
      

::beforeを緑に、::afterを白にします。
Flexboxを使いdisplay: flexにします。

flex-direction: rowを指定することでFlexboxを左並びにできます。
緑と白を左並びにするので、右側に背景の赤がでてきます。
そうすることで縦3色の国旗を作ることができました。


こちらもどうぞ↓

CSS超入門!CSSアートで日本国旗を作ってみた

お疲れ様でした。

最後まで読んでいただきありがとうございました。