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

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

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

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

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

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

【CSS】CSSだけでMarkdownのコードにファイル名をつける

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

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

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

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

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

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

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

【CSS】transitionの効果を一方向(ゆっくり変化し即座に戻る)にする

2020年8月27日 15:04
# はじめに 最近は`transition`を使った動きのあるWebサイトがたくさんあります。まったく動きのない静的なページを見つけるのが難しいくらいです。 今回は、`transition`の効果を一方向(ゆっくり変化し即座に戻る)にする方法について書きたいと思います。 # transitio [...]

【CSS】テキストを領域内に入った部分から徐々に表示

2020年8月27日 13:46
# はじめに 現在、お仕事でWebアプリを作っています。これを機会にイチからWebデザインの勉強をしようと思い、脱・Bootstrapを目指して頑張っています。 まだまだ高度なコードは書けませんが、これから少しずつCSS関連の記事も書いていきたいと思います。 さて、今回は「テキストを領域内に入 [...]

Laravel Mixの仕組みをわかりやすく解説:CSSをSASS/SCSSで記述する方法

2020年3月6日 09:26
# はじめに Laravel Mixの仕組みをわかりやすく解説します。Laravel Mixを使ってアセットコンパイルを行うことで、SASS/SCSSでCSSを記述できるようになります。 # Laravel Mixの仕組み まずはじめに、LaravelのCSSがどういう風にアセットコンパイルされる [...]