SVGにwidth,heightを指定していないとIEでbackground-sizeより縮小されるバグ

IE11では、レスポンシブ対応のためwidth,heightを指定していないSVG画像をbackgroundに指定した際
画像がbackground-sizeで指定したサイズよりも小さく表示されてしまうバグがあります。

これを回避するためには、SVGにwidth,heightを指定した上で、CSSのbackground-sizeも指定します。

サンプルソース※IEで表示すると症状が再現します

.pattern {
	width: 100vw;
	height: 10vw;
	background: url('dot.svg');
	background-size: 5vw;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
	<circle cx="0" cy="0" r="12"/>
	<circle cx="30" cy="30" r="12"/>
	<circle cx="60" cy="60" r="12"/>
	<circle cx="0" cy="60" r="12"/>
	<circle cx="60" cy="0" r="12"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 60 60">
	<circle cx="0" cy="0" r="12"/>
	<circle cx="30" cy="30" r="12"/>
	<circle cx="60" cy="60" r="12"/>
	<circle cx="0" cy="60" r="12"/>
	<circle cx="60" cy="0" r="12"/>
</svg>

gitコマンドを実行しようとするとXcodeのライセンス同意を求められたら

Agreeing to the Xcode/iOS license requires admin privileges, please run “sudo xcodebuild -license” and then retry this command.

コマンドラインでgitのコマンドを実行すると、このようなXcodeのライセンス同意をもとめる文章で差し止められることがあります。

SourceTreeで規約同意を求められた場合はこちら

“gitコマンドを実行しようとするとXcodeのライセンス同意を求められたら” の続きを読む

SVGをグラデーションで塗りつぶす

Illustratorでグラデーションで塗りつぶしたベクター画像をSVG書き出しすると、
わざわざグラデーション部分をラスタライズ画像として保存しマスキングする構造のSVGを生成してくれます。
せっかくビットマップ画像と決別したかったのにこれでは煮え切らない (笑)
ということでXMLコードだけでfillをグラデーションにする方法を探しました。

“SVGをグラデーションで塗りつぶす” の続きを読む

Vue.js の イベント装飾子で preventDefault と stopPropagation

Vue.js 2では、テンプレートでイベント装飾子を使うと簡単にpreventDefaultやstopPropagationを定義できます。

参考:
イベントハンドリング – Vue.js

event.preventDefault -> .prevent

<a href="#" @click.prevent="ファンクション">link</a>

event.stopPropagation -> .stop

<a href="#" @click.stop="ファンクション">link</a>

重ね付け

<a href="#" @click.prevent.stop="ファンクション">link</a>

サンプル

formの枠をクリックで背景色が点滅
リンク先の設定してあるリンクにclickイベントを付与し、.preventと.stopのサンプル
actionでURLが設定してあるformのbuttonにclickイベントを付与し、.preventと.stopのサンプル

See the Pen Vue.js event modifier by webdev (@webdev-jp-net) on CodePen.0

登録なしで地図を組込みたいなら Leaflet.jsで国土地理院地図を表示

2016年の6月からGoogleMapsAPIのサービスが、APIキー必須になったため
無料とはいえ、地図を設置するWEBサイトを登録することが必須になりました。

そこで、代わりというには少し毛色が違うかもしれませんが
ルート検索などの機能はついていないものの、登録なしで自由にさわられる地図表示の仕組みとして
JavaScriptライブラリLeaflet.jsを使い、国土地理院が無料で公開している地理院地図のタイルデータを表示するサンプルを紹介します。

See the Pen Leaflet.jsで国土地理院地図を表示 by webdev (@webdev-jp-net) on CodePen.0

“登録なしで地図を組込みたいなら Leaflet.jsで国土地理院地図を表示” の続きを読む