はじめに Markdownで書いた記事のコード部分をシンタックスハイライトする『rouge』というGemがあります。当ブログでも使っており、導入や使い方については以前記事にしました。 <iframe class="hatenablogcard" style="width:100%;height:15 ...

はじめに 当ポートフォリオサイトを公開してからもうすぐ1年が経とうとしています。完成した当初はそれなりに気に入っていたデザインでしたが、月日が経つにつれてあらが目につくようになり、早くリニューアルしたいと思っていました。 1周年までまだあと1ヶ月ほどありますが、一足早くリニューアルしてしまいました。このブログだ ...

はじめに 仕事で作成させていただいたWebアプリで使っているMySQLが頻繁に突然停止しているという現象が続いていました。Webアプリへのアクセスに時間がかかることも気になっていました。 少なくとも稼働当初はMySQLが突然停止するなんてことはなかったはずですし、Webアプリへのアクセス時間もいたって普通だった ...

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

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

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

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

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

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

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