01 reset.css､normalize.cssとは

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSSのリセット</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>見出し1</h1>
  <h2>見出し2</h2>
</body>
</html>



      

    

   
  
02 開発ツール

   
Intenet ExplolerやFirefox、chromeなどのブラウザにはHTML構造を表示する機能がある。

   F12キーを押すことでブラウザの下部等に表示される。


  
03 ワンカラムレイアウト

      

      

        
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ワンカラムレイアウト</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
 <div id="wrapper">
  <div id="header">header</div>
  <div id="main">main</div>
  <div id="footer">footer</div>
  </div>
</body>
</html>



      

      

        
#wrapper{
  width: 600px;
  margin: 0 auto;
}

#header{
  background: lime;
}

#main{
  background: beige;
}

#footer{
  background: lightcyan ;
}


      

    

    
※footerを最下部に表示するのはCSSだけでは面倒なのですが、
head内に
    jQueryとjavascriptを読み込むことで実現できます。

    footerFixed.jsダウンロードしてサイト内に保存したうえで下記を記述。

    フッター要素を、CSSで必ず「#footer」と指定すること。


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    
<script type="text/javascript" src="./footerFixed.js"></script>

   
  
04 アイキャッチ画像の配置

    

      

        
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>アイキャッチ画像</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
 <div id="wrapper">
  <div id="header">header</div>
  <div id="eyecatch">eyecatch</div>
  <div id="main">main</div>
  <div id="footer">footer</div>
  </div>
</body>
</html>



      

      

        
#wrapper{
  width: 600px;
  margin: 0 auto;
}

#header{
  background: lime;
}

#main{
  background: beige;
}

#footer{
  background: silver ;
}

#eyecatch{
  background: url("img/eyecatch.jpg");
  background-repeat: no-repeat;  
  background-size: cover;
  height:200px;
}
        

      

    

   
  
05 2カラムのレイアウト (固定幅)

    

      

        
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>2カラムのレイアウト</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="wrapper">
    <div id="header">header</div>
    <div id="main">
      <div id="left">left</div>
      <div id="right">right</div>
    </div>
    <div id="footer">footer</div>
  </div>
</body>
</html>


      

      


#wrapper{
  width: 600px;
  margin: 0 auto;
}

#header{
  background: lime;
}

#main{
  background: beige;
}

#footer{
  background: silver ;
  clear:both;
}

#left{
  background-color: lightcyan ;
  float:left;
  width:200px;
}

#right{
  background-color: gold ;
  float:right;
  width:400px;
  /*
  width:300px;
  float:left;
  margin-left:100px;
  */
}


      

    

   
  
06 clearfixを設定する

    

      

        
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>2カラムのレイアウト</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="wrapper">
    <div id="header">header</div>
    <div id="main" class="clearfix">
      <div id="left">left</div>
      <div id="right">right</div>
    </div>
    <div id="footer">footer</div>
  </div>
</body>
</html>


      

      

        
#wrapper{
  width: 600px;
  margin: 0 auto;
}

#header{
  background: lime;
}

#main{
  background: beige;
}

.clearfix::after{
  content:"";
  display: block;
  clear: both;
}

#footer{
  background: silver ;
}

#left{
  background-color: lightcyan ;
  float:left;
  width:200px;
}

#right{
  background-color: gold ;
  float:right;
  width:400px;
  /*
  width:300px;
  float:left;
  margin-left:100px;
  */
}


      

    

  
07 カラムに余白をつける

    

      

        
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>2カラムのレイアウト</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="wrapper">
    <div id="header">header</div>
    <div id="main" class="clearfix">
      <div id="left">left</div>
      <div id="right">right</div>
    </div>
    <div id="footer">footer</div>
  </div>
</body>
</html>


      

      

        
#wrapper{
  width: 600px;
  margin: 0 auto;
}

#header{
  background: lime;
}

#main{
  background: beige;
}

.clearfix::after{
  content:"";
  display: block;
  clear: both;
}

#footer{
  background: silver ;
}

#left, #right{
  padding: 10px;
  box-sizing:border-box;
}

#left{
  background-color: lightcyan ;
  float:left;
  width:180px;
  margin-right: 20px;
}

#right{
  background-color: gold ;
  float:right;
  width:400px;
  /*
  width:300px;
  float:left;
  margin-left:100px;
  */
}


      

    

   
  
