投稿日:

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キー必須になったため
無料とはいえ、地図を設置するＷEBサイトを登録することが必須になりました。

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

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

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

投稿日:

iOS Safari で fixed 配下の overflow-scrolling要素がフリーズするバグ

iOS Safari 8, 9, 10 では
overflow-scrolling: touch; を指定している要素の親に position: fixed; を指定している要素があると
要素を最後までスクロールしたあと、さらにスクロールしようとする操作をしたとき
…つまり、バウンスが発動しようとしてfixedで阻止された瞬間に
画面が数秒間フリーズする不具合があります。

いろいろ試しましたが、行き着いた回避策は2つ

  1. fixedを諦める
  2. overflow-scrolling: touch;の慣性スクロールを諦める

いずれかでした。

“iOS Safari で fixed 配下の overflow-scrolling要素がフリーズするバグ” の続きを読む

投稿日:

JavaScriptでカラーコードをHEX（16進数）/RGB変換

HEX（#ff000などの１６進数カラーコード）をrgbに変換するJavaScriptです。
HEX指定の色を、半透明にしたくてrgbaコードがほしい時に使いました。

See the Pen HEX <--> RGB by webdev (@webdev-jp-net) on CodePen.0

HEX→RGB

HEXは、R2桁+G2桁+B２桁が集合した6桁なので
この手順でRGBに変換できます。

  1. substringで2桁ずつ３つに分解
  2. parseIntで16進数から10進数に変換

RGB→HEX

HEXからRGBの逆パターンです。

  1. R,G,Bそれぞれの値をparseIntで10進数から16進数に変換
  2. ６桁に結合
投稿日:

Internet Explorer では HTML5の main タグが使えない

極論から。
InternetExplorerではHTML5の<main>タグは使えません。

検索するとたくさん該当するのが
IEはデフォルトで<main>タグをinline要素として認識するから、CSSが意図したように適用できないという情報です。
そのため、このようなCSSを追加れば<main>も使えるようになると…

main {
	display: block;
}

そうだと信じてたんです。
しかし、ある人のIEではこのスタイルすらも完全スルーされることが判明。
ガーン！

“Internet Explorer では HTML5の main タグが使えない” の続きを読む

投稿日:

特殊文字をCSSのcontentへ表示

CSSのcontentでは文字を挿入することもできますが
「&(&amp;)」「>(&gt;)」などの特殊文字はコードのまま出力されてしまいます。

contentで特殊文字を使うときは、16進数の数値文字参照コードの& # x を、\や0に置き換え、セミコロンをとると指定できます。

  • & → \
  • # → 0
  • x → 0

「>」の記号をCSSの擬似要素で表示

「>」の参照はこうなります

  • 文字参照 → &gt;
  • 10進数の数値参照 → &#62;
  • 16進数の数値参照 → &#x003E;

16進数の数値参照 &#x003E; の記号を置換します。

  • &#x003E; → \00003E

これをCSSのcontentに設定。

// > を挿入
.btn_next::after {
	content: '\00003E';
}

ボタンに>>をスタイルで表示するサンプル

See the Pen Enter entities in CSS’s content property by webdev (@webdev-jp-net) on CodePen.0

投稿日:

Sassの関数でサイズ指定を簡単に

Sassの@functionでサイズをコンバートする関数を自作すると、マークアップで少し手抜きできます。

値を1/2に変換

レティーナディスプレイ対策もすっかり定番となり
Photoshopのデザインデータは大概×2サイズでできたものとなっているかと思います。

これを、マークアップのときサイズ変換するのが地味に面倒だったりします。
たとえば、デザイン上で36px(36pt)と指定されている文字は×0.5してこうなります。

.headline {
	font-size: 18px;
}

これまで何の疑問もなくいちいち×0.5していましたが、functionを使えばそもそも計算しなくて済むことに気づきました。
このように値を半分にコンバートする関数を設定すれば

@function size($n) {
	@return: $n * .5;
}

デザインデータの値をそのまま入力するだけでOK。塵も積もれば工数削減になります。

.headline {
	font-size: size(36px);
}

“Sassの関数でサイズ指定を簡単に” の続きを読む

投稿日:

IEにも対応 javaScriptでSVGのpathをアニメーション描画

SVGのpathに沿って線が徐々にのびていき描画しているようにみせるアニメーション。

これは、波線を制御するstroke-dashoffsetの値を大きめに設定し0に近づけていくことで実現でき
CSSのアニメーションでも設定できます。

参考：
SVGでアウトラインをカスタマイズしてみよう | Webクリエイターボックス

が!!
IEはver.11(2016年12月現在の最新版)でもこれに対応していないため
何も表示されていない状態で静止してしまいます。

IEでもSVGをアニメーションさせるには、stroke-dashoffsetの値をjavaScriptのループで少しずつ大きくする形で制御します。

See the Pen SVG path drewing by webdev (@webdev-jp-net) on CodePen.0