【CSS】窓のようにひらくテキストをCSSで作ってみる！

今回はCSSを使って、窓のようにひらくテキストを作ってみたいと思います！

最初に、ベースとなるCSSコードを紹介した後、カスタムパターンをいくつか紹介していきます。

なるべくコピペでも使えるように構成していますので、サンプルを見て、気になるものがあれば、ぜひ試してみてください！

ブログで使用する場合は
- はてなブログの場合
ベースコード
- 動作チェック
カスタムパターン
まとめ

ブログで使用する場合は

ご利用のブログがHTML記述に対応している場合は、紹介するCSSを<style>と</style>で囲んで記述してください。

※ CSS用の入力欄がある場合は<style>と</style>の囲みなしで記述してください。

HTMLコードについては、そのまま入力でＯＫです。

はてなブログの場合

以下の記事ではてなブログでCSSを使う方法をまとめています。

今回の内容をはてなブログで試す場合は、上記の記事を参考にしてください。

ベースコード

ベースとなるCSSは以下のような感じになります。

@charset "UTF-8";
.opening-text {
    font-weight: 900;
    font-size: 2rem;
    margin: 0.2rem;
    position: relative;
    color: #58ad5a;
    transform-style: preserve-3d;
    perspective: 400;
    z-index: 1;
}

.opening-text:before, .opening-text:after {
    position: absolute;
    content: attr(data-letter);
    transform-origin: top left;
    top: 0;
    left: 0;
}

.opening-text, .opening-text:before, .opening-text:after {
    transition: all 0.4s ease-in-out;
}

.opening-text:before {
    color: #fff;
    text-shadow: -1px 0px 1px rgba(255, 255, 255, 0.8), 1px 0px 1px rgba(0, 0, 0, 0.8);
    z-index: 3;
    transform: rotateX(0deg) rotateY(-9deg) rotateZ(0deg);
}

.opening-text:after {
    color: rgba(0, 0, 0, 0.11);
    z-index: 2;
    transform: scale(1.08, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 1deg);
}

.opening-text:hover:before {
    color: #fafafa;
}

.opening-text:hover:before {
    transform: rotateX(0deg) rotateY(-40deg) rotateZ(0deg);
}

.opening-text:hover:after {
    transform: scale(1.08, 1) rotateX(0deg) rotateY(40deg) rotateZ(0deg) skew(0deg, 22deg);
}

上記のCSSを貼り付けて、ひらくようなテキストを使いたい要素にopening-textクラスを指定するとCSSの内容が適用されます。

動作チェック

ベースコードの表示を確認しておきます。

以下のようなHTMLを記述することで、上述のCSSが適用されます。

<div class="opening-text" data-letter="デフォルト">デフォルト</div>

実際の表示は、以下のような感じになります。

デフォルト

マウスオーバー(スマホの場合はタップ)で動作を確認してみてください。

文字がひらくような動作をすればＯＫです。

カスタムパターン

色を変えてみる！

まずは、ひらく部分や背景部分のテキスト色を調整してみたいと思います。

ベースコードに、以下のようなCSSコードを追加してください。

.opening-text.green-front:before {
    color: #aed7ae;
}

.opening-text.red-front:before {
    color: #ffbcbc;
}

.opening-text.red-back {
    color: #ff3c3c;
}

.opening-text.blue-front:before {
    color: #bfe1fe;
}

.opening-text.blue-back {
    color: #5bb1fc;
}

colorプロパティを調整すると背景部分のテキストの色をカスタムすることができます。

また、:before要素のcolorプロパティを調整することで、ひらくテキストの部分の色を変化させることができます。

実際に表示して確認してみます。

<div class="opening-text" data-letter="緑バック(デフォルト)">緑バック(デフォルト)</div>

<div class="opening-text green-front" data-letter="緑フロント+緑バック">緑フロント+緑バック</div>

<div class="opening-text red-back" data-letter="赤バック">赤バック</div>

<div class="opening-text red-front red-back" data-letter="赤フロント+赤バック">赤フロント+赤バック</div>

<div class="opening-text blue-back" data-letter="青バック">青バック</div>

<div class="opening-text blue-front blue-back" data-letter="青フロント+青バック">青フロント+青バック</div>

<div class="opening-text red-front blue-back" data-letter="赤フロント+青バック">赤フロント+青バック</div>

ここで、○○-frontと○○-backを併用することで、ひらく部分は赤に、背景部分のテキスト色は青にといった指定をすることもできます。

表示は以下のような感じになります。

緑バック(デフォルト)

緑フロント+緑バック

赤バック

赤フロント+赤バック

青バック

青フロント+青バック

赤フロント+青バック

マウスオーバー（スマホの場合はタップ）で動作を確認してみてください。

フォントサイズをカスタムしてみる！

次に、フォントサイズをカスタムしてみます。

以下のようなCSSコードを追加してください。

.opening-text.small-font {
    font-size: 1rem;
}

.opening-text.large-font {
    font-size: 3rem;
}

font-sizeプロパティでフォントのサイズを調整することができます。

ここでは、小さめのサイズと大きめのサイズの２つを用意していますが、適当なクラス名を付けて、より小さいサイズや大きめのサイズのスタイルを追加することもできます。

opening-textと一緒にsmall-fontまたはlarge-fontクラスを指定すれば、ここで設定したスタイルを適用することができます。

実際に表示して確認してみます。

以下のように、divタグを記述してみてください。

<div class="opening-text small-font" data-letter="小さめサイズ">小さめサイズ</div>

<div class="opening-text" data-letter="デフォルト">デフォルト</div>

<div class="opening-text large-font" data-letter="大きめサイズ">大きめサイズ</div>

比較のためにデフォルト表示も並べています。

表示は以下のような感じになります。

