【第4弾】少しのコードで実装可能な10のCSS小技集
2021年3月4日 CSS CSS小技集シリーズの第4弾！「【第3弾】少しのコードで実装可能な15のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 要素の上下左右中央配置 画面幅いっぱいに画像を配置 リストマーカーの色を変える 言語にあわせて引用符を変更 クリックで文字列を選択 背景画像を見切れないよう繰り返し表示 入力時の縦線の色を変更 ドラッグで要素のサイズを変更できるようにする floatは flow-root で解除 文章をカラム分けしてラインを入れる HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. 要素の上下左右中央配置 ボックスを要
)
sheet2gmap - GoogleシートとGoogleマップを簡単に連携
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Googleマップではユーザがカスタマイズしてピンを立てたり、情報を付与する機能があります。便利なのですが、使うためにはJavaScript SDKを使いこなさなければなりません。また、データをどこかに保存しておく必要もあります。そのため利用を控えてしまっていないでしょうか。 今回紹介するsheet2gmapは世界一簡単なマップツールを自認しています。Googleシートを編集するだけで、Googleマップ上にデータを即座に反映できます。 sheet2gmapの使い方 最初の表示です。 Googleシートを開きます。 データを追加します。住所が入力されていれば、位置情報は自動的に補完してくれます。 再度マップを見ると、追加したデータのマーカーが立てられています。 sheet2gmap
infobox.jsを使って、画像なしで連番のオリジナルマーカーを作ってみよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
準備するもの Googlemapのinfowindowをカスタマイズする「infobox.js」 基本的な使い方については、以前別の記事で書いているので参考にしてください。 本稿のinfobox.jsの使い方は、吹き出しだけでなく、マーカーもオリジナルのDOMで作って、テキストも自由に置けるようにしてしまおうというものです。 機能を洗い出してみよう！ まずテキストで必要な機能をざっくり並べてみましょう。 googlemapのインスタンスを作成 infoboxを作成 ショップ情報を配列で用意 配列をfor文で回す マーカーのDOMを作成 吹き出しのDOMを作成 マーカーを全て表示する マーカーにクリックイベントを紐づける 全infoboxを非表示にする関数を用意 あとはこれにそってコードをガンガン描いていくだけです！ HTML、CSS、JSコーディング ではコーディングしていきましょう。 H
ImageMaps - Naver製。地図画像の編集ツール MOONGIFT
地図は地図のまま利用するのではなく、多くの場合その上にアイコンを載せたり線を描いたりします。そうすることで目的の場所を目立たせたり、駅などから目的地へ移動しやすくなるでしょう。 今回紹介するのはImageMaps、地図の上にアイコンなどを載せられるjQueryプラグインです。 ImageMapsの使い方 編集画面です。アイコンやテキスト、円や四角などが描けます。 こんな感じでアイコンを載せて大きさを変えたりしながら地図を編集していきます。 できあがった地図。これは画像ではなく、SVGとなっています。 ImageMapsの編集結果は読込専用のSVGとなっています。画像ではないので注意してください。日本語なども問題なく扱えますし、アイコンやドローを多彩にすると便利そうです。 ImageMapsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。
Google Maps API v3で表示した地図にマーカーを表示する
Google Maps API v3で表示した地図にマーカーを表示する方法を紹介します。 １．はじめに 「Google Maps API v3を使ってウェブサイトやブログに地図を表示する」では地図を表示するサンプルコードを紹介しました。 サンプルコード <script> google.maps.event.addDomListener(window, 'load', function() { var mapdiv = document.getElementById('map'); var myOptions = { zoom: 15, center: new google.maps.LatLng(35.689779, 139.700381), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, }; var map =
Google Mapで任意の場所の周囲にある施設をマーカーで表示するjQueryプラグイン・WhatsNearby
Google Mapで、任意のポイントと、そのポイントの周囲にある施設をマーカーで表示出来る、というスクリプトです。範囲の距離の指定や施設の種類、中心地に設定したマーカーなども設定出来るようになっています。 Google Mapの任意の場所の周囲にある施設をマーカー表示する、というもの。うまく説明出来ませんが語彙がアレなのでご了承下さい。 以下動作サンプルです。 下北沢駅周辺の半径200メートル内のカフェを表示させました。マーカーをクリックすればお店の情報がポップアップします。 $("#foo").whatsnearby({ zoom:17, width:"100%", address: "下北沢", placesRadius: 200, placesTypes: [ 'cafe' ] });セッティングは上記のような感じ。placesRadiusで指定場所から半径～メートル内にある、pl
Googleマップカスタムフィールドプラグインのマーカーをカスタマイズする
2024年2月1日 拙作プラグインの譲渡について 拙作のMovable Typeのプラグインを、株式会社ワールドイズマインに譲渡いたしました。 長きにわたり拙作のプラグインをご愛顧いただき、ありがとうございました。 Googleマップカスタムフィールドプラグインに対して、マーカーをカスタマイズしたいというご質問をいただきました。 その方法を紹介します。 Google Static Maps APIを使う場合 Google Static Maps APIを使って静的な地図を表示するだけなら、テンプレートタグの組み合わせだけで、マーカーをカスタマイズすることができます。 マーカーの色やラベルを変えるだけなら、地図を表示するブロックタグ（MTXXXBlockタグ）の中で、以下のようにテンプレートタグを組み合わせます。 img要素のsrc属性が長いので改行を入れていますが、実際にはsrc属性は改行
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA