フォームの入力欄に表示されているプレースホルダーの色をCSSで変更する方法をご紹介いたします。 CSSでフォームのプレースホルダーの色を変更する方法 何も指定していない場合は、以下のように少し薄めの色でプレースホルダーが…
CSSでフォームのプレースホルダーの文字色を変更する方法
CSSアニメーションやホバーエフェクトをコピペできるスニペットサイト「CSSeffectsSnippets」
CSSeffectsSnippetsは、CSSアニメーションやホバーエフェクト等がまとめられたサイトで、紹介されている効果はクリックでコードをコピーできます。 CSSeffectsSnippetsの使い方 CSSeffe…
ハンバーガーボタンのコードをサクッと生成できる「ハンバーガーボタンジェネレーター」
ハンバーガーボタンジェネレーターは、その名の通りハンバーガーボタンを作成できるジェネレーターです。サイズや色を設定するだけで、サクッとハンバーガーボタンのコードを生成できます。 ジェネレーターの制作者は、ザリガニデザイン…
CSSのみでページ内リンクのスムーススクロールを実現する方法
CSSだけでページ内リンクのスムーススクロールを実装する方法をご紹介いたします。 まだ、サポートしているブラウザは少ないですが、scroll-behaviorプロパティを使った方法です。 CSSのみでページ内リンクのスム…
CSSだけでカルーセルっぽい横スクロールを実装する方法
CSSだけで、カルーセル風の横スクロールを実現する方法をご紹介いたします。 以下のように右側に要素が続いていることを示しつつ、横スクロールできるようにCSSでスタイリングします。 特にスマホなどで横幅を超えてしまうけどレ…
入力したSassをリアルタイムでCSSにコンパイルしてくれるWEBサービス「SassMeister」
SassMeisterは、入力したSassのコードをリアルタイムでCSSにコンパイルしてくれるツールです。 Sassが使える環境を構築しなくても、手軽にSassを試すことができます。 SassMeisterの使い方 Sa…
アニメーション付きのハンバーガーメニューを簡単に設置できるスタイルシート「Hamburgers」
Hamburgersは、クラスを付与するだけで、様々なアニメーションに対応したハンバーガーメニュを実装できるスタイルシートです。 挙動については、以下デモページにてご確認いただけます。 デモページを見る Hamburge…
リンクのクリック可能範囲を広げるためのCSSテクニック
よくある以下のようなリストで、ボタンのみにリンクが付いている場合に、リンクのクリック可能な範囲を広げる方法をご紹介いたします。 挙動については、以下デモページをご参照いただければと思います。 デモページを見る 通常のリン…
Gutenberg(ブロックエディタ)用のスタイルシートの読み込みを削除する方法
Gutenberg(ブロックエディタ)用の以下スタイルシートを読み込まないようにする方法をご紹介いたします。 /wp-includes/css/dist/block-library/style.min.css /wp-i…
IEにもobject-fitを対応させるためのスクリプト「object-fit-images」
object-fit-imagesは、IEでもCSSのプロパティ「object-fit」を使えるようにするためのスクリプトです。 下記でデモをご確認いただけます。 デモページを見る object-fit-imagesの使…