Base64 Encode and Decodeは、Illustratorなどで作ったSVGをCSSで背景画像や疑似要素として指定できるように、Base64にエンコードしてくれるWEBサービスです。 Base64 Enc…
CSSで背景画像や疑似要素として使えるようにSVGをBase64にエンコードしてくれるWEBサービス「Base64 Encode and Decode」
jQueryで::beforeや::after等の擬似要素のプロパティを操作する方法
jQueryでは「$(‘.example::before’).css(‘color’,’#ccc’);」のように指定しても、疑似要素はDOMではない…
アニメーションエフェクトのHTML/CSSを簡単にコピーできる「CSSFX」
CSSFXは、マウスホバーやローディングなど、様々なアニメーションエフェクトのコードがまとめられているサイトです。 HTMLとCSSのコードをクリックで簡単にコピーできます。 CSSFXの使い方 CSSFXにアクセスして…
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…