【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+JS】ウィンドウ内全体にファイルをドラッグ&ドロップしてアップロード
# はじめに ユーザーが選択したファイルをアップロードする必要がある場合、ファイル選択フィールドを設置することはもちろんですが、ファイルをドラッグ&ドロップしてアップロードできるようにもなっていると使い勝手のいいサービスだと言えます。しかし、ドラ [...]
2021年6月2日 15:15
【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む
# はじめに 動画のサムネイル画像をクリックしてモーダルウィンドウを表示し、その中にYouTube動画を動的に埋め込む方法について説明します。なお、本記事ではYouTube動画を動的に埋め込むまでを範囲とし、埋め込んだ動画の再生制御などは範囲外と [...]
2021年5月20日 23:23
【CSS+JS】テキストを1文字ずつ表示するアニメーションの実装方法
# はじめに モダンなサイトでよく見かける「テキストを1文字ずつ表示するアニメーション」の実装方法を解説します。 # 実装 ## サンプル 繰り返し動作を確認したい場合は右下の「Rerun」ボタンをクリックしてください。 <i [...]
2021年5月20日 13:26
【CSS】CSSだけでMarkdownのコードにファイル名をつける
# はじめに Markdownのコードに、そのコードがどのファイルのものなのかを示すためにファイル名が書いてあるとわかりやすいです。以下はQiitaの記事でコードを書いたときの一例です。 <img data-src="https://i.i [...]
2021年4月6日 14:39
【CSS】カーソルを乗せると流れるようなアニメーションのハンバーガーメニューを作る
# はじめに 今回はハンバーガーメニューにカーソルを乗せると川のように流れるアニメーションを作りたいと思います。 今回の記事は以下の記事をベースにしていますので、まだご覧になっていない方は先にこちらをご覧ください。 <div clas [...]
2020年8月31日 8:54