HTML_CSS
Googleでログイン問題44：スクロールを実装しよう
スクロールを実装してみましょう!
見本動画を参考にしてCSSに記述し実装してください。
見本動画を参考にしてCSSに記述し実装してください。
あらかじめエディタに書くコード
<div>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
¥HTML¥
div {
width: 200px;
margin: auto;
}
¥CSS¥
期待する画面
解答ソースコード
<div>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
¥HTML¥
div {
width: 200px;
margin: auto;
height: 200px;
overflow-y: auto;
}
¥CSS¥
補足
overflow: scroll;というように記述すると、上下と左右両方のスクロールを表示することもできます。
他にもスクロールに関するプロパティがいくつか用意されているので、気になったら調べてみましょう。
他にもスクロールに関するプロパティがいくつか用意されているので、気になったら調べてみましょう。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
スクロールしたい親クラスにheight(高さ)を指定してあげます。
縦スクロールであれば overflow-y: auto
横スクロールであれば overflow-x: auto
を指定してあげましょう。