20200515のCSSに関する記事は11件です。

CSS 見出しに横棒

CSSで見出しに横棒をつける

<h2 class="line">ライン</h2>
.line {
        display: flex;
        align-items: center;
      }
.line::before,
.line::after {
             content:"";
             height: 1px;
             width: 10px;
             background-color: #333;
             }

ーラインー

↑こんな感じの横棒を付けられる。
widthを消して、

flex-grow: 1;

とすると横幅いっぱいの横棒になる。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Google maps APIでドラゴンボールの場所を検索してみよう!

はじめに

  • ピンを快適にする方法
  • Geocodingとは
  • 実装

ピンを快適にする方法

前回はピンを快適にする方法を記事で紹介しました!前回からの続きとなりますので是非参考にしてください!!
https://qiita.com/Ryunosuke-watanabe/items/958ed12471effc8fd778

Goecodingとは

ジオコーディングとは住所や地名から緯度経度の情報を出すことです!
この機能を使えば、具体的な緯度経度がわからなくても、場所の名前だけでピンを刺したり中心を設定することができます。

実装

JavaScript,HTML,css全てでで実装します!まずGeocodingをするにはAPIでGeocodingを追加する必要があります。
プラットフォームの方で簡単に追加できるので是非やってみてください。

まずhtmlとcssで検索窓を追加します。

maps.html
<html>
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="floating-panel">
        <input id="address" type="textbox" value="東京駅">
        <input id="submit" type="button" value="Geocode">
    </div>
    <div id="map"></div>
    <script src="js/map.js"></script>
    <script src="data/place.json"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></scriptsrc>></script>
</body>
</html>
style.css
body {
    height: 100%;
    width: 100%;
}

#map {
    height: 100%;
    width: 100%;
}

.mapsballoon {
    width: 150px;
    height: auto;
}

#floating-panel {
    display: inline-block;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: 'Roboto','sans-serif';
    line-height: 30px;
    padding-left: 10px;
}

これで検索窓が追加されました!!
image.png

次はJavaScriptで機能を実装していきます!

map.js
var map;
var marker = [];
var infowindow = [];
var Center = {lat: 24.4064, lng: 124.1754};
var place_data = [
    {
        "loc": "バンナ公園",
        "lat": 24.375031,
        "lng": 124.160795,
        "balloon": "hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge"
    },
      {
        "loc": "石垣島鍾乳洞",
        "lat": 24.361743,
        "lng": 124.154466,
        "balloon": "test"
    },
      {
        "loc": "石垣やいま村",
        "lat": 24.40489,
        "lng": 124.144636,
        "balloon": "test"
    }
]

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: Center,
        zoom: 11.5
    });
    markerset()
};

function markerset(){
    for(var i=0;i<place_data.length;i++) {
        marker[i] = new google.maps.Marker({
            position: {lat: place_data[i].lat, lng: place_data[i].lng},
            map: map,
            title: place_data[i].loc
        });

        infowindow[i] = new google.maps.InfoWindow({
            content: '<div class="mapsballoon"><h2>' + place_data[i].loc + '</h2>' + place_data[i].balloon + '</div>'
        });
        var geocoder = new google.maps.Geocoder();
        markerEvents(i)
        document.getElementById('submit').addEventListener('click', function() {
            geocodeAddress(geocoder, map);
        });
    }
}

var opened = place_data.length + 1;
function markerEvents(i) {
    marker[i].addListener('click', function() {
        if (opened != place_data.length + 1) {
            infowindow[opened].close(map, marker[opened]);
        }
        infowindow[i].open(map, marker[i]);
        opened = i;
    });
}


