【CSS】テキストを領域内に入った部分から徐々に表示

2020年8月27日 13:46

はじめに

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

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

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

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

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

サンプル

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

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

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

解説

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

.overflow-hidden {
  overflow: hidden;
}
<div class="overflow-hidden">
  <h1>Sample Text</h1>
</div>

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

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

関連記事

【CSS】CSSだけでMarkdownのコードにファイル名をつける
# はじめに Markdownのコードに、そのコードがどのファイルのものなのかを示すためにファイル名が書いてあるとわかりやすいです。以下はQiitaの記事でコードを書いたときの一例です。 <img data-src="https://i.i [...]
2021年4月6日 14:39
【CSS】カーソルを乗せると流れるようなアニメーションのハンバーガーメニューを作る
# はじめに 今回はハンバーガーメニューにカーソルを乗せると川のように流れるアニメーションを作りたいと思います。 今回の記事は以下の記事をベースにしていますので、まだご覧になっていない方は先にこちらをご覧ください。 <div clas [...]
2020年8月31日 8:54
【CSS】JavaScriptを使わずにハンバーガーメニューを作る
# はじめに 当初はスペースの限られるスマートフォンなどの低解像度デバイス向けサイトにおいてスペースを有効活用するために登場したハンバーガーメニューですが、最近はPCなどの高解像度デバイス向けサイトでも使われているのをよく見かけます。 何よ [...]
2020年8月31日 7:34
【CSS】CSSカスタムプロパティとJavaScriptを使ってモード切替(配色変更)を実装
# はじめに 便利なCSSカスタムプロパティ。実はJavaScriptから取得/設定ができます。今回はCSSカスタムプロパティとJavaScriptを使ってモード切替(配色変更)を実装する方法を解説します。 # CSSカスタムプロパティ [...]
2020年8月30日 18:07
【CSS】transitionの効果を一方向(ゆっくり変化し即座に戻る)にする
# はじめに 最近は`transition`を使った動きのあるWebサイトがたくさんあります。まったく動きのない静的なページを見つけるのが難しいくらいです。 今回は、`transition`の効果を一方向(ゆっくり変化し即座に戻る)にする方 [...]
2020年8月27日 14:51