はじめに

現在、お仕事でWebアプリを作っています。これを機会にイチからWebデザインの勉強をしようと思い、脱・Bootstrapを目指して頑張っています。

まだまだ高度なコードは書けませんが、これから少しずつCSS関連の記事も書いていきたいと思います。

さて、今回は「テキストを領域内に入った部分から徐々に表示」についての記事です。

「テキストをふわっと表示」について説明している記事はたくさんありますが、「テキストを領域内に入った部分から徐々に表示」について説明している記事はあまりありませんでした。

「テキストをふわっと表示」では得られないクールな印象を与えるエフェクトですので、ぜひ参考にしていただければと思います。

サンプル

「テキストを領域内に入った部分から徐々に表示」と言われてもイメージしづらいと思いますので、まずはサンプルをご覧ください（スタイルの説明が難しい）。

※再度動かす場合は、Resultの右下の「Rerun」をクリックしてください。

ひとつめのテキストは領域外から既に表示されていますが、ふたつめのテキストは領域内に入った部分から徐々に表示されています。

解説

領域外にあるテキストを表示させないようにするには、テキストを以下のスタイルで囲みます。

.overflow-hidden {
  overflow: hidden;
}

<div class="overflow-hidden">
  <h1>Sample Text</h1>
</div>

overflowははみ出し部分の表示を設定します。hiddenにすることではみ出し部分（領域外）を表示させないようにします。

このスタイルはマウスホバー時の画像拡大などでもよく使われています。