08 3カラムレイアウトを作成する

    

      

        
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>3カラムのレイアウト</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="wrapper">
    <div id="header">header</div>
    <div id="main" class="clearfix">
      <div id="left">left</div>
      <div id="center">center</div>
      <div id="right">right</div>
    </div>
    <div id="footer">footer</div>
  </div>
</body>
</html>


      

      

        
#wrapper{
  width: 600px;
  margin: 0 auto;
}

#header{
  background: lime;
}

#main{
  background: beige;
}

.clearfix::after{
  content:"";
  display: block;
  clear: both;
}

#footer{
  background: silver ;
}


#left{
  background-color: lightcyan ;
  float:left;
  width:150px;
}

#center{
  background-color: pink ;
  width:300px;
}

 #right{
  background-color: gold ;
  float:right;
  width:150px;
}


      

    


 
 
実践的なサンプルを作る
      
  
09 ページの構造を作る

    

      

        
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページレイアウト</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="wrapper">
    <div id="header">header</div>
    <div id="menu">menu</div>
    <div id="main" class="clearfix">
      <div id="contents">
        contents
      </div>
      <div id="sidebar">
        sidebar
      </div>
    </div>
    <div id="footer">footer</div>
  </div>
</body>
</html>


      

      

        

      

    

   
  
10 2カラムにレイアウト変更

    

      

        
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページレイアウト</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="wrapper">
    <div id="header">header</div>
    <div id="menu">menu</div>
    <div id="main" class="clearfix">
      <div id="contents">
        contents
      </div>
      <div id="sidebar">
        sidebar
      </div>
    </div>
    <div id="footer">footer</div>
  </div>
</body>
</html>


      

      

        
html{
  background-image: url("images/bg.png");
  height: 100%;
}

body{
  height: 100%;
  font-family:Avenir , "Open Sans" , "Helvetica Neue" ,
 Helvetica , Arial , Verdana , Roboto , "游ゴシック" ,
 "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ
角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,
 "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" ,
 sans-serif;
  font-size: 14px;
}
body > #contents{
    height: auto;
}
#wrapper{
  min-height: 100%;
  width: 600px;
  margin: 0 auto;
  padding: 0 10px;
  background-color: #fff;
}

#header{
  margin-bottom: 15px;
}

#menu{
  margin-bottom: 15px;
}

#main{
  overflow: hidden;
  margin-bottom: 15px;
}

#contents{
  float: left;
  width: 400px;
}

#sidebar{
  float: right;
  width: 180px;
}

#footer{
  
}


      

    

   
  
11 ヘッダーとフッター

    

      

        
<!DOCTYPE html>
<html lang=ja>
<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="samplestyle.css">
</head>
<body>
  <div id="wrapper">
    <div id="header"><h1><img src="images/eyecatch.jpg"
 alt="logo"></h1></div>
    <div id="menu">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">商品情報</a></li>
        <li><a href="#">店舗情報</a></li>
      </ul>
    </div>
    <div id="main">
      <div id="contents">
        contents
      </div><!-- contents -->
      <div id="sidebar">
        sidebar
      </div><!-- sidebar -->
    </div><!-- main -->
    <div id="footer">Copyright 2016, Hayashi</div>
  </div><!-- wrapper -->
</body>
</html>


      

      

        
html{
  background-image: url("images/bg.png");
  height: 100%;
}

body{
  height: 100%;
  font-family:Avenir , "Open Sans" , "Helvetica Neue" ,
 Helvetica , Arial , Verdana , Roboto , "游ゴシック" ,
 "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ
角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,
 "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" ,
 sans-serif;
  font-size: 14px;
}
body > #contents{
    height: auto;
}
#wrapper{
  min-height: 100%;
  width: 600px;
  margin: 0 auto;
  padding: 0 10px;
  background-color: #fff;
}

#header{
  margin-bottom: 15px;
}

#menu{
  margin-bottom: 15px;
}

#main{
  overflow: hidden;
  margin-bottom: 15px;
}

#contents{
  float: left;
  width: 400px;
}

#sidebar{
  float: right;
  width: 180px;
}

#footer{
  font-size: 12px;
  color: silver;
  text-align: center;
  border-top: 1px solid silver;
  padding: 10px 0 ;
}


      

    

   
  
