CSSデモ/(簡易)日本地図

実際のページ

http://xd305417.html.xdomain.jp/demo/Nippon.htm



<!DOCTYPE html>

<html>

  <head>

    <meta charset='UTF-8'>

<!--

metaタグでcharsetをUTF-8に設定しています。

(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。

-->

    <TITLE></TITLE>

<!--

CSS Grid(display:grid)の使い方

https://www.webdesignleaves.com/pr/css/css_display_grid.html


CSS Grid Layout を極める!(場面別編)

https://qiita.com/kura07/items/486c19045aab8090d6d9


repeat() CSS Grid

https://developer.mozilla.org/ja/docs/Web/CSS/repeat()

-->

    <style>

body {

  background-color: #7fa;

}

.Position_Relative {

  position: relative;

}

.Position_Absolute {

  position: absolute;

}

.WordBreak_BreakAll {

  word-break: break-all;

}

.WhiteSpace_Nowrap {

  white-space:nowrap;

}

.TextAlign_Center {

  text-align:center;

}

.MouseCursor_Pointer {

  cursor: pointer;

}

.UserSelect_None {

  user-select: none;

}

.Border_Solid_Thin_000{

border: solid thin #000;

}

.Grid_Container {

  position: relative;

  display: grid;

  grid-auto-rows: 3.75rem;

  gap: 0.25rem 0.25rem;

}

.Grid_Container > * {

  display: inline-block;

  white-space:nowrap;

  text-align:center;

}

.Grid_TrackSpan_R1C2 {

  grid-row: span 1;

  grid-column: span 2;

}

.Grid_TrackSpan_R1C3 {

  grid-row: span 1;

  grid-column: span 3;

}

.Grid_TrackSpan_R1C5 {

  grid-row: span 1;

  grid-column: span 5;

}

.Grid_TrackSpan_R1C8 {

  grid-row: span 1;

  grid-column: span 8;

}

.Grid_TrackSpan_R2C1 {

  grid-row: span 2;

  grid-column: span 1;

}

.Flex_MiddleCenter span {

  display: flex;

  align-items: center;

  justify-content: center;

}

.Nippon span {

  color: #fff;

  font-weight: bold;

}

.Kyuusyuu > span {

  background-color: #d98139;

}

.Tyuugoku_Tihou {

  background-color: #e95014;

}

.Sikoku > span {

  background-color: #eca0b8;

}

.Kinki_Tihou {

  background-color: #f5b323;

}

.Touhoku_Tihou {

  background-color: #2ba6e2;

}

.Tyuubu_Tihou {

  background-color: #87c227;

}

.Kantou_Tihou {

  background-color: #07a19b;

}

.Hokkaidou > span {

  background-color: #1daa36;

}

    </style>

  </head>

  <body>

参考<br>

<br>

日本地図(簡易)24イラスト - No: 404266/無料イラストなら「イラストAC」<br>

<a target="_blank" class="WordBreak_BreakAll" href="https://www.ac-illust.com/main/detail.php?id=404266&word=%E6%97%A5%E6%9C%AC%E5%9C%B0%E5%9B%B3%EF%BC%88%E7%B0%A1%E6%98%93%EF%BC%8924&searchId=2332963472" >

https://www.ac-illust.com/main/detail.php?id=404266&word=%E6%97%A5%E6%9C%AC%E5%9C%B0%E5%9B%B3%EF%BC%88%E7%B0%A1%E6%98%93%EF%BC%8924&searchId=2332963472<br>

<a>

<br>

<div class="Border_Solid_Thin_000 Nippon Position_Relative Flex_MiddleCenter " style="width: 53.5rem; height: 46rem">

  <div class="Hokkaidou Grid_Container " style="grid-auto-columns: 9rem; grid-auto-rows: 9rem; position: absolute; top: 0rem; left: 44.5rem" >

    <span>北海道</span>

  </div>

  <div class="Grid_Container " style="grid-template-columns: repeat(10, 3.75rem); position: absolute; top: 9.75rem; left: 12.5rem" >

    <span class="Grid_TrackSpan_R1C8"></span>

    <span class="Touhoku_Tihou Grid_TrackSpan_R1C2">青森</span>

    

    <span class="Grid_TrackSpan_R1C8"></span>

    <span class="Touhoku_Tihou">秋田</span>

    <span class="Touhoku_Tihou">岩手</span>

    

    <span class="Grid_TrackSpan_R1C8"></span>

    <span class="Touhoku_Tihou">山形</span>

    <span class="Touhoku_Tihou">宮崎</span>

    

    <span class="Grid_TrackSpan_R1C5"></span>

    <span class="Tyuubu_Tihou">石川</span>

    <span class="Tyuubu_Tihou">富山</span>

    <span class="Tyuubu_Tihou">新潟</span>

    <span class="Touhoku_Tihou Grid_TrackSpan_R1C2">福島</span>

    

    <span class="Grid_TrackSpan_R1C5"></span>

    <span class="Tyuubu_Tihou">福井</span>

    <span class="Tyuubu_Tihou Grid_TrackSpan_R2C1">岐阜</span>

    <span class="Tyuubu_Tihou Grid_TrackSpan_R2C1">長野</span>

    <span class="Kantou_Tihou">群馬</span>

    <span class="Kantou_Tihou">栃木</span>

    

    <span class="Tyuugoku_Tihou Grid_TrackSpan_R2C1">山口</span>

    <span class="Tyuugoku_Tihou">島根</span>

    <span class="Tyuugoku_Tihou">鳥取</span>

    <span class="Kinki_Tihou">兵庫</span>

    <span class="Kinki_Tihou">京都</span>

    <span class="Kinki_Tihou">滋賀</span>

    <span class="Kantou_Tihou">埼玉</span>

    <span class="Kantou_Tihou">茨木</span>

    

    <span class="Tyuugoku_Tihou">広島</span>

    <span class="Tyuugoku_Tihou">岡山</span>

    <span class="Kinki_Tihou">大阪</span>

    <span class="Kinki_Tihou">奈良</span>

    <span class="Kinki_Tihou">三重</span>

    <span class="Tyuubu_Tihou">愛知</span>

    <span class="Tyuubu_Tihou">山梨</span>

    <span class="Kantou_Tihou">東京</span>

    <span class="Kantou_Tihou Grid_TrackSpan_R2C1">千葉</span>

    

    <span class="Grid_TrackSpan_R1C3"></span>

    <span class="Kinki_Tihou Grid_TrackSpan_R1C2">和歌山</span>

    <span class="Grid_TrackSpan_R1C2"></span>

    <span class="Tyuubu_Tihou">静岡</span>

    <span class="Kantou_Tihou">神奈川</span>

  </div>

  <div class="Kyuusyuu Grid_Container " style="grid-template-columns: repeat(3, 3.75rem); position: absolute; top: 29.75rem; left: 0rem">

    <span>佐賀</span>

    <span>福岡</span>

    <span>大分</span>

    <span>長崎</span>

    <span>熊本</span>

    <span class="Grid_TrackSpan_R2C1">宮崎</span>

    <span class="Grid_TrackSpan_R1C2">鹿児島</span>

  </div>

  <div class="Sikoku Grid_Container " style="grid-template-columns: repeat(2, 3.75rem); position: absolute; top: 38.25rem; left: 16rem" >

    <span>愛媛</span>

    <span>香川</span>

    <span>高知</span>

    <span>徳島</span>

  </div>

  <div class="Kyuusyuu Grid_Container " style="grid-template-columns: repeat(3, 3.75rem); position: absolute; top: 42.25rem; left: 0rem;">

    <span>沖縄</span>

  </div>

</div>

<br>

  </body>

</html>

 

コメント

このブログの人気の投稿