Zenn
🙄

CSS widthやheightからはみ出した要素を見えないようにする

2024/12/19に公開
CSS
tech

CSSが苦手なので再度取り組んでいます。備忘録として残しておきます

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>CSS</title>
</head>
<body>
    <p>こんちゃっすこんちゃっすこんちゃっすこんちゃっすこんちゃっすこんちゃっすこんちゃっすこんちゃっす</p>
</body>
</html>

body {
    margin: 0;
}

p {
    background-color: pink;
    margin: 16px 0;
    width: 160px;
    height: 80px;
}

上記のようにした場合文章がはみ出してしまいます。

ですので、overflowを使用してはみ出した分は見えないようにします。

body {
    margin: 0;
}

p {
    background-color: pink;
    margin: 16px 0;
    width: 160px;
    height: 80px;

    overflow: hidden; //はみ出した分を非表示にする
}

これでできましたね

はみ出した分をスクロールできるようにする

overflowを使用してはみ出した分をスクロールできるようにします

body {
    margin: 0;
}

p {
    background-color: pink;
    margin: 16px 0;
    width: 160px;
    height: 80px;

    overflow: scroll;
}

スクロールバーを写してスクショが撮れませんでしたがこれでスクロールできるようになりました。

Discussion