Custom Field Suite(CFS)の代わりにPodsを使う理由
WordPressプラグイン「Custom Field Suite」が公開停止となり、代替としてPodsを選んだ理由とループフィールドの活用方法を解説します。
サイト制作
技術
サイト制作に関する技術的な知見をまとめています。
ボタンの角がめくれるホバーエフェクト
CSSの疑似要素とグラデーションを使って、ホバー時にボタンの角が「ぺろっと」めくれるエフェクトを実装する方法を解説します。
四角がクルクル回るローダーの実装
CSS 3D Transformを使って、四角形が立体的にクルクル回転するローディングアニメーションを実装する方法を解説します。
テキストが上に回転するホバーエフェクト
CSS3Dを使って、ホバー時にテキストがX軸方向に回転して切り替わるエフェクトを実装する方法を解説します。
ボタンホバーで背景色がスライドするアニメーション
ホバー時に背景色が左から右へ現れ、解除時に右へ消えるボタンアニメーションをCSSだけで実装する方法を解説します。
CSS Gridで自由自在なレイアウトを作る方法
grid-template-areasを使って、視覚的に分かりやすく複雑なレイアウトを実現する方法を解説します。
CSSで途切れず流れるテキストを実装する方法
JavaScriptを使わず、CSSのみで横に途切れることなく流れ続けるテキストアニメーションを実装する方法を解説します。
CSSだけでハート形を作る方法
HTMLとCSSだけでシンプルなハート形を作成する方法を解説。疑似要素::beforeと::afterを活用したテクニックです。