CSS

Cocoonでmarginが効かない原因はCSSの詳細度でした。結合セレクタに負けていた余白を、クラスの2重指定で解決した話です。

自分のブログに入れたCSSのシマーエフェクトは気に入っていますが、受託案件でも使っていいかは別問題です。prefers-reduced-motion対応など、公式の前提を確認しながら線引きを考えました。

CSSだけのテキストエフェクトをブログのトップページに入れた記録。コピペ自体は5分で終わり、ブランドカラーへの調整と「動いているのに気付かれない」問題の解決に時間を使った話です。

アイキャッチ画像を自動生成していたら、タイトルが「バラ／ンス」のように単語の途中で折り返されていました。日本語にはスペースがないためブラウザが意味の切れ目を判断できないのが原因で、pre-wrapと手動改行に切り替えた話です。

ヒーローのバッジを円軌道で回そうとしたら、CSSとJSのtransformが取り合いになった顛末をまとめました。

サイトを見返して見つけた細かいUI・UXの調整をまとめました。見出し前後の余白の逆転など、地味だけど効く修正の記録です。

SCSSはFLOCSSというディレクトリ設計をベースに運用。実際に運用する中で調整しているポイントをまとめました。

Cocoon標準の目次デザインをCSSでカスタマイズしたら、詳細度(specificity)の沼にハマった顛末をまとめました。カード風デザイン・シェブロンアイコンへの差し替えを実装しています。