CSSのclip-pathでコンテンツを丸く切り抜く
マテリアルデザインの、ボタンが円形に広がりコンテンツ表示領域となるエフェクトを作りたくて 画像ではなくテキストやその他のタグも含んだ要素をマスキングするclip-pathの使い方を研究してみました。 サンプルは、マウスや …
記事一覧 3ページ
JavaScriptの浮動小数点と小数点以下N桁での四捨五入
JavaScriptは浮動小数点数を使用しているため たまに、計算結果として小数点以下に凄い00000000の桁がくっついてくることがあります。 -0.1 + -0.4 = -0.30000000000000004 参考 …
JavaScriptでAndroid4.4対応のUI実装のとき思い出す非対応機能
2018年前半、まだクライアントワークで対応することがあるAndroid4.4でサポートされていないJavaScriptやCSSの備忘録です。 端末やOSのシェア率を調べることができるスマタブinfoによると、 2018 …
querySelectorAllで取得したNodeリストを配列化
querySelectorAllで取得したDOMはNodeListという形式で配列ではないため filterを使用してソートやユニーク判定をしようとすると 「これは配列ではないので実行できないよ」というエラーを返され実行 …
ピンチイン（ピンチアウト）の倍率を取得するJavaScript
pinch-in / pinch-out で、拡大縮小の割合を計算するスクリプトです。 写真を拡大縮小して見るスクリプトの一部です。 サンプルは、タッチデバイスで動作します。 マルチタッチを感知すると白背景にかわり、ピン …
CSSのグラデーションでストライプをつくる
CSSのrepeat-gradientを使って、画像を使わずストライプをつくります。
レスポンシブデザイン実装のブレークポイント
レスポンシブデザインのCSSmediaqueryの設定サンプルです。 サンプルを別窓表示するリンク
サイズが可変のtableのセルに斜線を引くCSS
SVGを活用すると、可変になっている矩形の端から端にスタイルシートでナナメの線を引くことができます。 リキッドの<table>対戦表でセルに斜線を引く場合などでいかがでしょうか。 パソコンのブラウザの場合は、 …
JavaScriptのprototypeをつかったオブジェクト指向サンプルソース
セレクトボックスで選択した値に応じて特定要素の表示を切り替える11行のJavaScriptを prototypeを使ったオブジェクト指向の組み方などでがっちりかためてみたサンプルです。
JavaScriptを使わない簡易コンテンツライブラリー
HTMLのラジオボタンとCSSで、JavaScriptを使わずに 文字情報や写真を切り替える簡単なライブラリを作成できます。