はじめに

こんにちは! 中学2年生のWardHamamatsu67です! 少し遅れましたが、青看板Part2やりたいと思います。
今回も神奈川県にある青看板を作っていきたいと思います。
一番左に矢印がある青看板です。

HTMLのコード

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>青看板</title>
    </head>
    <link rel="stylesheet" href="blue1.css">
    <body>
        <div class="outer">
            <div class="box" id="one" style="text-align:center;">横浜 32km
            <br>Yokohama<br>
            </div>
        </div>
        <div class="outer1">
        <div class="box1" id="one1" style="text-align:left;">海老名 9km
            <br>Ebina<br>
        </div>
        </div>
        <div class="outer2">
            <div class="box2" id="one2" style="text-align:left;">↑</div>
        </div>
    </body>
</html>

前回同様、説明は省きます。

CSSのコード

* {
    box-sizing: border-box;
  }
  
  .box {
    width: 500px;
    height: 300px;
    background: red;
    color: white;
    font-size: 30px;
  }
  
  #one {
    position: fixed;
    top: 80px;
    left: 10px;
    background: blue;
  }
  
  .outer {
    width: 500px;
    height: 300px;
    padding-left: 150px;
  }
  * {
    box-sizing: border-box;
  }
  
  .box1 {
    width: 250px;
    height: 160px;
    background: red;
    color: white;
    font-size: 30px;
  }
  
  #one1 {
    position: fixed;
    top: 216px;
    left: 216px;
    background: blue;
  }
  
  .outer1 {
    width: 500px;
    height: 80px;
    padding-left: 150px;
  }
  * {
    box-sizing: border-box;
  }
  
  .box2 {
    width: 70px;
    height: 100px;
    background: red;
    color: white;
    font-size: 180px;
  }
  
  #one2 {
    position: fixed;
    top: 100px;
    left: 16px;
    background: blue;
  }
  
  .outer2 {
    width: 500px;
    height: 80px;
    padding-left: 150px;
  }

「海老名 9km」の文字が入った青看板は横に長くするとよいかもです。

完成図

「横浜」の文字を中央に寄せたため、と「海老名」が少しずれていますが、何とかできました。

おわりに

今回作った青看板は前回作ったものと比べてもとても簡単でした。もしHTML,CSSのみで青看板を作りたい人がいれば、こちらから作るのをお勧めします。
この記事が良いと思った方はいいねとフォローをしてくれると嬉しいです。

【HTML,CSS】HTML,CSSのみで青看板を作る #2

はじめに

HTMLのコード

CSSのコード

完成図

おわりに