小さめサイズ

デフォルト

大きめサイズ

表示が確認できたら、マウスオーバー（スマホの場合はタップ）で動作を確認してみてください。

フォントを変えてみる！

続いて、フォントを変えてみたいと思います。

ベースコードに、以下のようなCSSコードを追加してください。

.opening-text.gothic-font {
    font-family: 游ゴシック, ヒラノギ角ゴ;
}

.opening-text.mincho-font {
    font-family: 游明朝, "ヒラノギ明朝 P";
}

font-familyプロパティで好みのフォントを指定することで、フォントを変更することができます。

ここでは、gothic-fontクラスを指定するとゴシックフォントに、mincho-fontクラスを指定すると明朝フォントになるように設定しています。

実際に表示して確認するために、以下のようにdivタグを調整してみてください。

<div class="opening-text gothic-font" data-letter="ゴシックフォント">ゴシックフォント</div>

<div class="opening-text mincho-font" data-letter="明朝フォント">明朝フォント</div>

実際の表示は、以下のような感じになります。

ゴシックフォント

明朝フォント

アニメーションのスピードを調整してみる！

次に、テキストが窓のように開くアニメーションのスピードを調整してみたいと思います。

ベースコードに、以下のようなCSSコードを追加してください。

.opening-text.very-fast, .opening-text.very-fast:before, .opening-text.very-fast:after {
    transition-duration: 0.1s;
}

.opening-text.fast, .opening-text.fast:before, .opening-text.fast:after {
    transition-duration: 0.2s;
}

.opening-text.slow, .opening-text.slow:before, .opening-text.slow:after {
    transition-duration: 0.8s;
}

.opening-text.very-slow, .opening-text.very-slow:before, .opening-text.very-slow:after {
    transition-duration: 1.6s;
}

opening-textクラスの要素と、その:before疑似要素、:after疑似要素のtransition-durationプロパティの値を調整することで、アニメーションのスピードを調整することができます。

ここでは、「とても速い」、「速い」、「遅い」、「とても遅い」の4タイプを追加してみました。

実際に表示して確認してみます。

<div class="opening-text very-fast" data-letter="とても速い">とても速い</div>

<div class="opening-text fast" data-letter="速い">速い</div>

<div class="opening-text" data-letter="デフォルト">デフォルト</div>

<div class="opening-text slow" data-letter="遅い">遅い</div>

<div class="opening-text very-slow" data-letter="とても遅い">とても遅い</div>

表示は以下のような感じになります。

とても速い

速い

デフォルト

遅い

とても遅い

マウスオーバー（スマホの場合はタップ）で動作を確認してみてください。

ひらく角度を調整してみる！

続いて、テキストがひらく角度を調整してみます。

以下のようなCSSコードを追加してください。

.opening-text.very-small-angular:hover:before {
    transform: rotateX(0deg) rotateY(-20deg) rotateZ(0deg);
}

.opening-text.very-small-angular:hover:after {
    transform: scale(1.08, 1) rotateX(0deg) rotateY(20deg) rotateZ(0deg) skew(0deg, 11deg);
}

.opening-text.small-angular:hover:before {
    transform: rotateX(0deg) rotateY(-30deg) rotateZ(0deg);
}

.opening-text.small-angular:hover:after {
    transform: scale(1.08, 1) rotateX(0deg) rotateY(30deg) rotateZ(0deg) skew(0deg, 16.5deg);
}

.opening-text.large-angular:hover:before {
    transform: rotateX(0deg) rotateY(-50deg) rotateZ(0deg);
}

.opening-text.large-angular:hover:after {
    transform: scale(1.08, 1) rotateX(0deg) rotateY(50deg) rotateZ(0deg) skew(0deg, 27.5deg);
}

.opening-text.very-large-angular:hover:before {
    transform: rotateX(0deg) rotateY(-60deg) rotateZ(0deg);
}

.opening-text.very-large-angular:hover:after {
    transform: scale(1.08, 1) rotateX(0deg) rotateY(60deg) rotateZ(0deg) skew(0deg, 33deg);
}

ホバー時の:before疑似要素と:after疑似要素の角度を調整しています。

少しややこしい感じになっていますが、調整しているのはrotateY(~deg)の部分と:afterの方のskewの第二引数です。

rotateY(~deg)の部分については、:beforeの方と:afterの方で合わせています。

skewの第二引数については、rotateY(~deg)の調整に合わせて、等倍くらいがいいかと思います。

実際に表示して確認してみます。

以下のように、divタグを記述してみてください。

<div class="opening-text very-small-angular" data-letter="角度がとても小さい">角度がとても小さい</div>

<div class="opening-text small-angular" data-letter="角度が小さい">角度が小さい</div>

<div class="opening-text" data-letter="デフォルト">デフォルト</div>

<div class="opening-text large-angular" data-letter="角度が大きい">角度が大きい</div>

<div class="opening-text very-large-angular" data-letter="角度がとても大きい">角度がとても大きい</div>

表示は以下のような感じになります。

角度がとても小さい

角度が小さい

デフォルト

角度が大きい

角度がとても大きい

表示が確認できたら、マウスオーバー（スマホの場合はタップ）で動作を確認してみてください。

カスタム内容を組み合わせてみる！

ここまで追加したカスタム内容は組み合わせて使用することができます。

最後に、いくつか組み合わせのサンプルを紹介したいと思います。

以下のように、divタグを記述してみてください。

<div class="opening-text red-front blue-back small-font mincho-font very-large-angular" data-letter="サンプル１">サンプル１</div>

<div class="opening-text green-front very-large-font slow small-angular" data-letter="サンプル２">サンプル２</div>

<div class="opening-text blue-front blue-back large-font gothic-font very-slow" data-letter="サンプル３">サンプル３</div>