CSSでグラデーションの枠線を付ける方法をご紹介いたします。 角丸の場合は少し工夫が必要なので、角丸の要素にグラデーションの枠線を付ける方法も後述します。 CSSで要素にグラデーションの枠線を付ける方法 まずHTMLは下…
CSSで要素にグラデーションの枠線を付ける方法(角丸にする方法も紹介)
背景色を指定したtableのセルで罫線が消えてしまう場合の対処法
テーブルのセルに対して罫線と背景色を指定すると、FirefoxとSafariで罫線が見えなくなってしまう現象に出くわしました。 HTMLはこんな感じです。 CSSは以下のように指定していました。 不思議なのが、罫線が表示…
右クリック・ドラッグ&ドロップ・スマホでの長押しを無効化して画像保存を禁止する方法
PCだと右クリックやドラッグ&ドロップ、スマホでは長押しによる画像の保存を禁止する方法をご紹介いたします。 稀に、対策として実装してほしいと頼まれることがあるので備忘録として残しておきます。 CSSによる画像保存…
Sassでremやvwの値を自動計算できるようにする方法
Sassを使ってコーディングする際に、remやvwの値を自動計算できるようにする方法をご紹介いたします。 remやvwでフォントサイズを指定する時の面倒な計算をする必要がなくなるため、作業の効率化を図れます。 remの値…
ネストされたセレクタをルートに戻せるSassの@at-rootが便利！
Sassを活用し始めてもう何年も経ちますが、今更ながら@at-rootが便利なことに気付きました(^^; ネストされたセレクタをルートに戻したいことってなかったんですよね。というか、活用できるケースがあんまりイメージでき…
iOSでinputやtextareaにフォーカスした際に画面が自動でズームしてしまうのを回避する方法
iPhoneやiPadでフォームを入力するためにフォーカスすると、画面が自動でズームされることがあります。これはiOSの仕様で、inputやtextareaのフォントサイズが15px以下だと画面がズームします。 少なくと…
まだ遅くない！Sassの@importを@useと@forwardに置き換えましょう
Sassの@importは遅くとも2021年10月1日から非推奨、その一年後の2022年10月1日には廃止される予定でした。9月末に滑り込みで@importを@useと@forwardに置き換えたのですが、よくよく調べて…
iPhoneやiPadでinput[type=”date”]の入力値を左寄せにする方法
![iPhoneやiPadでinput[type=”date”]の入力値を左寄せにする方法](https://techmemo.biz/wp-content/uploads/2022/09/ios-input-date.jpg "iPhoneやiPadでinput[type=”date”]の入力値を左寄せにする方法")
シンプルに以下のようなinputを設置した場合、Windowsでは入力値は左寄せで表示されるのですが、iPhoneやiPadだと中央寄せになってしまいます。 こんな感じです↓ Safariだけでなく、Chromeでも中央…
input[type=”date”]のカレンダーアイコンを変更する方法
![input[type=”date”]のカレンダーアイコンを変更する方法](https://techmemo.biz/wp-content/uploads/2022/09/input-date.jpg "input[type=”date”]のカレンダーアイコンを変更する方法")
input[type=”date”]に表示されるカレンダーアイコンを変更する方法をご紹介いたします。 以下のようなフォームを設置した場合、ChromeやEdgeで見るとカレンダーのアイコンが表示さ…
CSSで疑似要素のcontentプロパティ内に改行を入れる方法
::beforeや::afterなどの疑似要素で、contentプロパティ内に改行を入れる方法をご紹介いたします。 後述するサンプルはごくごく簡単な例ですが、応用すれば色々と幅が広がると思います。 疑似要素のconten…