【CSS+JS】メニューアイコンの一種、ベントーメニューの実装方法(アニメーション付き)

2021年10月19日 14:56
はじめに メニューアイコンの中ではハンバーガーメニューが有名だと思いますが、その他にもいろいろな種類があって、それぞれに名前もつけられています。 <a class="gallery" data-group="gallery" href="https://i.imgur.com/zTufFAS.jpg"><img ...

【CSS+JS】メインコンテンツの裏から現れるフッターの実装方法

2021年10月18日 13:58
はじめに オシャレなサイトなどでたまに見かける「メインコンテンツの裏から現れるフッター」の実装方法について説明します。 サンプル <iframe height="392" style="width: 100%;" scrolling="no" title="Untitled" src="https://code ...

【CSS+JS】背景画像の視差効果(パララックス)を実装する方法

2022年6月1日 00:05
はじめに JavaScriptプラグインを使わずに、背景画像の視差効果(パララックス)をVanilla JS(ピュアなJavaScript)だけで実装する方法について説明します。 サンプル まず、背景画像の視差効果(パララックス)とはどういうものなのか確認するために、下記のサンプルをご覧ください。 <ifram ...

【CSS+JS】現在のスクロール量を確実に取得する(プロパティ対応状況まとめ)

2021年6月7日 12:34
はじめに JavaScriptで現在のスクロール量を取得するためのプロパティはたくさんあります。種類がありすぎるため、かえってどれを使えばいいのかいまいちわからないという人も多いかと思います。 本記事では、各プロパティのブラウザ対応状況まとめと、現在のスクロール量を確実に取得する方法について説明します。 スクロ ...

【CSS+JS】ウィンドウ内全体にファイルをドラッグ&ドロップしてアップロード

2021年6月9日 21:59
はじめに ユーザーが選択したファイルをアップロードする必要がある場合、ファイル選択フィールドを設置することはもちろんですが、ファイルをドラッグ&ドロップしてアップロードできるようにもなっていると使い勝手のいいサービスだと言えます。しかし、ドラッグ&ドロップできるエリアが一部分だけだと少し不便な場合があります。 ...

【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む

2022年5月31日 23:58
はじめに 動画のサムネイル画像をクリックしてモーダルウィンドウを表示し、その中にYouTube動画を動的に埋め込む方法について説明します。なお、本記事ではYouTube動画を動的に埋め込むまでを範囲とし、埋め込んだ動画の再生制御などは範囲外とします。 実装 サンプル ふたつのサムネイル画像をそれぞれクリックして ...

【CSS+JS】テキストを1文字ずつ表示するアニメーションの実装方法

2021年5月26日 12:25
はじめに モダンなサイトでよく見かける「テキストを1文字ずつ表示するアニメーション」の実装方法を解説します。 実装 サンプル 繰り返し動作を確認したい場合は右下の「Rerun」ボタンをクリックしてください。 <iframe height="265" style="width: 100%;" scrolling= ...

【CSS】CSSカスタムプロパティとJavaScriptを使ってモード切替(配色変更)を実装

2020年9月1日 09:40
はじめに 便利なCSSカスタムプロパティ。実はJavaScriptから取得/設定ができます。今回はCSSカスタムプロパティとJavaScriptを使ってモード切替(配色変更)を実装する方法を解説します。 CSSカスタムプロパティ CSSカスタムプロパティとはCSS内で使用できる変数のことです。 Webデザインの ...

【脱・jQuery】jQueryで書いたAjaxをJavaScriptのFetch APIで書き直してみた

2020年3月8日 09:42
はじめに これまでJavaScriptの処理を書くときはjQueryを使っていました。昔のJavaScriptはブラウザ互換性問題などがありとてもゴタゴタしていたので、jQueryを知ってからはその便利さに頼りっきりになっていました。 しかし、最近は主要ブラウザでの互換性問題はほとんど解消され、jQueryを使 ...