【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月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だけでMarkdownのコードにファイル名をつける

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

【CSS】カーソルを乗せると流れるようなアニメーションのハンバーガーメニューを作る

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

【CSS】JavaScriptを使わずにハンバーガーメニューを作る

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

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

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