function geocodeAddress(geocoder, resultsMap) {
    var address = document.getElementById('address').value;
    geocoder.geocode({'address': address}, function(results, status) {
      if (status === 'OK') {
        resultsMap.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: resultsMap,
          position: results[0].geometry.location
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
}

今回はgeocodeAddressというファンクションを追加しました!
うまくhtmlのIDと紐付けて検索できるようにしています!!

image.png

ちゃんと東京駅に飛ぶことができました!
いろいろな場所に飛ぶことができるので是非遊んでみてください!!

最後に

いかがだったでしょうか?今回は前回の予告通りgeocodingの機能を実装してみました。いろいろな実装に使えそうな機能ですので是非参考にしてください。
次回はピンにラベルをつけていきたいと思います!
参考文献
https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【明治】CSSで円弧状の区切り線をつくる【おいしい牛乳】

はじめに

HTMLとCSSの基礎を学びおえたので、ためしに明治おいしい牛乳のパッケージを模写してみました。


出典:明治おいしい牛乳 おいしい暮らし~Natural Taste~ | 株式会社 明治

おいしい牛乳。

さて、この円弧状の区切り線をつくるのがむずかしかったので、つくりかたをまとめておこうと思います。

つくりかた

1.


まず、パーツを用意します。

コードを表示する
index.html
<div class="upper-box"></div>
<div class="lower-box">
  <div class="lower-box-item"></div>
</div>
style.css
.upper-box {
  width: 300px;
  height: 100px;
  background-color: #07b; /*ブルー*/
}

.lower-box {
  width: 300px;
  height: 50px;
  border: 2px dashed #999; /*これらは*/
  box-sizing: border-box;  /*最後に消します*/
}

.lower-box-item {
  position: relative;
  left: -300px;
  width: 900px;
  height: 900px;
  border: 15px double #07b; /*ブルー*/
  border-radius: 50%;
  box-sizing: border-box;
}



上部にズームインするとこんなかんじ。

2.


つぎに、点線からはみ出た部分を切りとりましょう(overflow: hidden)。

CSS の overflow プロパティは、要素の内容が多すぎてブロック整形コンテキストに収まらない場合にどうするかを設定します。
出典:overflowプロパティ - MDN - Mozilla

コードを表示する
index.html
  <!-- 手順1とおなじ -->
style.css
.upper-box {
  /* 手順1とおなじ */
}
.lower-box {
  /* 手順1とおなじ */
  overflow: hidden; /* New! */
}
.lower-box-item {
  /* 手順1とおなじ */
}

3.


点線で囲まれた部分を上にずらします(margin-top: -50px)。

コードを表示する
index.html
  <!-- 手順2とおなじ -->
style.css
.upper-box {
  /* 手順2とおなじ */
}
.lower-box {
  margin-top: -50px; /* New! */
  /* 手順2とおなじ */
}
.lower-box-item {
  /* 手順2とおなじ */
  background-color: #fff; /* New! */
}

注意 lower-box-itemに対して、background-color: #fffも追加で指定してください。そうしないと重なった部分がブルーに塗りつぶされてしまいます。

4.


最後に、分かりやすくするために付けていた点線を消してあげましょう。

完成版のコードを表示する
index.html
<div class="upper-box"></div>
<div class="lower-box">
  <div class="lower-box-item"></div>
</div>
style.css
.upper-box {
  width: 300px;
  height: 100px;
  background-color: #07b;
}

.lower-box {
  margin-top: -50px;
  width: 300px;
  height: 50px;
  overflow: hidden;
}

.lower-box-item {
  position: relative;
  left: -300px;
  width: 900px;
  height: 900px;
  border: 15px double #07b;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: #fff;
}

これで完成しました。やったね。

おわりに

模写コーディングは時間がかかって大変ですが、とても勉強になります。
HTMLとCSSの基礎を学びおえた方は積極的に取り組みましょう。

また「ここはこうしたほうがいいよ」という点がございましたら、ぜひご指摘ください。
よろしくお願いいたします◎

参考にしたサイト

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【おい牛】CSSで円弧状の区切り線をつくる【模写】

はじめに

HTMLとCSSの基礎を学びおえたので、ためしに明治おいしい牛乳のパッケージを模写してみました。


出典: 明治おいしい牛乳 おいしい暮らし~Natural Taste~ | 株式会社 明治

おいしい牛乳、略しておい牛です[要出典]

さて、この円弧状の区切り線をつくるのがむずかしかったので、つくりかたをまとめておこうと思います。

つくりかた

1.


まず、パーツを用意します。

コードをみる
index.html
<div class="upper-box"></div>
<div class="lower-box">
  <div class="lower-box-item"></div>
</div>
style.css
.upper-box {
  width: 300px;
  height: 100px;
  background-color: #07b; /*ブルー*/
}

.lower-box {
  width: 300px;
  height: 50px;
  border: 2px dashed #999; /*これらは*/
  box-sizing: border-box;  /*最後に消します*/
}

.lower-box-item {
  position: relative;
  left: -300px;
  width: 900px;
  height: 900px;
  border: 15px double #07b; /*ブルー*/
  border-radius: 50%;
  box-sizing: border-box;
}



上部にズームインすると、このようになっています。

2.


つぎに、点線からはみ出た部分を切りとりましょう(overflow: hidden)。

CSS の overflow プロパティは、要素の内容が多すぎてブロック整形コンテキストに収まらない場合にどうするかを設定します。
出典: overflowプロパティ - MDN - Mozilla

コードをみる
index.html
  <!-- 手順1とおなじ -->
style.css
.upper-box {
  /* 手順1とおなじ */
}
.lower-box {
  /* 手順1とおなじ */
  overflow: hidden; /* New! */
}
.lower-box-item {
  /* 手順1とおなじ */
}

3.


点線で囲まれた部分を上にずらしました(margin-top: -50px)。

コードをみる
index.html
  <!-- 手順2とおなじ -->
style.css
.upper-box {
  /* 手順2とおなじ */
}
.lower-box {
  margin-top: -50px; /* New! */
  /* 手順2とおなじ */
}
.lower-box-item {
  /* 手順2とおなじ */
  background-color: #fff; /* New! */
}

注意 lower-box-itemに対して、background-color: #fffも追加で指定してください。重なった部分がブルーに塗りつぶされてしまいます。

4.


最後に、わかりやすくするために付けていた点線を消してあげましょう。

完成したコードをみる
index.html
<div class="upper-box"></div>
<div class="lower-box">
  <div class="lower-box-item"></div>
</div>
style.css
.upper-box {
  width: 300px;
  height: 100px;
  background-color: #07b;
}

.lower-box {
  margin-top: -50px;
  width: 300px;
  height: 50px;
  overflow: hidden;
}

.lower-box-item {
  position: relative;
  left: -300px;
  width: 900px;
  height: 900px;
  border: 15px double #07b;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: #fff;
}

これで完成しました。やったね。

おわりに

模写コーディングは時間がかかって大変ですが、とても勉強になります。
HTMLとCSSの基礎を学びおえた方は積極的に取りくんでみましょう。

また「ここはこうしたほうがいいよ」という点がございましたら、ぜひご指摘ください。
よろしくお願いします◎

参考にしたサイト

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTML&CSS基本

タグの違いが分からなくて苦手意識しかなかったが特徴がわかった備忘録

HTMLは一番基本のウェブに表示されるもの
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="UTF-8">
  <title/title>
 </head>
 <body>
    ←ここに表示するものを書いていく
 </body>
</html>
永遠に書きかけかもしれない。
この記事を初めて書いた時<>がそのまま書くと消えてしまってどうしたらいいか分からなくてそのまま保存にしてた。

自分で調べて実装して行かないと覚えないんだな。

CSSはHTMLで書いた文字だけのものを着飾らせるもの。
ノートで言うと文字を黒だけでなく、赤にしたり枠で囲ったりすることで
見た目を作る。それぞれ画面に対してサイズ指定する事でデザインになる

どうしても曖昧だったのがBody要素(内容を書いていく部分)のタグの違い。

hタグ。見出し要素でh1などとして使うと勝手に大文字の太字になった上にユーザーや検索エンジンに対しても意味をもつ(今調べながら書いた)SEO対策にもなる。

pタグ。段落要素。囲ったものが1の文章として扱われる。

divタグ。単体でも使えるが class属性を与えてそれぞれを個別のものとして扱えるようにする。
使う頻度としては div class=""が一番多い。追加要素が出来ても構造に対して影響を与えないから
 
bタグ。太字を表す。囲ったものを太字にする。

aタグ。文字を別ページへのリンクにする。

タグはブロックレベル要素・インライン要素に分かれ
ブロックレベル要素はノートのページに対して枠を決めれる。
hタグでページの半分を使う

ある程度コードを書いて思った事は全体像が見えていなければ何を使ってどう構成するのか動かすときもチグハグになってしまう

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Goole maps API でドラゴンボールの情報を快適にみよう!!

はじめに

  • ピンに情報を埋め込む方法
  • 他のピンをクリックした時
  • cssで装飾
  • 最後に

ピンに情報を埋め込む方法

ピンに情報を埋め込む方法は私の一個前の記事で紹介しています!
ぜひ参考にしてください!
https://qiita.com/Ryunosuke-watanabe/items/48c8ec80f87283cc0006

今回は前回立てたピンをクリックしたあとに、他のピンをクリックしたときの挙動を施します。
複数のピンが乱立していると見えにくいので、2個目のピンをクリックしたときに他のピンは消えるようにしましょう。

他のピンをクリックした時

htmlとcssは前回と同じです。

maps.html
<html>
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="map"></div>
    <script src="js/map.js"></script>
    <script src="data/place.json"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></scriptsrc>></script>
</body>
</html>
style.css
body {
    height: 100%;
    width: 100%;
}

#map {
    height: 100%;
    width: 100%;
}

JavaScriptの方で操作していきます。今回はみやすいようにJSONのデータを配列として記載しておきます。
データのballoonのなかに紹介文を本来は記載しますが、ホゲホゲとしておきます。

map.js
var map;
var marker = [];
var infowindow = [];
var Center = {lat: 24.4064, lng: 124.1754};
var place_data = [
    {
        "loc": "バンナ公園",
        "lat": 24.375031,
        "lng": 124.160795,
        "balloon": "hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge"
    },
      {
        "loc": "石垣島鍾乳洞",
        "lat": 24.361743,
        "lng": 124.154466,
        "balloon": "test"
    },
      {
        "loc": "石垣やいま村",
        "lat": 24.40489,
        "lng": 124.144636,
        "balloon": "test"
    }
]

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: Center,
        zoom: 11.5
    });
    markerset()
};