12 メニューのスタイル

    

      

        
<!DOCTYPE html>
<html lang=ja>
<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="samplestyle.css">
</head>
<body>
  <div id="wrapper">
    <div id="header"><h1><img src="images/eyecatch.jpg"
 alt="logo"></h1></div>
    <div id="menu">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">商品情報</a></li>
        <li><a href="#">店舗情報</a></li>
      </ul>
    </div>
    <div id="main">
      <div id="contents">
        contents
      </div><!-- contents -->
      <div id="sidebar">
        sidebar
      </div><!-- sidebar -->
    </div><!-- main -->
    <div id="footer">Copyright 2016, Hayashi</div>
  </div><!-- wrapper -->
</body>
</html>


      

      

        
html{
  background-image: url("images/bg.png");
  height: 100%;
}

body{
  height: 100%;
  font-family:Avenir , "Open Sans" , "Helvetica Neue" ,
 Helvetica , Arial , Verdana , Roboto , "游ゴシック" ,
 "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ
角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,
 "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" ,
 sans-serif;
  font-size: 14px;
}
body > #contents{
    height: auto;
}
#wrapper{
  min-height: 100%;
  width: 600px;
  margin: 0 auto;
  padding: 0 10px;
  background-color: #fff;
}

#header{
  margin-bottom: 15px;
}

#menu{
  margin-bottom: 15px;
}

#main{
  overflow: hidden;
  margin-bottom: 15px;
}

#contents{
  float: left;
  width: 400px;
}

#sidebar{
  float: right;
  width: 180px;
}

#footer{
  font-size: 12px;
  color: silver;
  text-align: center;
  border-top: 1px solid silver;
  padding: 10px 0 ;
}
#menu ul>li{
  display: inline-block;
  width: 100px;
  font-size: 13px;
  text-align: center;
  padding: 4px;
  background: silver;
  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;
}


      

    

   
  
13 見出しと本文

    

      

        
<!DOCTYPE html>
<html lang=ja>
<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="samplestyle.css">
</head>
<body>
  <div id="wrapper">
    <div id="header"><h1><img src="images/eyecatch.jpg" 
alt="logo"></h1></div>
    <div id="menu">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">商品情報</a></li>
        <li><a href="#">店舗情報</a></li>
      </ul>
    </div>
    <div id="main">
      <div id="contents">
        <h2>見出し</h2>
        <p>食材と水にこだわった、安心安全の惣菜。ここに説明文
        が入ります。ここに説明文が入ります。ここに説明文が入りま
        す。ここに説明文が入ります。</p>
      <p>食材と水にこだわった、安心安全の惣菜。ここに説明文
        が入ります。ここに説明文が入ります。ここに説明文が入りま
        す。ここに説明文が入ります。</p>
        <h2>見出し</h2>
        <p>食材と水にこだわった、安心安全の惣菜。ここに説明文
        が入ります。ここに説明文が入ります。ここに説明文が入りま
        す。ここに説明文が入ります。</p>
      <p>食材と水にこだわった、安心安全の惣菜。ここに説明文
        が入ります。ここに説明文が入ります。ここに説明文が入りま
        す。ここに説明文が入ります。</p>
      </div><!-- contents -->
      <div id="sidebar">
        <h3>見出し</h3>
        <p>ここに説明文が入ります。ここに説明文が入ります。ここ
        に説明文が入ります。</p>
        <h3>見出し</h3>
        <p>ここに説明文が入ります。ここに説明文が入ります。ここ
        に説明文が入ります。</p>
      </div><!-- sidebar -->
    </div><!-- main -->
    <div id="footer">Copyright 2016, Hayashi</div>
  </div><!-- wrapper -->
</body>
</html>


      

      

        
html{
  background-image: url("images/bg.png");
  height: 100%;
}

body{
  height: 100%;
  font-family:Avenir , "Open Sans" , "Helvetica Neue" ,
 Helvetica , Arial , Verdana , Roboto , "游ゴシック" ,
 "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ
角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,
 "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" ,
 sans-serif;
  font-size: 14px;
}
body > #contents{
    height: auto;
}
#wrapper{
  min-height: 100%;
  width: 600px;
  margin: 0 auto;
  padding: 0 10px;
  background-color: #fff;
}

#header{
  margin-bottom: 15px;
}

#menu{
  margin-bottom: 15px;
}

#main{
  overflow: hidden;
  margin-bottom: 15px;
}

#contents{
  float: left;
  width: 400px;
}

#sidebar{
  float: right;
  width: 180px;
}

