JavaScript [JavaScript]select（選択要素）で選択中のoption要素を取得する
value値ではなく、要素そのものを取得する方法です。最も有効活用できるパターンはoptionに設定されたデータ要素などを取得する場合でしょうか。
JavaScript
JavaScript JavaScript [JavaScript]ページ内リンク（アンカーリンク）をスクロールさせる
アンカーリンクをクリックしたときにススーッとスクロールさせます。このサイト全体に実装しているので、上記の目次で試すことができます。
CSSを使った記事はこちら。
HTML
<a href="#s1"&g...
HTML [サクッと]ファイルアップロード(input type=”file”)にサイズ制限を設ける
ファイルアップロード(input type="file")にサイズ制限を設ける方法です。
サンプル
上記のサンプルでは実際にアップロードされることはありません。
HTML
<input type=...
HTML [サクッと]input type=checkboxに上限を設ける[JavaScript]
複数選択可能なチェックボックスに上限を設ける方法です。
サンプル
選択肢1
選択肢2
選択肢3
選択肢4
選択肢5
選択肢6
選択肢7
HTML
<input type="checkbox" name="...
JavaScript [swiper]hashを使わず特定のスライドから始める
Swiperで特定のスライドから始めたい場合はAPIの「Hash Navigation」が便利ですが、以下のような問題があります。
URLのハッシュが連動して変わっていくことが気になる。ハッシュを複数使い分けることはできないため、ア...
JavaScript [JavaScript]setTimeout待機中に同じ処理が行われた場合、前の処理を中断する
例えば「押されたら1秒後にアラートを表示するボタン」をアラートが表示される前に3回押すと、全ての処理が継続されアラートが3回表示されます。これを待機中に押された場合はそれまでの処理を中断し、最後に押されてから1秒後にアラートを表示する方法...
CSS [jQuery再現]JavaScriptとCSSで作るSlideToggleメソッドっぽいもの
素のJavaScriptでjQueryのトグルメソッドを再現します。アニメーションはCSSで行うので処理も軽いかも…？
サンプル
toggle-btn1
target1
スライドトグル実装！
...
CSS [JavaScript]CSSがブラウザに対応していない場合のみpolyfillを読み込む
特定のCSSがブラウザに対応していない時に、polyfillを利用することがあります。その際に、対応しているブラウザでは無駄な読み込みをしないために、対応しているかを判定して読み込む方法です。
JavaScript
Polyf...
HTML [JavaScript]一文字ずつ表示するアニメーション(+画面内にはいったら開始)
まるでタイピングしている様に一文字ずつ表示していくアニメーションを作成してみます。画面内に入ったら表示が始まる設定も解説します。
デモ&使い方
まるでタイピングしている様に一文字ずつ表示
<p cl...
CSS CSSとJavaScriptで配列から動く棒グラフを作ってみる[ライブラリ未使用]
CSSとJavaScriptで配列から棒グラフを作るコードを作ってみました。アニメーションでぬるっと生えてきます。ライブラリは使用しません。
サンプル
.js-graph {
margin...