今回はJavaScriptにおけるnullとundefinedの違いについて考察していきたいと思います。 こんな感じで記事を書いていますが自分もあまりよく分かっていないのが正直なところです。 あくまで考察ですが初学者の方 […]
JavaScript
カラーピッカーで選択した色をJavaScriptで取得する【input type=”color”】
カラーピッカーはライブラリを使わなくても自作することができるのをご存知でしょうか。 ツールアプリやECサイトなど、色んな場面でカラーピッカーは登場するので知らない人はこの機会に覚えてしまいましょう。 また動画もあるので必 […]
JavaScriptでスライダーの値を取得、表示する【input type=”range”】
「体力ゲージ」「音量バー」「明るさ調整」など、スライダーを使った値の操作はinputを使うと簡単に実装できます。 もちろんライブラリを使っても良いですが、JavaScriptについて深く理解していないとカスタマイズできな […]
JavaScriptで音楽や音声を再生する方法【audioタグ】
JavaScriptを使った音楽データや音声データの操作はとても簡単です。 Webサイトやアプリに音楽プレーヤーを実装することは一見難しそうに見えますが、事前に色んなプロパティやメソッドが用意されています。 また再生や停 […]
Webサイトに動画を埋め込む方法【HTML、JavaScript】
Webサイトに動画を埋め込むのはとても簡単です。 プログラミング初学者であれば画像の埋め込みはご存じだと思いますが、動画の埋め込みも同じような手順で実現できます。 近年は動画を使ったサービスや情報発信が増えているので、サ […]
JavaScriptで画像を操作(表示、変更、サイズ指定)する方法
JavaScriptで画像を操作する方法はとても簡単です。 HTMLでimgタグを使った画像の表示ができるのであれば問題ないように、事前にJavaScriptで便利なプロパティが用意されているからです。 本日はJavaS […]
クリックしたらハンバーガーメニューが閉じるやつの作り方(ドロワーメニュー)
ハンバーガーメニューの作り方でググると表示方法はたくさん見つかるのですが、閉じる方法については解説されていないことが見られます。 閉じる方法はとても簡単な仕組みで実現できるので今回紹介するものをコピペで保存してもらえると […]
【アニメーション】JavaScriptをtransitionの後に実行したい
同じページで複数のアニメーションを用意している場合に、実行する順番をコントロールしないといけないことがあります。 今回はWeb制作のアニメーションでよく使われるCSSのtransitionを使ったアニメーションの後に、別 […]
【2023年版】JavaScriptでレスポンシブ対応させる方法
JavaScriptでもレスポンシブ対応させることができるのをご存知でしょうか? 具体的な使い道としてはアニメーションのレスポンシブ対応で、「スマホのみで実行したいイベント」などがあります。 スタイルについてはCSSでレ […]
JavaScriptでアニメーションをレスポンシブ対応させる方法
サイト制作などでアニメーションをレスポンシブ対応できることをご存知でしょうか? 考え方は簡単で「画面サイズ」を取得できれば良いわけです。 JavaScriptで画面サイズを取得したり、監視したりする方法を紹介していきます […]