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

はじめに
メニューアイコンの中ではハンバーガーメニューが有名だと思いますが、その他にもいろいろな種類があって、それぞれに名前もつけられています。
<a class="gallery" data-group="gallery" href="https://i.imgur.com/zTufFAS.jpg"><img ...
【CSS+JS】メインコンテンツの裏から現れるフッターの実装方法

はじめに
オシャレなサイトなどでたまに見かける「メインコンテンツの裏から現れるフッター」の実装方法について説明します。
サンプル
<iframe height="392" style="width: 100%;" scrolling="no" title="Untitled" src="https://code ...
【CSS+JS】背景画像の視差効果(パララックス)を実装する方法

はじめに
JavaScriptプラグインを使わずに、背景画像の視差効果(パララックス)をVanilla JS(ピュアなJavaScript)だけで実装する方法について説明します。
サンプル
まず、背景画像の視差効果(パララックス)とはどういうものなのか確認するために、下記のサンプルをご覧ください。
<ifram ...
【CSS+JS】現在のスクロール量を確実に取得する(プロパティ対応状況まとめ)

はじめに
JavaScriptで現在のスクロール量を取得するためのプロパティはたくさんあります。種類がありすぎるため、かえってどれを使えばいいのかいまいちわからないという人も多いかと思います。
本記事では、各プロパティのブラウザ対応状況まとめと、現在のスクロール量を確実に取得する方法について説明します。
スクロ ...
【CSS+JS】ウィンドウ内全体にファイルをドラッグ&ドロップしてアップロード

はじめに
ユーザーが選択したファイルをアップロードする必要がある場合、ファイル選択フィールドを設置することはもちろんですが、ファイルをドラッグ&ドロップしてアップロードできるようにもなっていると使い勝手のいいサービスだと言えます。しかし、ドラッグ&ドロップできるエリアが一部分だけだと少し不便な場合があります。
...
【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む

はじめに
動画のサムネイル画像をクリックしてモーダルウィンドウを表示し、その中にYouTube動画を動的に埋め込む方法について説明します。なお、本記事ではYouTube動画を動的に埋め込むまでを範囲とし、埋め込んだ動画の再生制御などは範囲外とします。
実装
サンプル
ふたつのサムネイル画像をそれぞれクリックして ...
【CSS+JS】テキストを1文字ずつ表示するアニメーションの実装方法

はじめに
モダンなサイトでよく見かける「テキストを1文字ずつ表示するアニメーション」の実装方法を解説します。
実装
サンプル
繰り返し動作を確認したい場合は右下の「Rerun」ボタンをクリックしてください。
<iframe height="265" style="width: 100%;" scrolling= ...
【CSS】CSSカスタムプロパティとJavaScriptを使ってモード切替(配色変更)を実装

はじめに
便利なCSSカスタムプロパティ。実はJavaScriptから取得/設定ができます。今回はCSSカスタムプロパティとJavaScriptを使ってモード切替(配色変更)を実装する方法を解説します。
CSSカスタムプロパティ
CSSカスタムプロパティとはCSS内で使用できる変数のことです。
Webデザインの ...
【脱・jQuery】jQueryで書いたAjaxをJavaScriptのFetch APIで書き直してみた

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

坂井 光太郎 / Sakai Kotaro
Ruby on Rails を中心とした Web アプリ開発全般に関する技術情報をまとめています。業務に関するご依頼・ご相談、当サイトに対するご感想やメッセージはコンタクトフォームからお気軽にお問い合わせください。