function markerset(){
    for(var i=0;i<place_data.length;i++) {
        marker[i] = new google.maps.Marker({
            position: {lat: place_data[i].lat, lng: place_data[i].lng},
            map: map,
            title: place_data[i].loc
        });

        infowindow[i] = new google.maps.InfoWindow({
            content: '<div class="mapsballoon"><h2>' + place_data[i].loc + '</h2>' + place_data[i].balloon + '</div>'
        });
        markerEvents(i)
    }
}

var opened = place_data.length + 1;
function markerEvents(i) {
    marker[i].addListener('click', function() {
        if (opened != place_data.length + 1) {
            infowindow[opened].close(map, marker[opened]);
        }
        infowindow[i].open(map, marker[i]);
        opened = i;
    });
}

openedという新しい変数を用意しておきます。そしてif文で2回目以降マーカーをクリックしたときに前回開いたマーカーを消すという作業をしています。これで二つ目のマーカーをクリックしたとき最初のマーカーは消えます。

image.png

ですが、紹介文があまりに長いとこのような感じでwindowが横長になってしまいます。なのでcssで変更を施していきたいと思います。

cssで装飾

実はJavaScriptでdivでballoonの中を囲ってあるので、class名のmapsballoonを指定して装飾することができます。

style.css
body {
    height: 100%;
    width: 100%;
}

