水平レイアウト構成

CSS入門

 
■float + clear属性で水平レイアウトを構成する
 
まず、横並びで配置する要素をfloat: leftを指定します。もし、特製要素のみ右側に固定したいならrightを指定します。それで、これらを含むコンテナdivタグを作成し、:after仮想セレクタでclearをします。

<style>
.h-container:after { clear: both; display: block; content: ” }
.h-container .item {
 float: left;
 width: 120px;
 text-align: center;
 border-right: 1px solid #ddd;
}
.h-container .item.login {
 float: right;
 border-right: none;
}
</style>
<div class=”h-container”>
 <div class=”item”>menu A</div>
 <div class=”item”>menu B</div>
 <div class=”item”>menu C</div>
 <div class=”item login”>Login</div>
</div>

出力結果

menu A
menu B
menu C

複雑なレイアウトでも下記のように作成できます。
nbsp;

<style>
.test-layout { width: 500px; }
.test-layout .gnb { padding: 15px; background-color: skyblue; }
.test-layout .main { background-color: white; }
.test-layout .main:after { clear: both; display: block; content: ” }
.test-layout .main .lnb { float: left; width: 100px; height: 254px; background-color: orange; }
.test-layout .main .content { float: left; width: 400px; }
.test-layout .footer{ padding: 15px; background-color: #ddd; }
</style>
<div class=”test-layout”>
 <div class=”gnb”>Menu</div>
 <div class=”main”>
  <div class=”lnb”>Left Menu</div>
  <div class=”content”>
   Content
  </div>
 </div>
 <div class=”footer”>
  Footer
 </div>
</div>

出力結果

Menu
Left Menu
Content

nbsp;
■総合
コンテナの中にまたコンテナが入ったり、コンテナを複数で配置したりなど状況に合わせて使いましょう。

<style>
.clearfix { clear: both; content: ''; display: block }
.test-site { background-color: white; }
.test-site .header { background-color: #01579B; height: 70px; }
.test-site .gnb { border-bottom: 1px solid #ddd; }
.test-site .gnb > div { float: left; width: 100px; text-align: center; height: 30px; border-right: 1px solid #ddd; }
.test-site .gnb > div.selected { background: #70acdc; }
.test-site .main .lnb { float: left; width: 25%; background-color: #f3f3f3; height: 300px; }
.test-site .main .article { float: left; width: 75%; }
.test-site .footer { background-color: #f0f0f0; border-top: 1px solid #ddd; height: 40px; }
</style>
<div class="test-site">
 <div class="header"></div>
 <div class="gnb clearfix">
  <div></div>
  <div class="selected"></div>
  <div></div>
 </div>
 <div class="main clearfix">
  <div class="lnb"></div>
  <div class="article"></div>
 </div>
 <div class="footer"></div>
</div>

出力結果

 
 
 
 

当サイトは広告を含めています。広告のクリックによる収益は全て当サイトの管理、維持、コンテンツ製作に使われます。

 

Team ladybird
タイトルとURLをコピーしました