-
ツール
[正規表現]pxからremに一括変換する方法
pxからremに一括変更したいけどめんどくさすぎる。 pxで実装してたサイトをremに変換するという対応をしました。 エディタで検索をかけると、pxを使ってた箇所は480箇所。これをremに変えるのは流石にしんどすぎます.... ということで正規表現を使って一括... -
HTML/CSS
[HTML/CSS]filter:invertでアイコンの色を変える。
アイコンの色を白から黒に変えたい。 アイコンの色を場所によって変えたり、ホバーした時に変える実装はよくあります。 今回は色を変える時によく使う、filter:brightnessでアイコンの色を白から黒に変えます。 【実装例】 下記が実装例です。Resultタグで... -
Javascript
[JavaScript vs jQuery]モーダル開閉でコードを比較してみる。
JavaScriptとjQueryってどっち使うのが良いの? JavaScriptとjQuery。どっちを使っても同じ実装は実現できる。 ならどっちを使うのが結局良いの???比較するまでもなく、コードが短くなるのでjQueryの方が便利かなと思うのですが、今日は改めてどれくら... -
Javascript
セレクトボックスの選択肢によって、テキストを切り替える方法。
セレクトボックスで選択した内容によって、表示テキストを変えたい。 最近セレクトボックスで選択した内容によって、テキストを変えるという実装をしました。 changeイベントを使えば簡単に実装できるですが、少し詰まったのでまとめます。 【実装例】 ま... -
HTML/CSS
[HTML/CSS]CSSでSVGアイコンの色を変更する方法
ホバーした時にSVGアイコンの色を変えたい。 先日SVGアイコンをホバーさせた時に、色を変えるという実装をしました。 色が違う画像を書き出しても良いのですが、ファイルも煩雑になるし冗長です。調べてみると、SVGをインライン形式で書き出すことで対応で... -
HTML/CSS
[HTML/CSS]テキストの左右に均等に直線を引く方法
今日はテキストの左右に均等に直線を引く方法について解説します。タイトルとかで下記の画像のようなデザインってよくありますよね。 ポイントはテキストの長さが変わっても、左右均等で自動調整すること。 実装としてはすごく簡単なので解説します。 【実... -
コラム
なぜEJSを使うとコーディングが楽しくなるのか③ buttonカスタマイズ編
静的コーディングが圧倒的に楽になる、EJS。前回までで、forEachとheaderの共通化についてまとめました。 第3回目の今日は、Web制作必須のbuttonの効率化です。全ページで使うbuttonだけど、場所によってテキストが変わったり色が変わったりと面倒。これを... -
コラム
なぜEJSを使うとコーディングが楽しくなるのか② header共通化編
静的コーディングが圧倒的に楽になる、EJS。前回は、forEach文で同じ要素を繰り返す方法についてまとめました。 https://yuhi-web.com/2024/12/18/ejs%e3%82%b3%e3%83%bc%e3%83%89%e8%a8%98%e8%bf%b0%e9%87%8f%e3%81%8c3%e5%88%86%e3%81%ae1%e3%81%ab%e3%8... -
Javascript
[js基礎11] パスワード入力で、文字の表示/非表示を切り替える方法
パスワード入力で文字の表示非表示を切り替えれるようにしたい。 ↓パスワード入力には右端の目のアイコンをクリックすると、 表示非表示を切り替えれるボタンがあります。 こちらの実装も想像以上にシンプルで簡単なので、今日は表示非表示について紹介し... -
コラム
なぜEJSを使うとコーディングが楽しくなるのか① forEach編
静的コーディングって大変ですよね。特に長いページだと、HTMLの記述量が多くて混乱する。コード量が多くなると修正漏れも出てきて地獄。 自分もずっと悩んでたのですが、EJSを使い始めてからそのストレスがかなり減りました。EJSは、簡単にいうと静的コー...