AUTOVICE

TECH BLOG

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

2020-08-31
# はじめに 今回はハンバーガーメニューにカーソルを乗せると川のように流れるアニメーションを作りたいと思います。 今回の記事は以下の記事をベースにしていますので、まだご覧になっていない方は先にこちらをご覧ください。 <div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://www.autov [...]

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

2020-08-31
# はじめに 当初はスペースの限られるスマートフォンなどの低解像度デバイス向けサイトにおいてスペースを有効活用するために登場したハンバーガーメニューですが、最近はPCなどの高解像度デバイス向けサイトでも使われているのをよく見かけます。 何よりメニューをまとめられてすっきりした印象になりますし、スペースが広く使えるのでメインメニューだけでなくサブメニューまで網羅的に載せてサイトマップのように表示することもできます。 今回はそんなハンバーガーメニューをJavaScriptを [...]

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

2020-09-01
# はじめに 便利なCSSカスタムプロパティ。実はJavaScriptから取得/設定ができます。今回はCSSカスタムプロパティとJavaScriptを使ってモード切替(配色変更)を実装する方法を解説します。 # CSSカスタムプロパティ CSSカスタムプロパティとはCSS内で使用できる変数のことです。 Webデザインの配色を考えるとき、たくさんの色を使うことは滅多にありません。大抵は白色+黒色+テーマカラー(1〜2色)に落ち着くことと思います。 テーマカラーはW [...]

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

2020-08-27
# はじめに 最近は`transition`を使った動きのあるWebサイトがたくさんあります。まったく動きのない静的なページを見つけるのが難しいくらいです。 今回は、`transition`の効果を一方向(ゆっくり変化し即座に戻る)にする方法について書きたいと思います。 # transitionは双方向(ゆっくり変化しゆっくり戻る)の変化 `transition`のよくある例としては、マウスをリンク要素に乗せたときにゆっくり色を変えたりすることです。 ```ht [...]

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

2020-08-27
# はじめに 現在、お仕事でWebアプリを作っています。これを機会にイチからWebデザインの勉強をしようと思い、脱・Bootstrapを目指して頑張っています。 まだまだ高度なコードは書けませんが、これから少しずつCSS関連の記事も書いていきたいと思います。 さて、今回は「テキストを領域内に入った部分から徐々に表示」についての記事です。 「テキストをふわっと表示」について説明している記事はたくさんありますが、「テキストを領域内に入った部分から徐々に表示」について説 [...]

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

2020-03-06
# はじめに Laravel Mixの仕組みをわかりやすく解説します。Laravel Mixを使ってアセットコンパイルを行うことで、SASS/SCSSでCSSを記述できるようになります。 # Laravel Mixの仕組み まずはじめに、LaravelのCSSがどういう風にアセットコンパイルされるのかを説明します。 ## CSSファイル HTMLから参照されるCSSファイルは`public/css/app.css`です。作成したばかりのLaravelプロジェクトには [...]