斜めフレーム付きタイトル
見出しを囲む細い枠がわずかに傾いた、遊び心のあるタイトルです。外側の枠 .rotated-frame に transform:rotate(-3deg) をかけて傾け、内側の <h2> には transform:rotate(3deg) を逆向きにかけて、文字だけは水平に保つという二重回転の構造です。
解説
見出しを囲む細い枠がわずかに傾いた、遊び心のあるタイトルです。外側の枠 .rotated-frame に transform:rotate(-3deg) をかけて傾け、内側の <h2> には transform:rotate(3deg) を逆向きにかけて、文字だけは水平に保つという二重回転の構造です。さらに :hover で枠の回転を 0 に戻し、transition:.35s でなめらかに起き上がるインタラクションを添えています。
こんなサイトで活きます
- デザイン事務所やクリエイティブスタジオの個性的な見出し
- ポートフォリオやキャンペーンページのアクセント
- 手書き感・遊び心を出したいブランドのタイトル
傾きの角度は外側と内側の rotate 値を符号反転で揃えれば変えられます（例：外 -5deg なら内 5deg）。枠の色と太さは border、余白は padding で調整します。ホバーで動くため マウスを使わない閲覧者には初期状態だけが見える点を踏まえ、傾いた状態でも読める角度に留めるのが安全です。動きが苦手な人向けには prefers-reduced-motion で transition を無効化する配慮ができます。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
傾きの角度を変えるには？
外側 .rotated-frame の rotate(-3deg) と内側 h2 の rotate(3deg) を、符号が逆で同じ絶対値になるよう揃えて変更します。こうすると文字は水平のまま枠だけが傾きます。
ホバー時の動きを止められますか？
止められます。:hover の transform を削除すれば常に傾いたまま固定できます。動きを抑えたい場合は prefers-reduced-motion メディアクエリで transition を none にする方法もおすすめです。