CSSのoverflowプロパティの使い方

cssを記述していくと、指定したボックスの大きさでは中に製作したテキストや画像などが入りきらない場合が出てきます。そんな場合に(overflow)プロパティを使うことで、ボックスに入りきらない部分の表示を設定することができます。

今回は、その(overflow)プロパティの使い方をご紹介します。

overflowプロパティの使い方

要素 {
    overflow: 種類;
}

実際の記述の仕方はこうなります。例を見ていきましょう。

p.test1 {
        width: 50px;
        height: 20px;
        background-color: skyblue;
        overflow: visible;
}
<html>
<head>
  <link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>	
  <p class="test1">
   <b>visibleテスト</b><br>
   こんな感じに入りきらない部分ははみ出します!!<br>
   TSTTESTTESTTESTTESTTESTTESTTESTTEST
  </p>
</body>

上記の様に記述すると、こんな風に表示されます。

スクリーンショット 2016-03-02 12.05.01

値を変えるとそれぞれの指定が適用されます。(scroll)を入れると表示は以下の様になります。

スクリーンショット 2016-03-02 12.06.24

(hidden)を入れると、入りきらなかった部分は表示されません。

スクリーンショット 2016-03-02 12.09.12

その他にも値に(auto)を入れることもできます。その場合、はみ出した部分の表示の仕方はブラウザによって決定されます。大抵の場合は(scroll)になります。


イベント

2017/12/05(火)
Design Thinking Square

購読

平日・毎朝更新中