#map {
    height: 100%;
    width: 100%;
}

.mapsballoon {
    width: 150px;
    height: auto;
}

横幅を150pxに指定、高さをautoにしておきました。そうすることで、横長くなることがなくなります。

image.png

こんな感じになりました!!

最後に

いかがだったでしょうか?前回の予告通りピンを立てる際の工夫を施しました。次回はgeocoding機能を実装したいと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Flex: PCで左←右、スマホで上→下の並び

お題:広い画面でボタンを右から左に並べ、狭い画面で上から下に並べる。

flex-direction.png

答え:flex-direction: row-reverse を使う。

参考: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#Alignment_and_flex-direction

HTMLはこんな感じです。Bootstrapを使っています。

    <div class="card shadow m-4">
      <div class="card-body">
        <div class="row row-submit">
          <div class="col-sm text-right">
            <button type="button" class="btn btn-primary">送信</button>
          </div>
          <div class="col-sm">
            <button type="button" class="btn btn-danger">キャンセル</button>
          </div>
        </div>
      </div>
    </div>

CSSはこんな感じです。デフォルトはモバイル版とし、広い画面で(@media (min-width: 576px))デザインを変えています。

  .row-submit button {
    width: 100%;
  }
  .row-submit .col-sm:not(:last-child) {
    margin-bottom: 1.5rem;
  }
  @media (min-width: 576px) {
    .row-submit {
      flex-direction: row-reverse;
      justify-content: flex-end;
    }
    .row-submit button {
      width: auto;
    }
    .row-submit button.btn-primary {
      width: 70%;
    }
    .row-submit .col-sm:not(:last-child) {
      margin-bottom: 0;
    }
  }

