ログイン
問題15

文字を隠してみよう

この問題では、要素からはみ出る文字を隠す方法を習得します。 何かと頻繁に使用されることのあるプロパティが登場するので覚えていきましょう。

アイコン画像

問題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には色々な使い方があるので、あとあと使用頻度が増えていくと思われます。
完了にする!
twitterのアイコン
活動記録をTweetする
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる