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>
コメント
コメントを投稿