Bootstrapでは、.row と .col-sm には次のようなCSSが設定されています。

  .row {
    display: flex;
    flex-wrap: wrap;
  }
  @media (min-width: 576px) {
    .col-sm {
      flex-basis: 0;
      flex-grow: 1;
    }
  }
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

初心者によるプログラミング学習ログ 316日目

100日チャレンジの316日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
316日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Google maps APIでピンにドラゴンボールの情報を埋め込んでみよう!

はじめに

  • 複数のピンの立て方のおさらい
  • 情報を付け加える方法1
  • 情報を付け加える方法2
  • 最後に

複数のピンの立て方のおさらい

私の一個前の記事に複数のピンの立て方が掲載されていますので、そちらを参照してください。
Google maps APIで複数のドラゴンボールの場所にピンを立てよう! - Qiita

今回は立てたピンに情報を付け加えていきたいと思います。前回同様、複数のピンを目標としますのでfor文をうまく活用していきたいと思います。

Htmlは前回のままです。

maps.html
<html>
<head>
    <meta charset=“UTF-8”>
    <title>map</title>
    <link rel=“stylesheet” href=“css/style.css”>
</head>
<body>
    <div id=“map”></div>
    <script src=“js/map.js”></script>
    <script src=“data/place.json”></script>
    <script src=“https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEYg&callback=initMap” async defer></scriptsrc>></script>
</body>
</html>

Cssも前回と同様です。

style.css
body {
    height: 100%;
    width: 100%;
}

#map {
    height: 100%;
    width: 100%;
}

情報を付け加える方法1

ここまでは前回と同じですが、JSONの方から改善していきたいと思います。JSONにその場所の紹介文を載せておきたいと思います。今回は全てtestとしておきます。

place.json
var place_data = [
    {
        “Loc”: “バンナ公園”,
        “lat”: 24.375031,
        “lng”: 124.160795,
        “balloon”: “test”
    },
      {
        “Loc”: “石垣島鍾乳洞”,
        “lat”: 24.361743,
        “lng”: 124.154466,
        “balloon”: “test”
    },
      {
        “Loc”: “石垣やいま村”,
        “lat”: 24.40489,
        “lng”: 124.144636,
        “balloon”: “test”
    }
]

情報を付け加える方法2

次にJavaScriptの変更です、前回とは異なりmarkerの情報を保存するリストとウィンドウの情報を保存するリスト二つを用意します。

map.js
var map;
var marker = [];
var infowindow = [];
var Center = {lat: 24.4064, lng: 124.1754};
function initMap() {
    map = new google.maps.Map(document.getElementById(map), {
        center: Center,
        zoom: 11.5
    });
    markerset()
};

function markerset(){
    for(var i=0;i<place_data.length;i++) {
        marker[I] = new google.maps.Marker({
            position: {lat: place_data[I].lat, lng: place_data[I].lng},
            map: map,
            title: place_data[I].loc
        });

        infowindow[I] = new google.maps.InfoWindow({
            content: <div class=mapsballoon><h2> + place_data[I].loc + </h2>’ + place_data[I].balloon + ‘</div>
        });
        markerEvents(i)
    }
}

function markerEvents(i) {
    marker[I].addListener(click, function() {
        infowindow[I].open(map, marker[I]);
    });
}

このように書くことで、for文でmarker・infowindowにそれぞれ値を格納していくことができます。addListenerメソッドをしようすることで、クリックしたときにinfowindowが表示されるようにすることができます。

image.png

最後に

いかがだったでしょうか?前回の予告通りピンに情報を付け加える方法を紹介しました。次回はピンを表示する際の工夫を施していこうと思います。
参考文献
https://developers.google.com/maps/documentation/javascript/examples/event-simple

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Google maps APIで複数のドラゴンボールの場所にピンを立てよう!

はじめに

  • ピンの立て方のおさらい
  • for文で回してピンを立てる
  • JSONからデータを取得する
  • 最後に

ピンの立て方のおさらい

私の一個前の記事にピンの立て方までが乗っていますので、そちらを参照してください!
Google maps APIでドラゴンボールのある場所にピンを立てよう!! - Qiita

