作業おばけ


CSS超入門!CSSアートで日本国旗を作ってみた(上下左右中央寄せ)


こんにちは、作業おばけです。
今回は、日本国旗を用いて上下左右中央寄せのやり方を紹介します。
とにかく丁寧にわかりやすく説明していきます。


実際のCSSアート動作サンプル

実際にCSSで動作している日本国旗を下に載せました。
ドラッグや右クリックをしてもCSSアートですので選択できないことが分かると思います。



それでは早速やっていきましょう

・雛形を用意する

      
<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <style>
    </style>
  </head>
  <body>
  </body>
</html>
      
      
これが基本の雛形です。
<!doctype html> はHTML5の宣言ですのでこれがないとHTML5が使えません。


・背景と日の丸のdivタグをつくりCSSを追加する

      
<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <style>
      .background {
      }
      .hinomaru {
      }
    </style>
  </head>
  <body>
    <div class='background'>
      <div class='hinomaru'></div>
    </div>
  </body>
</html>
      
      

国旗の背景と日の丸の部分のHTMLを追加します。
divタグを使いclass名はそれぞれ backgroundhinomaru にしました。
CSSはクラス名の先頭にドット(.)末尾に{}を付けて追加します。



・国旗の枠組みを作る

      
<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <style>
      .background {
        width: 300px;
        height: 200px;
        border: 1px solid black;
      }
      .hinomaru {
      }
    </style>
  </head>
  <body>
    <div class='background'>
      <div class='hinomaru'></div>
    </div>
  </body>
</html>
      
      

日本国旗の縦横比は3:2ですので
横幅を width: 300px 、縦幅を height: 200px と指定します。



・日の丸を追加する

      
<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <style>
      .background {
        width: 300px;
        height: 200px;
        border: 1px solid black;
      }
      .hinomaru {
        width: calc(200px / 5 * 3);
        height: calc(200px / 5 * 3);
        border-radius: 50%;
        background-color: #d7003a;
      }
    </style>
  </head>
  <body>
    <div class='background'>
      <div class='hinomaru'></div>
    </div>    
  </body>
</html>
      
      

日の丸は国旗の縦の長さの5分の3です。
今回は縦の長さが 200px ですので 200px÷5×3 = 120pxとなります。

CSSで計算式を書くときは calc() という関数を使います。
200px / 5 * 3calc()関数に代入します。
calc() 関数を使えば面倒な計算をする必要がありません。


ちなみに、検索してみると日の丸の規定の色は赤ではなく紅色でした。
ですので今回は紅色のコードである #d7003a を使います。



日の丸を国旗の中心に移動させる①

      
<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <style>
      .background {
        width: 300px;
        height: 200px;
        border: 1px solid black;
        position: relative;
      }
      .hinomaru {
        width: calc(200px / 5 * 3);
        height: calc(200px / 5 * 3);
        border-radius: 50%;
        background-color: #d7003a;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div class='background'>
      <div class='hinomaru'></div>
    </div>    
  </body>
</html>
      
      

親要素(.background)に position: relative を指定します。
子要素(.hinomaru)に position: absolute を指定します。


divタグのなかにdivタグがあるとき
外側のdivタグを親要素、内側のdivタグを子要素といいます。


親要素 position: relative を指定すると
子要素の移動範囲が親要素内に限定されます。

子要素 position: absolute を指定すると
子要素の位置を親要素内に限り自由に移動させることができます。



日の丸を国旗の中心に移動させる②

      
<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <style>
      .background {
        width: 300px;
        height: 200px;
        border: 1px solid black;
        position: relative;
      }
      .hinomaru {
        width: calc(200px / 5 * 3);
        height: calc(200px / 5 * 3);
        border-radius: 50%;
        background-color: #d7003a;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class='background'>
      <div class='hinomaru'></div>
    </div>    
  </body>
</html>
      
      
      

子要素に

を追加します。

CSSは上下左右の幅を自動で計算してくれるので便利です。


こちらもどうぞ↓

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


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