ログイン

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

HTML_CSSの問題

HTML_CSS

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

文字を隠してみよう

問題

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」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!