liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0の各種修飾 - サイズ関連属性 (width,height,box-sizing,resize)

・サイズ指定

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title>サイズ関連</title>
</head>
<body>
    <!-- 高、幅設定 -->
    <div style="width:200px;height:40px;background-color:#ddd">
    widthとheight属性でサイズ指定。
    </div>
    <br>
    <b>box-sizing属性</b>
    <div style="width: 200px;height:100px;background-color:#ddd;
      background-clip: content-box;
      border: 20px solid #555;
      padding: 20px;
      box-sizing: content-box;
      -moz-box-sizing: content-box;">
    box-sizing: content-box;<br>
    contentの幅200px,高100px
    </div>
    <div style="width: 200px;height:100px;background-color:#ddd;
      background-clip: content-box;
      border: 20px solid #555;
      padding: 20px;
      box-sizing: padding-box;
      -moz-box-sizing: padding-box;">
    box-sizing: padding-box;<br>
    paddingからの幅200px,高100px
    </div>
    <div style="width: 200px;height:100px;background-color:#ddd;
      background-clip: content-box;
      border: 20px solid #555;
      padding: 20px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;">
    box-sizing: border-box;<br>
    borderからの幅200px,高100px
    </div>
</body>
</html>

f:id:liguofeng29:20160202225723p:plain

・resize属性

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title>resize属性</title>
</head>
<body>
    <div style="width: 200px;height:100px;background-color:#eee;
      resize: both;
      overflow: auto;
      border: 2px solid #555;">
    resize: both;横、縦調整可能
    </div>
    <div style="width: 200px;height:100px;background-color:#eee;
      resize: horizontal;
      overflow: auto;
      border: 2px solid #555;">
    resize: horizontal;横調整可能
    </div>
    <div style="width: 200px;height:100px;background-color:#eee;
      resize: vertical;
      overflow: auto;
      border: 2px solid #555;">
    resize: vertical;縦調整可能
    </div>
</body>
</html>

f:id:liguofeng29:20160202230113g:plain