MapboxGLで使うGeocoderの紹介です。 地名、住所などから経度緯度を調べることができます。 Your browser does not support HTML5 video. まずはMapboxのユーザー発行後、Access tokenを取得する必要があります。 今回はpk.〜から始まる物を使います。 https://account.mapbox.com/ ステップを踏んでやり方を教えてくれるのでプロジェクトに合わせてinstall&importしていきます。 この後の細かいところの説明は公式にお任せしまして... https://docs.mapbox.com/mapbox-g...
Hello web developer :) Web屋さん御用達のChrome DevTools小ネタを紹介。第1弾。(シリーズ化する風) 要素にshadowを追加する時に便利なTipsです。 まずいつも通りDev Toolsを開きます。( Macは command + option + i ) 今回使うのは一番馴染みがあるであろう、ElementsのStylesタブです。 好きな要素のStylesにマウスカーソルを載せると5つアイコンが出てきます。左から2つめがshadowです。 吹き出しの中の青いトグルを動かすと直感的に影の向きと大きさ、影のぼやけ方、影の距離を変更できます。便利! こんな...
Webサイトを作る時、他のサイトさまを参考にすることってよくあると思います。 その際によく使うおすすめChromeExtensionをご紹介します。 1.スクリーンショットを撮る Awesome Screenshot https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj App版 https://chrome.google.com/webstore/detail/awesome-screenshot-app/mfpiaehgjbbfednooiha...
7月にオフィスを引っ越してから駅からオフィスまでが少し距離が増えました。 (お客様が迷ってしまうこともしばしば。。) というわけで、横浜駅きた東口から弊社オフィスまでの道案内です。 では横浜きた東口からスタート。 出口左手にあるエスカレーターを利用しベイクオーター方面へ ベイクオーター到着。 お店がいっぱいあるので帰り道に寄り道もオススメです。 KALDIとLAWSON前を通ってベイクオーターの中を通り抜けます。 右側の歩道橋へ進みます。 歩道橋の上からポードサイド公園交差点が見下ろせます。 歩道橋を降り右手へ進みます。右側に交番があります。 右手に壁画を見つつずーっと直進します。 PORTS...
Noto Sans Japaneseこと、NotoSansCJKの元ファイルは結構な容量なので軽量化してwebfontで使おう計画第一歩。 Noto Sans Japanese試してみたの続編です。 NotoSansCJKjは1ファイル(1ウェイト)でだいたい16MB越えなので、それらを軽量化します。 使うツール サブセットフォントメーカー WOFFコンバータ 1. サブセット化 サブセットフォントメーカーを使ってフォントファイルの中身を削ります。 作成元フォントファイル:NotoSansCJKjp-Medium.otf フォントに格納する文字:以下のアルファベット+@ 、。,.:;?! ゙ ...
ChromeでWebサイトを印刷する際、デフォルトだと背景が消えてしまいます。 本来なら印刷する際にはインクの消費や見やすさの観点から背景は含まない方が良いと思うのですが、背景付きで印刷したいケースも多々あるかと思います。そんな時に役立つであろう備忘録です。 印刷設定変更 サンプルではいつもお世話になっているwww.google.co.jpを使わせて頂きます。 1.印刷プレビューを開く まず印刷プレビューを開きます。 デフォルトの設定だとwww.google.co.jpの象徴、ロゴが消えてしまっていますね。 2. オプション変更 オプションのところにある、「背景のグラフィック」にチェックを入れ...
http://blog.getbootstrap.com/2015/08/19/bootstrap-... Bootstrap4がもうそろそろ来ますよーって告知があったので一部ご紹介。 3.2.0が来たのが2014の夏頃(だった気がする)ので、 ちょうど一年ぶりくらいのメジャーアップの予感。 特に下記注目。 ”Dropped IE8 support and moved to rem and em units.” Dropped IE8!(大事なことなので。 github(https://github.com/twbs/bootstrap/commits/v4-dev)を見ても分る通り、 大工事...
HTMLのformパーツ定番のinputなどに使えるplaceholder属性の見た目を調整する際に使用するセレクタめも。 これでfont-sizeとか諸々のスタイルを編集出来ます。 /* Chrome, Safari */ ::-webkit-input-placeholder { } /* Firefox 18- */ :-moz-placeholder { } /* Firefox 19+ */ ::-moz-placeholder { } /* IE 10+ */ :-ms-input-placeholder { } ちなみに、 /* セレクタまとめたい症候群 */ ...
普段ChromeでGoogleカレンダーを利用している私はあまりiCalは利用していませんでしたが、 少し調べてみたら便利そうな機能を発見したのでご紹介します。 タイトルの通り、Macにインストールされているアプリを特定の日時に起動させることができます。 使うもの 標準装備のiCalことカレンダーアプリを使います。 使い方 1.イベント登録します タイトル、日時をご自由にどうぞ。 2.イベントに起動したいappを指定する イベント登録時の吹き出しの下の方にある"添付ファイルを追加"のメニューからお好きなappを選びます。 3.その時を待つ 指定した日時に選んだappが起動します。 Macの自動...
HTML周りのコーディングに便利なSublime Textを使って簡易サーバが立てられちゃいます。 気軽にローカル環境で表示チェックをしたい時にピッタリです。 SublimeServerをインストール 1.Command Palletを開く メニューのToolsの一番上にあります。 ショートカットはcommand + shift + pです。 2.Package Control: Package Installを選択 ※Package Controlも別途インストールする必要があります。(https://packagecontrol.io/installation#st3) 3.表示されたリス...
