pikesaku’s blog

個人的な勉強メモです。記載内容について一切の責任は持ちません。

HTML・CSS

HTML

<!-- コメント-->
<!doctype html>
 
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="pikesaku"> 
    <meta name="keywords" content="python study"> 
    <meta name="description" content="pike web">
    <meta name="robots" content="all">
    <meta http-equiv="content-language" content="ja">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <title>pike web site</title>
    <link rel="stylesheet" type="text/css" href="test.css">
  </head>
  <body>
    <div id="top">top</div>
    <div id="side">side</div>
    <div id="main">main</div>
  </body>
</html>

CSS

/*コメント*/
html {
  height: 100%;
  margin: 0;
}

body {
  margin: 0;
  height: 100%;
  overflow: auto;
}

#top {
  height: 50px;
  background-Color:blue;
  overflow: auto;
}

#side {
  float:left;
  width: 200px;
  background-Color:red;
  overflow: auto;
  height: 100%;
}

#main {
  overflow: auto;
  height: 100%;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ポイント

コメントはHTMLとCSSで書き方が違う

sideとmainにheight: autoを指定するとデータがある部分しか範囲にならない。

box-sizing指定することで、widhtがより制御しやすくなる。(boarder・margin・padding含まれる)
http://ja.learnlayout.com/box-sizing.html

bodyにmargin: 0つけないと周りに白い縁ができてしまう。