この他にも様々なAPIがあります、詳しくは公式のGoogle Maps APIのページをご覧ください。 今回は一般的な、webサイトで利用するためのGoogle Maps JavaScript APIを用いて話を進めていきます。 デモページの紹介 前置きが長くなりましたが、Google Maps APIを使ったデモページをご紹介します。 デモページを見る 全国の地方自治体を上記3サイトにおける店舗と見立てて実装しました。 （上記3サイトと比べるとだいぶ機能が削ぎ落とされていますが。） 挙動の説明等はデモページ上に記載していますので、こちらでは具体的な実装方法について順番に説明していきたいと思います。 なお、実装にはHTML、CSS、JavaScriptとjQueryの基礎知識があれば大丈夫だと思います。 1.必要なデータを準備する まず、マップ上に表示する建物のデータが必要です。今回の実装

cssだとメディアクエリーを使うことで、デバイス毎にcssを分離出来るから便利だったり。 けどjsにはそんな都合がよいものはないわけで、じゃあどうするかって考えると、 $(window).width()で条件分岐してあげるって考えるけど、 画面サイズが変わった場合って考えると$(window).resize()を使う事になるんだけど、 resizeはwindowサイズが変わるたびにイベント発火するし、 そもそもwindowsサイズが変わらなかったら発火できないからイベントを付与する前に発火を一度しないといけない。 まぁそこら辺考えると面倒だし、そもそも640pxみたいに指定した大きさで発火してほしいんだけど、 それに対応するにはwindow.matchMedia()を使うと対応する事が出来る。 ということで今日はそのwindow.matchMedia()の使い方についてをば。 $(docu

ここ数年くらい、自分の中のCSS設計はFLOCSSベースで割と安定しているかなと思ってるので、制作会社のブログっぽくCSS設計に関して何やかんや書いてみたいと思います。 今回の内容はあくまでも自分のCSS設計ってこんな感じですよって話なので、「平澤ってこういう風に設計してんのね、ふーん。」程度でお願いします。 コレを参考にして破綻したって責任は持てません！ FLOCSSを選んだ理由 色んなCSS設計を調べたりして検討していた頃、最終的に落ち着いたのが谷さんが提唱してるFLOCSS（フロックス）でした。 FLOCSSを提唱してる谷さんは、Web制作者のためのCSS設計の教科書の著者でも有るので、書籍を購入してFLOCSSを参考にした方も多いのではないでしょうか？ と、ちゃっかりアフィID貼ってAmazonにリンクしておきましたので、CSS設計ってなんです？って方はちょっと古い本ですが、ご購入

気づけば前回の更新から1年以上の時が...時間の流れが早すぎてやばいですね。 もう今更感も満載ですが、第3回は1Fのトイレと階段下収納のご紹介です。

このサイトは、2017年9月15日に発売した、書籍「Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ」の公式サポートサイトです。 試し読み用のPDFや、書籍内で掲載されているソースコードの一覧、サンプルファイルなどが有ります。 また、初版と改訂2版の違いが分かるページも用意しました。改訂2版の購入を検討している方の参考になればと思います。

大きな違いとして、定価が2,800円から2,400円とお安くなりました！ 値段はページ数が351ページから296ページに減った関係ですが、薄くなった分持ち運びしやすいかも知れません。 各章ごとの違いをつらつらと書いていきます。 改訂2版を買うか迷ってる方の参考になれば幸いです！ 第1章 Sassのキホン 全体的な文書の見直しが主な変更点です。 大幅な変更は行っていませんが、Sass はかなり普及したよね。的な内容が追加されたりしてます。 第2章 Sassの利用環境を整えよう 現在のフロントエンド開発に合わせるため、全面刷新しました。 初版では Ruby Sass を使って利用環境を整えましたが、改訂2版では Node.js と LibSass(node-sass) を使った内容にしています。タスクランナーでは現在安定した人気のある、gulp を使って解説しています。GUIコンパイラに関して

※こちらの価格には消費税が含まれています。 ※この商品は2点までのご注文とさせていただきます。 ※別途送料がかかります。送料を確認する ※サンプルイメージにお客様のお名前がある場合、安心して銀行印としてもご利用いただけるように、サンプルとは僅かに異なるライン配置の商品をお作りします。 グラフィカルな幾何学模様で設計図の様に構築された、OOiNN(オーイン)オリジナル印鑑＆ネーム印「GRAPH」シリーズ。 【製品情報】 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 漢字と図形の美しさを融合した、ユニークで新しいデザインのグラフハンコです。 名前(苗字)でロゴのような印鑑を作成することができます。 印材は、象牙に似たホワイトカラーの合成樹脂「ラクト材（10mm）」を使用。 こちらの商品も銀行印などに使用できることを確認し

ラテールはこのほど、猫をテーマにした電卓アプリ「NekoCalc」の提供を開始した。 Androidの様々な画面サイズに対応 同アプリは、Android向けに開発。猫をあしらったファンシーなデザインだけでなく、機能を充実させた。 特徴は、操作し易いサイズ、位置にキーボードを変更することができること。キー配列をシャープ系とカシオ系から選ぶことができること。税込、税抜価格の計算や、源泉所得税の計算もボタン一つで出来ること。計算の履歴が確認でき、履歴部分をタップすれば合計が表示されることなど。

電卓に妥協してはいけない！ いきなり熱くなってしまいましたが、スマホといえば標準でも電卓アプリが入っていますし、アプリストアを探せばたくさんの電卓アプリが出てきます。でも普段使いの電卓として、使い勝手の良いアプリは限られているもの。 そこで見つけたのが『ラテカルック（LateCalc）』という国産の電卓アプリです。その「かゆいところに手が届く」使いやすさのポイントは以下の3点。 税込価格がボタンひとつでわかる消費税率が8％になってから、店舗によって税込み・税抜きの価格表示が混在していて正直ややこしいですよね。特に税抜き表示の場合は、まだ慣れてないこともあってか実際に支払う金額のイメージがしにくいのが現状だったり。 ラテカルックは「税込」ボタンを押すだけで自動的に税込み価格を表示、さらにもう一度押せば税額を表示してくれるのが便利です。逆に「税抜」ボタンでは、税込み価格から本体価格に一発変換し

CSSメタ言語、またはCSSプリプロセッサーと呼ばれるものは、ここ数年で注目されてきているCSSを管理しやすい形で記述するための技術です。 この本はそうしたCSSメタ言語の中でもSassというものに焦点を当てて解説した書籍です。この本一冊でSassの基礎から応用、CSSメタ言語を取り巻く制作環境などについて学ぶことができます。 本を書いたのは私の尊敬する二人のWeb制作者、ひらさん(@hira)さんとそうさん(@sou_lab)です。そして実は私もこの本の校正作業に加わらせてもらっていたので、リリースされて喜びもひとしおです★ そして既にお二人自身の記事の他何人かの手でしっかりとしたレビューが書かれてるんですけど、私はSass初心者のデザイナーとしての視点で書くとしますね。 Web制作者のためのSassの教科書の内容 本書はざっくり、Sassというもの自体の解説、環境の用意、機能や使い方の

こんにちは、霙(@xxmiz0rexx)です。 このたび著者の平澤さんと森田さんに『Web制作者のためのSassの教科書』をご恵贈していただいたので、思い切ってSassに挑戦してみました♪ これからやってみようかな？という人の参考になればと思い、書評プラスSassの使用感を記事にしたいと思います。 『Sassの教科書』について インプレスジャパンさんから発売された国内初のSass書籍！ AmazonのWeb開発カテゴリでベストセラー1位にもなった脅威の人気っぷり！(キャプチャ撮影:2013.09.20)すごすぎる！！ 目次 まずは本書の目次からご紹介。結構盛りだくさんですよぉぉぉ！！ 第1章 Sassのキホン 1-1 まずはSassって何なのかを知ろう 1-2 Sassを導入する前の疑問や不安 1-3 何はともあれSassを触ってみよう 第2章 Sassの利用環境を整えよう 2-1 Win

気づけば前回の更新から1年以上の時が...時間の流れが早すぎてやばいですね。 もう今更感も満載ですが、第3回は1Fのトイレと階段下収納のご紹介です。