overflowプロパティついて

overflow-y:scroll

overflow-yを指定したときは、縦方向にはみ出すコンテンツがある場合にのみ、縦スクロールバーを表示します。

scrollは多くのブラウザで縦横のスクロールバーを表示する

内容

あいうえおかきくけこさしすせそたちつてと、あいうえおかきくけこさしすせそたちつてと、あいうえおかきくけこさしすせそたちつてと、あいうえおかきくけこさしすせそたちつて、

HTML

<form action=”#”>
<p>内容</p>
<textarea name=”comment”>あいうえおかきくけこさしすせそたちつてと、あいうえおかきくけこさしすせそたちつてと、あいうえおかきくけこさしすせそたちつてと、あいうえおかきくけこさしすせそたちつて、</textarea>
</form>

CSS

textarea {
width: 120px;
height: 100px;
overflow-y: scroll;
}

overflow: hidden;

はみ出るコンテンツは表示しない

内容

あいうえおかきくけこさしすせそたちつてと、あいうえおかきくけこさしすせそたちつてと、あいうえおかきくけこさしすせそたちつてと、あいうえおかきくけこさしすせそたちつて、

HTML

<form action=”#”>
<p>内容</p>
<textarea name=”comment”>あいうえおかきくけこさしすせそたちつてと、あいうえおかきくけこさしすせそたちつてと、あいうえおかきくけこさしすせそたちつてと、あいうえおかきくけこさしすせそたちつて、</textarea>
</form>

CSS

textarea {
width: 120px;
height: 100px;
overflow:hidden;
}

overflow: auto;

ブラウザーに処理をまかせる。一般的に縦方向のスクロールバーのみ表示される。

内容

あいうえおかきくけこさしすせそたちつてと、あいうえおかきくけこさしすせそたちつてと、あいうえおかきくけこさしすせそたちつてと、あいうえおかきくけこさしすせそたちつて、

HTML

<form action=”#”>
<p>内容</p>
<textarea name=”comment”>あいうえおかきくけこさしすせそたちつてと、あいうえおかきくけこさしすせそたちつてと、あいうえおかきくけこさしすせそたちつてと、あいうえおかきくけこさしすせそたちつて、</textarea>
</form>

CSS

textarea {
width: 120px;
height: 100px;
overflow:auto;
}

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。