CSSのレイアウト例　その4 グリッドレイアウト

本日はグリッドレイアウトについて。

このサイトだけ見ても多分、デザインのイメージはわかないと思います(汗)

サイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない　新・CSSデザインの大原則」を買いましょう。

グリッドレイアウトとは画面を細かいブロックに分割し、その何個分という幅で定義するレイアウトでBootstrapが一般的です。

.container{
  width:955px;
  margin:0 auto;
}

/** 全カラムに共通の要素 **/
.grid1 ,.grid2 ,.grid3, .grid4
.grid5 ,.grid6 ,.grid7, .grid8
.grid9 ,.grid10 ,.grid11, .grid12
.grid13 ,.grid14 ,.grid15, .grid16{
  float:left;
  display:inline;
  margin-left:5px;
} 

/** サイズは個別 **/
.grid1{width:55px;}
.grid2{width:115px;}
/**  以下60pxずつ増やす **/

.first{
  margin-left:0;
  clear:left;
}

/** clearfix **/
.clearfix:after{
  visibility:hidden;
  display:block;
  font-size:0;
  content:"";
  clear:both;
  height:0;
}

.container{

width:955px;

margin:0 auto;

}

/** 全カラムに共通の要素 **/

.grid1 ,.grid2 ,.grid3, .grid4

.grid5 ,.grid6 ,.grid7, .grid8

.grid9 ,.grid10 ,.grid11, .grid12

.grid13 ,.grid14 ,.grid15, .grid16{

float:left;

display:inline;

margin-left:5px;

}

/** サイズは個別 **/

.grid1{width:55px;}

.grid2{width:115px;}

/** 以下60pxずつ増やす **/

.first{

margin-left:0;

clear:left;

}

/** clearfix **/

.clearfix:after{

visibility:hidden;

display:block;

font-size:0;

content:"";

clear:both;

height:0;

}

HTML 左サイドバー+メインコンテンツ

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サイトのタイトル</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"  />
</head>
<body>
    <div class="container clearfix">
        <div id="header" class="grid4 first">
        <!-- 左のサイドバーのカラム-->
        </div>
   
        <div id="content" class="grid12">
        <!--メインのカラム-->
        </div> 

    </div> 
</body>
</html>

<!DOCTYPE html>

<head>

<title>サイトのタイトル</title>

</head>

<body>

</div>

</div>

</body>

</html>

左サイドバーのカラム

<div id="header" class="grid4 first">
    <div class="logo">
        <img src="images/logo.png">  
    </div>

    <div class="nav">
        <ul>
            <li><a href="#">STUFFED ANIMAL</a></li>
            <li><a href="#">PLANT</a></li>
             ・・・・・・・・・・・・・・・・・・・・・・
        </ul>
    </div>

</div>

</div>

<ul>

<li><a href="#">STUFFED ANIMAL</a></li>

<li><a href="#">PLANT</a></li>

・・・・・・・・・・・・・・・・・・・・・・

</ul>

</div>

左カラムのCSS

#header .logo{
  margin:90px auto;
  width:113px;
}

#header .nav li{
  margin:0 40px 15px;
  padding-bottom:15px;
  border-bottom:1px solid #fff;
}

#header .nav li a{
  font-weight:bold;
  color:#000;
}

#header .logo{

margin:90px auto;

width:113px;

}

#header .nav li{

margin:0 40px 15px;

padding-bottom:15px;

border-bottom:1px solid #fff;

}

#header .nav li a{

font-weight:bold;

color:#000;

}

メインコンテンツのHTML+CSS

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サイトのタイトル</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"  />
</head>
<body>
    <div class="container clearfix">
        <div id="header" class="grid4 first">
        <!-- 左のサイドバーのカラム-->
        </div>
   
        <div id="content" class="grid12">
        <!--メインのカラム-->
        </div> 

    </div> 
</body>
</html>

<!DOCTYPE html>

<head>

<title>サイトのタイトル</title>

</head>

<body>

</div>

</div>

</body>

</html>

コンテンツ部分のHTMLを2分割grid6を2つ書いている

<div id="content" class="grid12">
    <!-- 2列 -->
    <div class="grid6 first">
        <h2 class="title">
            <!--画像URL-->
        </h2>   
    </div>

    <div class="grid6">
        
    </div>

</div>

</h2>

</div>

</div>

中列の処理 4つのブロックがある場合gird3を4つに分ける

<div id="content" class="grid12">

    <div class="grid3 first">
    </div>

    <div class="grid3">
    </div>

    <div class="grid3">
    </div>

    <div class="grid3">
    </div>

</div>

</div>

</div>

</div>

</div>

footer

<div id="content" class="grid12">
    <!-- footer -->
    <div id="footer" class="grid12 first">
        <div class="nav"> 
            <ul>
                <li>
                    <a href="#"></a>
                </li>
            
            </ul>
        </div>    
    </div>
</div>

<ul>

<li>

</li>

</ul>

</div>

footerのCSS

#footer{
  height:240px;
}

#footer .nav {
  padding:30px 0 0 30px;
}

#footer .nav li{
  float;left;
  margin:0 15px;
}

#footer{

height:240px;

}

#footer .nav {

padding:30px 0 0 30px;

}

#footer .nav li{

float;left;

margin:0 15px;

}

CSSのレイアウト例 その4 グリッドレイアウト

CSSのレイアウト例　その4 グリッドレイアウト