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

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

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

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

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

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

はじめに Markdownのコードに、そのコードがどのファイルのものなのかを示すためにファイル名が書いてあるとわかりやすいです。以下はQiitaの記事でコードを書いたときの一例です。 <img data-src="https://i.imgur.com/xO6MLjc.png" class="lazyload ...

はじめに 今回はハンバーガーメニューにカーソルを乗せると川のように流れるアニメーションを作りたいと思います。 今回の記事は以下の記事をベースにしていますので、まだご覧になっていない方は先にこちらをご覧ください。 <div class="iframely-embed"><div class="iframely-r ...

はじめに 当初はスペースの限られるスマートフォンなどの低解像度デバイス向けサイトにおいてスペースを有効活用するために登場したハンバーガーメニューですが、最近はPCなどの高解像度デバイス向けサイトでも使われているのをよく見かけます。 何よりメニューをまとめられてすっきりした印象になりますし、スペースが広く使えるの ...

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