今回は複数のピンの立て方について解説していきます。複数のピンを立てる際に、一個ずつ立てるのもいいですがそれだと効率が悪いです。ですのでfor文をしようして効率よくピンを立てていきたいと思います。

HTMLは前回のままです。

maps.html
<html>
<head>
    <meta charset=“UTF-8”>
    <title>map</title>
    <link rel=“stylesheet” href=“css/style.css”>
</head>
<body>
    <div id=“map”></div>
    <script src=“js/map.js”></script>
    <script src=“https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap” async defer></scriptsrc>></script>
</body>
</html>

Cssも前回と同じです。

style.css
body {
    height: 100%;
    width: 100%;
}

#map {
    height: 100%;
    width: 100%;
}

for文で回してピンを立てる

今回はJavaScriptでピンを複数立てる操作をしていきます。

map.js
var map;
var marker;
var place_data = [
    {
        Loc: “バンナ公園”,
        lat: 24.375031,
        lng: 124.160795,
    },
      {
        Loc: “石垣島鍾乳洞”,
        lat: 24.361743,
        lng: 124.154466,
    },
      {
        Loc: “石垣やいま村”,
        lat: 24.40489,
        lng: 124.144636,
    }
]
var Center = {lat: 24.4064, lng: 124.1754};
function initMap() {
    map = new google.maps.Map(document.getElementById(map), {
        center: Center,
        zoom: 11.5
    });
    marker()
};

function marker(){
    for(var I=0;i<place_data.length;i++) {
        marker = new google.maps.Marker({
            position: {lat: place_data[I].lat, lng: place_data[I].lng},
            map: map,
            title: place_data[I].loc
        });
    }
}

Markerというファンクションを作成しその中でfor文で回します。place_dataという配列を作成しその中に位置情報・場所の名前を記入しておきます。あとはfor文でmarkerを立てていくだけです。

JSONからデータを取得する

先ほどはJavaScriptの配列の中に位置情報や場所の名前を入れていましたが、今後のことを考えてjson の方にデータを移してJavaScriptとつなげたいと思います。

place.json
var place_data = [
    {
        “Loc”: “バンナ公園”,
        “lat”: 24.375031,
        “lng”: 124.160795,
    },
      {
        “Loc”: “石垣島鍾乳洞”,
        “lat”: 24.361743,
        “lng”: 124.154466,
    },
      {
        “Loc”: “石垣やいま村”,
        “lat”: 24.40489,
        “lng”: 124.144636,
    }
]

JSONの方でこのように書き込むとJavaScriptでスムーズにJSONと接続することができます。あとはhtmlでscriptを追加するだけです。

maps.html
<html>
<head>
    <meta charset=“UTF-8”>
    <title>map</title>
    <link rel=“stylesheet” href=“css/style.css”>
</head>
<body>
    <div id=“map”></div>
    <script src=“js/map.js”></script>
    <script src=“data/place.json”></script>
    <script src=“https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEYg&callback=initMap” async defer></scriptsrc>></script>
</body>
</html>

これだけで簡単にJSONと接続することができます。これからたくさんのピンを立てたいと考えたときは、やはりJSONでデータを分けた方がいいと思いますのでこちらで書いたほうがいいでしょう。

最後に

いかがだったでしょうか?前回の予告通り複数のピンを立てる方法を紹介しました!次回はこのピンに情報を埋め込む方法を紹介したいと思います!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

インラインやブロックについて

displayとは、inlineやblockの違い

displayについて

  • プロパティの一つで、要素の表示形式を決めるもの
  • displayに対して、表示形式を指定する値が「inline」や「block」である

1589441134568@2x.jpg

1589445343450@2x.jpg

inlineやblock、inline-blockにはそれぞれ初期設定値が決まっていたり、指定できることとできないことがあります!

例えばblockは改行されるが、inlineは横並びになる。
inlineは幅や高さの指定ができないため、左右のpaddingとmarginしか指定できない。(widthやheightなどで指定できないということ)
blockはtext-alignの指定ができない(text-alignはまた別の機会に説明)
などなどルールがあるので頭に入れておくように!

inline-blockとは

inline-blockとはinlineのように横並びになっているblock。
なので幅や高さを指定することはできる。

今回新しく知った情報

  • 「vertical-align」 => text-alignの縦バージョン
  • 「list-style-type: none;」 => ul要素の箇条書きのボッチを消す
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む