問題
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¥
期待する画面
解答と解説（文字を隠してみよう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
要素から文字を隠したい時は
親要素に対してoverflow: hidden;を付与してあげる事で隠す事ができます。
補足
overflowプロパティは、hidden以外にも用意されている値があります。
例えば、領域をはみ出して表示するvisible(デフォルト値)やスクロールで表示するscrollなどがあります。
scrollは表示するコンテンツをこれ以上広げたくないけど、内容を見れるようにしておきたいといった場合などに役立ちます。
ただ頻繁に使用するのはhiddenのみです。
hiddenには色々な使い方があるので、あとあと使用頻度が増えていくと思われます。
