web制作におけるレイアウト手法
ほとんどがレイアウト制作の例
内容的にはドットインストールのhtml, css, css3入門でやったことの復習なので、細かいことはそちらを参照

2カラムの例

<!doctype html>
<html lang=“ja”>
<head>
<meta charset=“UTF-8”>
<title>レイアウトの練習</title>
<link rel=“stylesheet” type=“text/css” href=“http://yui.yahooapais.com/3.16.0/build/cssreset/cssreset-min.css”>
<link rel=“stylesheet” type=“text/css” href=“mycss.css”>
</head>
<body>
     <div id=“container”>
          <div id=“header”>
           </div>
          <div id=“mail”>
               <div id=“left”>
                  </div>
               <div id=“right”>
               </div>
          </div>.
          <div id=”footer”>
          </div>
     </div>
</body>
</html>


/* mycss.css */

#container{
     width:500px;
     margin: 0 auto;
}

#main{
overflow:hidden;

#left{
float:left;
width:30%;
}

#right{
float:right;
width:60%
}

カラムのレイアウト

floatをつかうときにはwidthを指定する
floatの回り込み回避のために、overflow:hidden;をつかう

上下にmarginを指定するとmarginの相殺が起こる

containerの高さを画面いっぱいにのばす

container{
height:100%
}

body{
height:100%;
}

body >#container{
height:100%;
}

#container{
min-height:100%
height:100%
}

header

<h1><img src=“image.png”></h1>

#menu ul > li{   
     float:left;
     width:100px;
     font-size:13px;
     text-align:center;
     padding:4px;
     background:#ccc;
     margin-right:10px;
     border-radius:4px;
     text-shadow:0 1px 0 #fff ;
}

#menu ul>li:hover{
     background;#ddd;
}

#menu ul >li>a{
     text-decoration:none;
     display:block;
}

footer

例(css) ）
#footer{ font-size:12px; color: #css; text-align:center; border-top:1px solid #ccc; }

見出しの例

h2{
font-size:16px;
border-left:5px solid #ccc;
padding:3px 0 3px 10px;
margin-bottom:10px;
}

h3{
border-bottom:1px solid #ccc;
padding:3px 0;
margin-bottom:10px;
}

最後のリストのborderだけ外す

ul.products>li{
     border:1px dotted #ccc;
} 

ul.products>li:last-child{
     border:none;
}

アイコン付きリストの例

ul .submenu >li{
     background:url(‘image.png’) no-repeat;
     padding:0 0 5px 20px;
}

実践！ウェブサイトを作ろう（ドットインストール）