#footer{
  font-size: 12px;
  color: silver;
  text-align: center;
  border-top: 1px solid silver;
  padding: 10px 0 ;
}
#menu ul>li{
  display: inline-block;
  width: 100px;
  font-size: 13px;
  text-align: center;
  padding: 4px;
  background: silver;
  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;
}

h2, h3{
  font-weight: bold;
}

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

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



      

    

   
  
14 画像付きリスト

    

      

        
<!DOCTYPE html>
<html lang=ja>
<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="samplestyle.css">
</head>
<body>
  <div id="wrapper">
    <div id="header"><h1><img src="images/eyecatch.jpg"
 alt="logo"></h1></div>
    <div id="menu">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">商品情報</a></li>
        <li><a href="#">店舗情報</a></li>
      </ul>
    </div>
    <div id="main">
      <div id="contents">
        <h2>見出し</h2>
        <p>食材と水にこだわった、安心安全の惣菜。ここに説明文
        が入ります。ここに説明文が入ります。ここに説明文が入りま
        す。ここに説明文が入ります。</p>
      <p>食材と水にこだわった、安心安全の惣菜。ここに説明文
        が入ります。ここに説明文が入ります。ここに説明文が入りま
        す。ここに説明文が入ります。</p>
        <ul class="products">
          <li><img src="images/Fillet_steak-150x150.jpg"
 alt="特撰牛フィレ肉のステーキ" width="60" height="60px"><p>
フィレ肉なのであっさり柔らかく、お子様からお年寄りまで当店人気商品です。
 ブラックペッパーの風味豊かなソースでどうぞ</p></li>
          <li><img src="images/Smoked_salmon-150x150.jpg"
 alt="スモークサーモン" width="60" height="60px"><p>ノルウェー産
トラウトサーモンの燻製を相性の良いケーパー、ディル、レモンで頂きます。
</p></li>
          <li><img src="images/beef_curry-150x150.jpg"
 alt="欧風ビーフカレー" width="60" height="60px"><p>
国産牛の肩ロースを使用したヨーロッパスタイルのビーフカレーです。
</p></li>
        </ul>
        <h2>見出し</h2>
        <p>食材と水にこだわった、安心安全の惣菜。ここに説明文
        が入ります。ここに説明文が入ります。ここに説明文が入りま
        す。ここに説明文が入ります。</p>
      <p>食材と水にこだわった、安心安全の惣菜。ここに説明文
        が入ります。ここに説明文が入ります。ここに説明文が入りま
        す。ここに説明文が入ります。</p>
      </div><!-- contents -->
      <div id="sidebar">
        <h3>見出し</h3>
        <p>ここに説明文が入ります。ここに説明文が入ります。ここ
        に説明文が入ります。</p>
        <h3>見出し</h3>
        <p>ここに説明文が入ります。ここに説明文が入ります。ここ
        に説明文が入ります。</p>
      </div><!-- sidebar -->
    </div><!-- main -->
    <div id="footer">Copyright 2016, Hayashi</div>
  </div><!-- wrapper -->
</body>
</html>


      

      

        
html{
  background-image: url("images/bg.png");
  height: 100%;
}

body{
  height: 100%;
  font-family:Avenir , "Open Sans" , "Helvetica Neue" ,
 Helvetica , Arial , Verdana , Roboto , "游ゴシック" ,
 "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ
角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,
 "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" ,
 sans-serif;
  font-size: 14px;
}
body > #contents{
    height: auto;
}
#wrapper{
  min-height: 100%;
  width: 600px;
  margin: 0 auto;
  padding: 0 10px;
  background-color: #fff;
}

#header{
  margin-bottom: 15px;
}

#menu{
  margin-bottom: 15px;
}

#main{
  overflow: hidden;
  margin-bottom: 15px;
}

#contents{
  float: left;
  width: 400px;
}

#sidebar{
  float: right;
  width: 180px;
}

#footer{
  font-size: 12px;
  color: silver;
  text-align: center;
  border-top: 1px solid silver;
  padding: 10px 0 ;
}
#menu ul>li{
  display: inline-block;
  width: 100px;
  font-size: 13px;
  text-align: center;
  padding: 4px;
  background: silver;
  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;
}

h2, h3{
  font-weight: bold;
}

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

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

ul{
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

ul.products{
  margin-bottom: 15px;
}

ul.products>li{
  overflow: hidden;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dotted silver;
}

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

ul.products>li>img {
  float: left;
  width: 60px;
}

ul.products>li>p {
  margin-left: 70px;
  font-size: 13px;
}