HTML_CSS
Googleでログイン
問題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以外にも用意されている値があります。
例えば、領域をはみ出して表示するvisible(デフォルト値)やスクロールで表示するscrollなどがあります。
scrollは表示するコンテンツをこれ以上広げたくないけど、内容を見れるようにしておきたいといった場合などに役立ちます。
ただ頻繁に使用するのはhiddenのみです。
hiddenには色々な使い方があるので、あとあと使用頻度が増えていくと思われます。
例えば、領域をはみ出して表示するvisible(デフォルト値)やスクロールで表示するscrollなどがあります。
scrollは表示するコンテンツをこれ以上広げたくないけど、内容を見れるようにしておきたいといった場合などに役立ちます。
ただ頻繁に使用するのはhiddenのみです。
hiddenには色々な使い方があるので、あとあと使用頻度が増えていくと思われます。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
親要素に対してoverflow: hidden;を付与してあげる事で隠す事ができます。