CSSで変数(カスタムプロパティ)を使う方法をご紹介いたします。 CSSで変数を使おうと思ったら、SassやLESSなどを使う必要がありましたが、IE以外の主要ブラウザでは通常のCSS内で変数が利用可能です。 CSS変数…
CSSで変数(カスタムプロパティ)を使う方法
WindowsでSassが使える環境を構築する方法
Windows10でSassが使える環境を整える手順をご紹介いたします。 Sass(Syntactically Awesome StyleSheet)とは、より効率的にCSSが書けるように拡張されたCSSのメタ言語です。…
Gutenberg(ブロックエディタ)の編集画面に独自のスタイル(CSS)を適用する方法
WordPress5.0から導入された新しいエディタ「Gutenberg(ブロックエディタ)」ですが、慣れると非常に便利で使い勝手が良いです。一度慣れてしまうと旧エディタには戻れないですね。 Gutenbergで記事を書…
プレビューを見ながらSVGのアニメーションを作成できるWEBサービス「SVG Artista」
SVG Artistaは、SVGに適用するアニメーションを作成できるWEBサービスです。 プレビューで動きを確認しながら値を設定していけるので、そんなに知識がなくても簡単にSVGアニメーションを作成できます。 SVG A…
CSSを使って1行のテキストで均等割付・両端揃えを実現する方法
1行のテキストで均等割付・両端揃えを実装する方法をご紹介いたします。CSSのみで実現でき、表などで活用できるので覚えておくと便利かと思います。 CSSを使って1行のテキストで均等割付・両端揃えを実現する方法 以下のような…
ホバーエフェクトやローディングアニメーションのHTML/CSSがまとめられているWEBサービス「CSS WAND」
CSS WANDは、ホバーエフェクトやローディングアニメーションのHTML/CSSをコピペで使えるWEBサービスです。 数は多くありませんが、色んなタイプのホバーエフェクトやローディングアニメーションのスニペットがまとめ…
CSSを使って電話発信用のリンクをPCで無効化する方法
a要素のhref属性に「tel:電話番号」を入れることで、スマホ等でリンクをタップした際に電話発信ができます。 スマホの場合は直接電話がかけられて便利ですが、PCではクリックできないようにしたいというケースも多いかと思い…
CSSで背景画像や疑似要素として使えるようにSVGをBase64にエンコードしてくれるWEBサービス「Base64 Encode and Decode」
Base64 Encode and Decodeは、Illustratorなどで作ったSVGをCSSで背景画像や疑似要素として指定できるように、Base64にエンコードしてくれるWEBサービスです。 Base64 Enc…
jQueryで::beforeや::after等の擬似要素のプロパティを操作する方法
jQueryでは「$(‘.example::before’).css(‘color’,’#ccc’);」のように指定しても、疑似要素はDOMではない…
アニメーションエフェクトのHTML/CSSを簡単にコピーできる「CSSFX」
CSSFXは、マウスホバーやローディングなど、様々なアニメーションエフェクトのコードがまとめられているサイトです。 HTMLとCSSのコードをクリックで簡単にコピーできます。 CSSFXの使い方 CSSFXにアクセスして…