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>
・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>