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

# はじめに `webpacker-dev-server`実行中に、突然以下のエラーが出力されました。 ``` [hardsource:3154a74b] Could not freeze ./app/webpack/packs/application.js: Cannot read proper [...]

# はじめに Rails6で標準導入されたWebpacker管理下の構成を整えたので記事にします。Webpackerで管理対象としているのは以下の3つです。 - JavaScript - CSS - 画像 あくまで自分なりにわかりやすい構成に整えたという話ですので、ベストプラクティスを提案 [...]

# はじめに Rails6から標準導入されたWebpackerで画像を管理し、その中のアイコン画像をFavicon（タブやお気に入りに表示されるアイコン）に設定する方法を解説します。 # Favicon設定方法 ## 画像の用意 まずはFaviconに設定する画像を用意します。今回はフリーで [...]

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

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

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

# はじめに Rails6から標準導入されたWebpacker（Webpack for Rails）でCSSを管理しているRailsアプリのCSSが、ローカル開発環境では反映されていたのに、デプロイ先のHerokuでは反映されないという事象がありました。 # 対処 `app/views/layou [...]

# はじめに 先日、仕事で作成させていただいたWebサイトにアクセスできなくなっていました。 <img data-src="https://i.imgur.com/BTV9Ot1.png" class="lazyload effect-fade"> 原因は、Let's Encryptの証明書自 [...]

# はじめに 模写コーディングに挑戦してみました。 モデルにさせていただいたのはAirbnbの以下のページ。模写コーディングのおすすめサイトとしてよく紹介されているページです。 <div class="iframely-embed"><div class="iframely-responsiv [...]