CSSでグラデーションの枠線を付ける方法をご紹介いたします。 角丸の場合は少し工夫が必要なので、角丸の要素にグラデーションの枠線を付ける方法も後述します。 CSSで要素にグラデーションの枠線を付ける方法 まずHTMLは下…
CSSで要素にグラデーションの枠線を付ける方法(角丸にする方法も紹介)
背景色を指定したtableのセルで罫線が消えてしまう場合の対処法
テーブルのセルに対して罫線と背景色を指定すると、FirefoxとSafariで罫線が見えなくなってしまう現象に出くわしました。 HTMLはこんな感じです。 CSSは以下のように指定していました。 不思議なのが、罫線が表示…
様々な三角形のCSSコードをコピーできるWebサービス「Triangle Shapes」
Triangle Shapesは、三角形のCSSコードをコピーできるWebサービスです。様々なタイプの三角形が用意されており、画像の三角形の切り抜きもコピペで簡単に実装できます。 Triangle Shapesの使い方 …
右クリック・ドラッグ&ドロップ・スマホでの長押しを無効化して画像保存を禁止する方法
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以下だと画面がズームします。 少なくと…
スクロールバーをカスタマイズするためのCSSコードを生成できるWebサービス「Scrollbar.app」
Scrollbar.appは、スクロールバーをカスタマイズするためのCSSコードを生成できるWebサービスです。 実際にプレビューを見ながら、色や幅などを調整できます。 Scrollbar.appの使い方 Scrollb…
CSSの品質をチェックできるWebサービス「Online CSS Code Quality Analyzer」
Online CSS Code Quality Analyzerは、URLを入力するか、CSSの内容を直接入力することで、CSSの品質をチェックしてくれるWebサービスです。 改善点も示してくれるので、CSSの品質改善の…
まだ遅くない！Sassの@importを@useと@forwardに置き換えましょう
Sassの@importは遅くとも2021年10月1日から非推奨、その一年後の2022年10月1日には廃止される予定でした。9月末に滑り込みで@importを@useと@forwardに置き換えたのですが、よくよく調べて…