文字を隠してみよう

問題15：文字を隠してみよう

block要素の中に入っているテキストをCSSで隠してみましょう。

見本を参考に飛び出している文字を隠してみてください。

あらかじめエディタに書くコード

                <div class="block" style="position: relative;width: 200px;height: 50px;border: 1px solid;">
    <div style="position: absolute;width: 300px;">テキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
¥HTML¥

期待する画面

解答ソースコード

              <div class="block" style="position: relative;width: 200px;height: 50px;border: 1px solid;">
  <div style="position: absolute;width: 300px;">テキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
¥HTML¥

              .block {
  overflow: hidden;
}
¥CSS¥

解説

要素から文字を隠したい時は
親要素に対してoverflow: hidden;を付与してあげる事で隠す事ができます。

ログインして解答を見る

補足

overflowプロパティは、hidden以外にも用意されている値があります。
例えば、領域をはみ出して表示するvisible(デフォルト値)やスクロールで表示するscrollなどがあります。
scrollは表示するコンテンツをこれ以上広げたくないけど、内容を見れるようにしておきたいといった場合などに役立ちます。
ただ頻繁に使用するのはhiddenのみです。
hiddenには色々な使い方があるので、あとあと使用頻度が増えていくと思われます。

#忍者CODE無料問題集で活動を記録しよう

完了にする！

BACK > CSSのセレクタをマスターしよう/その2 へ

NEXT > styleの優先順位を変更しようへ

コース一覧に戻る

1.HTMLの宣言をしてみよう

続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。