Webサイトに動画を埋め込むのはとても簡単です。 プログラミング初学者であれば画像の埋め込みはご存じだと思いますが、動画の埋め込みも同じような手順で実現できます。 近年は動画を使ったサービスや情報発信が増えているので、サ […]
Tips
Webサイトに動画を埋め込む方法【HTML、JavaScript】
JavaScript
Tips
JavaScriptで画像を操作（表示、変更、サイズ指定）する方法
JavaScriptで画像を操作する方法はとても簡単です。 HTMLでimgタグを使った画像の表示ができるのであれば問題ないように、事前にJavaScriptで便利なプロパティが用意されているからです。 本日はJavaS […]
Tips
クリックしたらハンバーガーメニューが閉じるやつの作り方（ドロワーメニュー）
ハンバーガーメニューの作り方でググると表示方法はたくさん見つかるのですが、閉じる方法については解説されていないことが見られます。 閉じる方法はとても簡単な仕組みで実現できるので今回紹介するものをコピペで保存してもらえると […]
Tips
【アニメーション】JavaScriptをtransitionの後に実行したい
同じページで複数のアニメーションを用意している場合に、実行する順番をコントロールしないといけないことがあります。 今回はWeb制作のアニメーションでよく使われるCSSのtransitionを使ったアニメーションの後に、別 […]
Tips
JavaScriptでアニメーションをレスポンシブ対応させる方法【matchMedia】
JavaScriptでもレスポンシブ対応させることができるのをご存知でしょうか？ 具体的な使い道としてはアニメーションのレスポンシブ対応で、「スマホのみで実行したいイベント」などがあります。 スタイルについてはCSSでレ […]
Tips
JavaScriptでアニメーションをレスポンシブ対応させる方法
サイト制作などでアニメーションをレスポンシブ対応できることをご存知でしょうか？ 考え方は簡単で「画面サイズ」を取得できれば良いわけです。 JavaScriptで画面サイズを取得したり、監視したりする方法を紹介していきます […]
Tips
JavaScriptのstyleでCSSスタイルを指定する方法【追加、変更、上書き、keyframesとanimationでアニメーション設定など】
JavaScriptでCSSのスタイルを設定できることをご存知でしょうか？ もちろん全体的なコーディングについてはcssファイルに書いていくのですが、アニメーションなど単発の動作についてのスタイルなどで使うことができます […]
Tips
頻出！JavaScriptで作るアニメーションの基本【要素の書き換え、classList, setAttribute, toggle, innerHTML, textContent, getAttribute】
「toggleやinnerHTMLを使ったコードをよく見かけるけど何をしているか分からない」「JavaScriptが詳しくないので、アニメーションは記事のコピペで作っている」「innerHTMLとtextContentの […]
Tips
【コレだけでOK】JavaScriptでHTML要素を操作する方法（要素の中身を取得、作成、削除するメソッド、querySelector, querySelectorAll, getElementsClassByName）
「HTML、CSSはそれなりに書けるようになったけど、JavaScriptはググってコピペしている」「jQueryから知ったため純粋なJavaScriptの長い文法が何をしているのかイマイチ理解できない」「オリジナルでア […]
Tips
JavaScriptで重複チェック、重複削除など検索(絞り込み)をする方法【filter, indexOf, set, startsWith, endsWith, test】
JavaScriptでデータの重複チェックと重複削除ができることをご存知でしょうか？ 基本的な文法だけを使うとforEachを複雑にした方法があるのですが、自分としては使いづらいなと思っているので他の方法でシンプルなもの […]