ピンチイン（ピンチアウト）の倍率を取得するJavaScript
pinch-in / pinch-out で、拡大縮小の割合を計算するスクリプトです。 写真を拡大縮小して見るスクリプトの一部です。 サンプルは、タッチデバイスで動作します。 マルチタッチを感知すると白背景にかわり、ピン …
記事一覧 3ページ
CSSのグラデーションでストライプをつくる
CSSのrepeat-gradientを使って、画像を使わずストライプをつくります。
レスポンシブデザイン実装のブレークポイント
レスポンシブデザインのCSSmediaqueryの設定サンプルです。 サンプルを別窓表示するリンク
サイズが可変のtableのセルに斜線を引くCSS
SVGを活用すると、可変になっている矩形の端から端にスタイルシートでナナメの線を引くことができます。 リキッドの<table>対戦表でセルに斜線を引く場合などでいかがでしょうか。 パソコンのブラウザの場合は、 …
JavaScriptのprototypeをつかったオブジェクト指向サンプルソース
セレクトボックスで選択した値に応じて特定要素の表示を切り替える11行のJavaScriptを prototypeを使ったオブジェクト指向の組み方などでがっちりかためてみたサンプルです。
JavaScriptを使わない簡易コンテンツライブラリー
HTMLのラジオボタンとCSSで、JavaScriptを使わずに 文字情報や写真を切り替える簡単なライブラリを作成できます。
input form をリセットするJavaScript
<input type=”file”>は、JavaScriptでvalueをリセットしても選択したファイルの情報が残ってしまうので 入力前のinputタグごとDOMを削除再描画して復元する方法でリセットを実行 …
SVGにwidth,heightを指定していないとIEでbackground-sizeより縮小されるバグ
IE11では、レスポンシブ対応のためwidth,heightを指定していないSVG画像をbackgroundに指定した際 画像がbackground-sizeで指定したサイズよりも小さく表示されてしまうバグがあります。 …
gitコマンドを実行しようとするとXcodeのライセンス同意を求められたら
コマンドラインでgitのコマンドを実行すると、このようなXcodeのライセンス同意をもとめる文章で差し止められることがあります。 SourceTreeで規約同意を求められた場合はこちら
SVGをグラデーションで塗りつぶす
Illustratorでグラデーションで塗りつぶしたベクター画像をSVG書き出しすると、 わざわざグラデーション部分をラスタライズ画像として保存しマスキングする構造のSVGを生成してくれます。 せっかくビットマップ画像と …