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

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

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

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

【Rails】webpacker-dev-server実行中のエラー「Could not freeze ... Cannot read property 'hash' of undefined」

2020年8月30日 16:13
はじめに webpacker-dev-server実行中に、突然以下のエラーが出力されました。 [hardsource:3154a74b] Could not freeze ./app/webpack/packs/application.js: Cannot read property 'hash' of u ...

【Rails】Webpacker管理下の構成を整える

2020年8月31日 09:40
はじめに Rails6で標準導入されたWebpacker管理下の構成を整えたので記事にします。Webpackerで管理対象としているのは以下の3つです。 JavaScript CSS 画像 あくまで自分なりにわかりやすい構成に整えたという話ですので、ベストプラクティスを提案するとか言った大それたものではないこと ...

【Rails】Webpacker管理下のアイコン画像をFaviconに設定する方法

2020年8月30日 14:37
はじめに Rails6から標準導入されたWebpackerで画像を管理し、その中のアイコン画像をFavicon(タブやお気に入りに表示されるアイコン)に設定する方法を解説します。 Favicon設定方法 画像の用意 まずはFaviconに設定する画像を用意します。今回はフリーで使用できるアイコンを使うことにしま ...

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

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

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

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

【Rails】Webpackerで画像ファイルを管理し、CSSやビューから参照する方法

2020年7月30日 15:51
はじめに Rails6から標準導入されたWebpackerは、JavaScriptやCSSだけでなく画像ファイルの管理も行えます。 今回はWebpackerで画像ファイルを管理し、CSSやビューから参照する方法を解説します。 画像ファイルの配置場所 Webpackerで画像ファイルを管理するには、Webpack ...

【Rails】Webpacker管理のCSSがHerokuで反映されない場合の対処

2020年7月30日 15:51
はじめに Rails6から標準導入されたWebpacker(Webpack for Rails)でCSSを管理しているRailsアプリのCSSが、ローカル開発環境では反映されていたのに、デプロイ先のHerokuでは反映されないという事象がありました。 対処 app/views/layouts/applicati ...

Let's Encryptの証明書を自動で更新する方法

2020年7月4日 21:53
はじめに 先日、仕事で作成させていただいたWebサイトにアクセスできなくなっていました。 <img data-src="https://i.imgur.com/BTV9Ot1.png" class="lazyload effect-fade"> 原因は、Let's Encryptの証明書自動更新方法に不備があっ ...