CSSの基礎知識（日本地図）

こんにちは！！
ともです！！

今回はざっくり日本地図（地方別）をCSSで作成したので共有したいと思います！！

Step1:各自導入したいHTMLに以下を記入

_html.erb

<div class="map">
<ul class="jp_map">
      <li>
        <a href="#">北海道</a></li>
      <li>
        <a href="#">東北地方</a></li>
      <li>
        <a href="#">関東地方</a></li>
      <li>
        <a href="#">中部地方</a></li>
      <li>
        <a href="#">近畿地方</a></li>
      <li>
        <a href="#">中国・四国地方</a></li>
      <li>
        <a href="#">九州地方</a></li>
      <li>
        <a href="#">沖縄地方</a></li>
      
    </ul>

</div>

css

.map{
    margin: 400px;
}

ul.jp_map {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  ul.jp_map a {
    color: #000;
    text-shadow: #fff 2px 0px,
    #fff -2px 0px,
    #fff 0px -2px,
    #fff 0px 2px,
    #fff 2px 2px,
    #fff -2px 2px,
    #fff 2px -2px,
    #fff -2px -2px,
    #fff 1px 2px,
    #fff -1px 2px,
    #fff 1px -2px,
    #fff -1px -2px,
    #fff 2px 1px,
    #fff -2px 1px,
    #fff 2px -1px,
    #fff -2px -1px;
    text-decoration:none;
  }
  
  .jp_map li a {
    box-sizing: border-box;
    width: calc(50% - 6px);
    float: left;
    padding: 7px 0;
    border-radius: 10px;
    text-align: center;
    margin: 3px;
  }
  
  .jp_map li a:hover {
    text-decoration: none;
  }
  
  .jp_map li:nth-child(1) a {
    background-color: #7f7eda;
  }
  
  .jp_map li:nth-child(2) a {
    background-color: #c92216;
  }
  
  
  
  .jp_map li:nth-child(3) a {
    background-color: #26e750;
  }
  
  .jp_map li:nth-child(4) a {
    background-color: #d1ff3a;
  }
  
  .jp_map li:nth-child(5) a {
    background-color: #00aae3;
  }
  
  .jp_map li:nth-child(6) a {
    background-color: #dd26b5;
  }
  
  .jp_map li:nth-child(7) a {
    background-color: #e8b612;
  }

  .jp_map li:nth-child(8) a {
    background-color: #bf13e1;
  }
  
 

  @media screen and (min-width: 768px) {
    ul.jp_map {
      padding: 84% 0 0;
    }
  
  
    .jp_map li a {
      width: 7%;
      height: 10%;
      border: solid #ffffff 2px;
      box-sizing: border-box;
      float: none;
      font-size: 14px;
      margin: 0;
    }
    .jp_map li a:hover {
      box-shadow: 0px 5px 5px 0px;
      transform: translateY(-10pxrails);
    }
    .jp_map li:nth-child(1) a {
      position: absolute;
      top: 0;
      left: 85%;
      width: 18%;
      height: 14%;
      background-color: #7f7eda;
    }
  
    .jp_map li:nth-child(2) a {
      position: absolute;
      top: 15%;
      left: 85%;
      width: 14%;
      height: 25%;
      background-color: #c92216;
  
    }
  
    .jp_map li:nth-child(3) a {
      position: absolute;
      top: 40%;
      left: 85%;
      width: 14%;
      height: 20%;
      background-color: #26e750;
    }
  
    .jp_map li:nth-child(4) a {
      position: absolute;
      top: 36%;
      left: 60%;
      width: 25%;
      height: 20%;
      background-color: #d1ff3a;
    }
  
    .jp_map li:nth-child(5) a {
      position: absolute;
      top: 40%;
      left: 45%;
      width: 15%;
      height: 17%;
      background-color: #00aae3;
    }
  
    .jp_map li:nth-child(6) a {
      position: absolute;
      top: 45%;
      left: 25%;
      width: 20%;
      height: 20%;
      background-color: #dd26b5;
    }
  
    .jp_map li:nth-child(7) a {
      position: absolute;
      top: 55%;
      left: 15%;
      width: 10%;
      height: 15%;
      background-color: #e8b612;
    }
  
   
  
    .jp_map li:nth-child(8) a {
      left: 0;
      position: absolute;
      top: 76.5%;
      width: 15%;
      background-color: #bf13e1;
    }
  }

以上になります！！

まだフロントエンドの技術が赤子並みなのでこれから磨いていきたいです！！