AUTOVICE -新人フリーランスの技術ブログ-

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

# はじめに メニューアイコンの中ではハンバーガーメニューが有名だと思いますが、その他にもいろいろな種類があって、それぞれに名前もつけられています。 本記事では、ハンバーガーメニューの次に比較的よく使われているであろうベントーメニューの実装方法について説明します（クリックしたときのいい感じのアニメーションについても説明します）。 なお、メニューアイコン（ハンバーガーメニュー）の基本的な実装方法については以下の記事で詳しく説明しています。 # サンプル See the Pen Untitled by whitia (@whitia) on CodePen.

2021/10/18 14:26

【CSS+JS】メインコンテンツの裏から現れるフッターの実装方法

# はじめに オシャレなサイトなどでたまに見かける「メインコンテンツの裏から現れるフッター」の実装方法について説明します。 # サンプル See the Pen Untitled by whitia (@whitia) on CodePen. 最下部までスクロールすると、メインコンテンツの裏からフッターが現れるようなデザインになっています。なかなか面白いデザインではないかと思います。 # 実装 ## HTML 必要な要素はメインコンテンツとフッターのみです。 ```html ``` ## CSS メインコンテンツとフッターに以下のスタイルを設定します。 ```css main {

2021/10/18 13:26

【CSS+JS】背景画像の視差効果（パララックス）を実装する方法

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

2021/10/17 12:08

【Rails】ダウンロードしたフリーフォントをWebpackerを使って導入する方法

# はじめに Webサイトのデザインを彩るひとつの要素にフォントの種類があります。Google Fontsの登場により、様々なフォントが手軽に導入できるようになりました。しかし、世の中にはGoogle Fontsが提供するフォント以外にもたくさんのフリーフォントが存在します。 本記事では、ダウンロードしたフリーフォントをWebpackerを使って導入する方法について説明します。 # フリーフォントの導入手順 ## Railsアプリの用意 今回は以下のビューを作成しました。 #### ERB ```erb ダウンロードしたフリーフォントを Webpackerを使って導入する方法 ``` ####

2021/10/16 13:26

【Rails】mimemagicに依存しているRailsアプリでbundle installコマンドが失敗する事象の対処法

# はじめに Railsアプリで`bundle install`コマンドを実行しようとしたところ、以下のエラーメッセージが出力されコマンドに失敗しました。 ``` Your bundle is locked to mimemagic (0.3.5), but that version could not be found in any of the sources listed in your Gemfile. If you haven't changed sources, that means the author of mimemagic (0.3.5) has removed it.

2021/10/14 14:44

【Rails】macOSのアップデート後にrailsコマンドが失敗する事象の対処法

# はじめに 久しぶりにRailsアプリに手を入れようと思い、`rails server`コマンドを実行してRailsサーバーを立ち上げようとしたところ、エラーが出て起動に失敗してしまいました。 前回までの間にしたことの中で思い当たることと言えば、macOSのアップデートを行ったくらいです。そういえば以前から何度かmacOSのアップデートを行った後にRailsサーバーが起動できなくなる事象に陥っていたような気がします。今後は同様の事象が出ても焦ることのないように対処法をまとめておきたいと思います。 # 事象：エラー内容 ターミナルで`rails

2021/10/14 12:11