日本地図の作り方のコードです。

  • Published
  • Author 田端厚賢
  • Categories IT講座

日本地図を作ります！

北海道・東北

関東

甲信越・北陸

東海

近畿

中国

四国

九州・沖縄

<style type="text/css">

body {
    font-size: 14px;
    letter-spacing: .03rem;
    width:720px;
}

.search_pref_nav .area_block {
    background: #f5f5f5;
    box-sizing: border-box;
    padding: 8px;
    position: absolute;
}

nav ul, ul {
    list-style: none;
}

.search_pref_nav {
    background: #fff url(http://.png) 173px 44px no-repeat;
    background-size: 314px;
    height: 380px;
    position: relative;
}

.search_pref_nav .area_block h3 {
    font-size: 14px;
    margin-bottom: 5px;
}


h3 {
    font-size: 19px;
    line-height: 22px;
}

.search_pref_nav .area_block li {
    display: inline-block;
    margin-right: 6px;
    width: 45px;
}

.search_pref_nav .area_block.hokkaido_tohoku {
    right: 0;
    top: 50px;
    width: 230px;
}

.search_pref_nav .area_block.kanto {
    right: 0;
    top: 300px;
    width: 230px;
}

.search_pref_nav .area_block.koshinetsu_hokuriku {
    right: 0;
    top: 165px;
    width: 230px;
}

.search_pref_nav .area_block.tokai {
    right: 253px;
    top: 280px;
    width: 126px;
}

.search_pref_nav .area_block.kinki {
    left: 195px;
    top: 50px;
    width: 174px;
}

.search_pref_nav .area_block.chugoku {
    left: 0;
    top: 50px;
    width: 174px;
}

.search_pref_nav .area_block.shikoku {
    right: 405px;
    top: 280px;
    width: 126px;
}

.search_pref_nav .area_block.kyushu_okinawa {
    left: 0;
    top: 215px;
    width: 126px;
}
</style>

<!DOCTYPE html>
<html lang="jp">
<head></head>
<body>
<section class="search_pref_nav mb30">
    <h2 class="heading_level2">日本地図を作ります！</h2>
    <div class="area_block hokkaido_tohoku">
      <h3>北海道・東北</h3>
      <ul>
        <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>
    <div class="area_block kanto">
      <h3>関東</h3>
      <ul>
        <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>
    <div class="area_block koshinetsu_hokuriku">
      <h3>甲信越・北陸</h3>
      <ul>
        <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>
    <div class="area_block tokai">
      <h3>東海</h3>
      <ul>
        <li><a href="">愛知</a></li>
        <li><a href="">静岡</a></li>
        <li><a href="">岐阜</a></li>
        <li><a href="">三重</a></li>
      </ul>
    </div>
    <div class="area_block kinki">
      <h3>近畿</h3>
      <ul>
        <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>
    <div class="area_block chugoku">
      <h3>中国</h3>
      <ul>
        <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>
    <div class="area_block shikoku">
      <h3>四国</h3>
      <ul>
        <li><a href="">愛媛</a></li>
        <li><a href="">香川</a></li>
        <li><a href="">高知</a></li>
        <li><a href="">徳島</a></li>
      </ul>
    </div>
    <div class="area_block kyushu_okinawa">
      <h3>九州・沖縄</h3>
      <ul>
        <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>
  </section>
</body>

Bio

田端厚賢

名前：田端厚賢（Atsuyoshi Tabata）

WordPressを中心に企業様から委託を受けてサイトやサーバーの保守・管理、システム開発を行っています。

2024年4月より東大の松尾研でLLLMの開発プロジェクトに参加しています。

プロフィール詳細
Web制作依頼の詳細
お問い合わせはコチラ

Archives