CSSのレイアウト例　その2 部分的な多カラムレイアウト

投稿日：2016年9月9日

ナビのボタンや一覧のリスト項目などfloatを使ったいろいろなバリエーションについて。

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

Contents

1 ヘッダー
2 リスト系
3 ボックス系の記事一覧のレイアウト

ヘッダー

<header>
    <div class="header_innner">
        <h1>ロゴ</h1>
        <div class="cart">画像が来ます</div>
    </div>
    
    <nav id="gnav">
       <ul>
           <li class="nav1"><a href="">リスト1</a></li>
           <li class="nav2"><a href="">リスト2</a></li>
           <li class="nav3"><a href="">リスト3</a></li>
           <li class="nav4"><a href="">リスト4</a></li>
           <li class="nav5"><a href="">リスト5</a></li>
       </ul> 
    </nav>
</header>

<div class="cart">画像が来ます</div>

</div>

<ul>

</ul>

</nav>

</header>

.header_innner{
  /** ここで高さをそろえているので表示崩れがない。clearを使わなくても崩れない **/
  height:100px;
}

.logo{
  float:left;  
}

.cart,#gnav{
  float:right; 
} 

#gnavi li{
  float:left;
  width:140px;
}

#gnavi ul:after{ 
  /** 中の要素であるliがすべてfloatしているので、gnaviの高さは0になるclearする必要がある**/
  content:"";
  clear:both;
  display:block;
}

.header_innner{

/** ここで高さをそろえているので表示崩れがない。clearを使わなくても崩れない **/

height:100px;

}

.logo{

float:left;

}

.cart,#gnav{

float:right;

}

#gnavi li{

float:left;

width:140px;

}

#gnavi ul:after{

/** 中の要素であるliがすべてfloatしているので、gnaviの高さは0になるclearする必要がある**/

content:"";

clear:both;

display:block;

}

リスト系

日付やカテゴリーマーカー、概要分など縦一列の情報を表示するとき

<ul class="list l-information">
    <li><a href="#">   
        <dl>
            <dt>2015.04.03</dd>   
            <dd class="tag c1">Photoshop</dd>
            <dd class="txt">Photoshopイベント</dd>
        </dl>
　　　</a></li>
    <li><a href="#">   
        <dl>
            <dt>2015.03.31</dd>   
            <dd class="tag c2">TypoGraphi</dd>
            <dd class="txt">グラフィックデザイン</dd>
        </dl>
　　　</a></li>
    ************************************
</ul>

<dl>

<dd class="tag c1">Photoshop</dd>

<dd class="txt">Photoshopイベント</dd>

</dl>

　　　</a></li>

<dl>

<dd class="tag c2">TypoGraphi</dd>

<dd class="txt">グラフィックデザイン</dd>

</dl>

　　　</a></li>

************************************

</ul>

.l-information dt,
.l-information .tag{
  float:left;
  width:80px;
}

.l-information .txt{
  float:right;
  width:370px;
}

.l-information dl:after{
  content:"";
  clear:both;
  display:block;
}

.l-information dt,

.l-information .tag{

float:left;

width:80px;

}

.l-information .txt{

float:right;

width:370px;

}

.l-information dl:after{

content:"";

clear:both;

display:block;

}

ボックス系の記事一覧のレイアウト

画像と文章がワンセットになった記事を複数まとめるときなど

<ul class="list l-article">
    <li><a href="#">   
        <img src="画像のURL">
        <dl>
            <dt>2015.02.09</dd>   
            <dd class="txt">デザインで大事なこと</dd>
            <dd class="link">続きを読む</dd>
        </dl>
　　　</a></li>
     ********************************************
    <!-- 右端になるリスト -->
    <li class="nth-child3"><a href="#">   
        <img src="画像のURL">
        <dl>
            <dt>2015.02.15</dd>   
            <dd class="txt">週間ランキング</dd>
            <dd class="link">続きを読む</dd>
        </dl>
　　　</a></li>
    ************************************
</ul>

<dl>

<dd class="txt">デザインで大事なこと</dd>

<dd class="link">続きを読む</dd>

</dl>

　　　</a></li>

********************************************

<dl>

<dd class="txt">週間ランキング</dd>

<dd class="link">続きを読む</dd>

</dl>

　　　</a></li>

************************************

</ul>

.l-article li{
  float:left;
  width:192px;
  margin:0 12px 12px 0;
}

/** 一番右端の記事で改行がいらないためmargin-right0を明示する**/
.l-article li.th-child3{
  margin-right:0px;
}

/* 記事の高さによって回り込みが正常でない場合があるため */
/** 右端の記事の次の記事は回り込みをさける**/
.l-article li.nth-child3+li{
  claer:left;
}

.l-article:after{
  content:"";
  clear:both;
  display:block;
}

.l-article li{

float:left;

width:192px;

margin:0 12px 12px 0;

}

/** 一番右端の記事で改行がいらないためmargin-right0を明示する**/

.l-article li.th-child3{

margin-right:0px;

}

/* 記事の高さによって回り込みが正常でない場合があるため */

/** 右端の記事の次の記事は回り込みをさける**/

.l-article li.nth-child3+li{

claer:left;

}

.l-article:after{

content:"";

clear:both;

display:block;

}

CSSのレイアウト例 その2 部分的な多カラムレイアウト

ヘッダー

リスト系

ボックス系の記事一覧のレイアウト

CSSのレイアウト例　その2 部分的な多カラムレイアウト