【HTML】【CSS】要素の横並び整理

2018/01/04

要素を横並びさせる方法の整理。

Contents

1 ①floatの利用
2 ②display:inline-blockの利用
3 display:table の利用

①floatの利用

/*** float時のポイント ***/

①要素がfloat = 浮いている状態であるため親要素の中にfloat要素の高さは取得されない。
その対策として、clearプロパティ(clear:both)を使う。

●clearの利用方法1
float要素の後続要素に [clear:both]に直接設定する。そのまま。でも後続に都合の良い要素がないと…
空divを追加するとか、そういうことになっちゃう。

●clearの利用方法2 （clearfixというテクニック）
・後続要素が無い場合、擬似要素を利用してclearをする。
MicroClearfixというパターンが一般的。
floatしている要素の親要素、囲い要素にclearfix用のクラスを持たせることでfloatを解除する

#HTML

<html>  
  <body>
    <div class="wrapper cf">
        <div  class="main">
          <h1>main</h1>
        </div>
        
        <div class="sidebar">
           <p>サイドバー</p>
        </div>
       
    </div>
    <div class="footer">
       <p>フッター</p>
    </div>
  </body>
</html>

<html>

<body>

</div>

<p>サイドバー</p>

</div>

</div>

</body>

</html>

#CSS

<style>
   .wrapper{
       border:solid 1px #000;
       margin:auto; /*ブロック要素をセンターに配置*/
   }
   .main{
       float:left;
       border:solid 1px #000;
   }
   .sidebar{
       float:right;
       border:solid 1px #000;
    
   }
  
  
   /*利用方法1 footer */
   .footer{
      clear:both
   }
   
   /*利用方法2 micro clearfix*/ 
   .cf:before,.cf:after {
       content:" ";    /* 1 */
       display: table; /* 2 */
   }
   .cf:after{
       clear:both;
   }
   .cf {
       zoom:1;
   }
   
   
</style>

<style>

.wrapper{

border:solid 1px #000;

margin:auto; /*ブロック要素をセンターに配置*/

}

.main{

float:left;

border:solid 1px #000;

}

.sidebar{

float:right;

border:solid 1px #000;

}

/*利用方法1 footer */

.footer{

clear:both

}

/*利用方法2 micro clearfix*/

.cf:before,.cf:after {

content:" "; /* 1 */

display: table; /* 2 */

}

.cf:after{

clear:both;

}

.cf {

zoom:1;

}

</style>

②display:inline-blockの利用

IEはバージョン8から利用可能。もうオッケーだろ。

display:inline-blockの特長は、display:inlineのような振る舞いを基本としながら、display:blockのようにwidthやheight、marginやpadingの値が有効になる点。

floatを使わずに水平に並べることができ、また、親要素がtext-alignプロパティのスタイルを持っている場合は、それに従う。(text-align:centerとかで中央寄せとかが出来る。。。)

デメリットは、並べた要素の間に「謎のスキマ」が出来る。

このスキマの解決方法は

・HTML上の改行を無くす

・閉じタグを無くす

・要素間に空のコメントアウトを入れる

・CSSで解決する

<html>
  <head>

  </head>
  
  <body>
    <div class="wrapper">
      <ul class="pagenation">
        <li><a>1</a></li><li class="li2"><a>2</a></li> <!--改行を無くす -->
        <li><a>3</a></li><!-- 
        --><li><a>4</a><!--閉じタグを無くす -->
        <li><a>5</a></li>
      </ul>
      
      <!-- CSSで解決 -->
      <ul class="pagenation2">
        <li><a>1</a></li>
        <li><a>2</a></li>
        <li><a>3</a></li>
        <li><a>4</a></li>
      </ul>
      
    </div>
  </body>
  
  
  <style>
     .wrapper{
         border:solid 1px #000;
         margin:auto; /*ブロック要素をセンターに配置*/
     }
     .pagenation li{
         display:inline-block;
         border:solid 1px red;
     }
     
     .pagenation li a{
         border:solid 1px #000;
     }
     


     /** 2 **/
     .pagenation2 li{
         display:inline-block;
         border:solid 1px red;
     }
     
     .pagenation2 li a{
         border:solid 1px #000;
         display:inline-block
     }
     

     
     /*スキマ埋め*/
     .pagenation2 {
         letter-spacing:-0.31em;
     }
     .pagenation2  a{
         letter-spacing:normal;
     }
     
  </style>  
  

</html>

<html>

<head>

</head>

<body>

<li><a>3</a></li><!--

--><li><a>4</a>

</ul>

</ul>

</div>

</body>

<style>

.wrapper{

border:solid 1px #000;

margin:auto; /*ブロック要素をセンターに配置*/

}

.pagenation li{

display:inline-block;

border:solid 1px red;

}

.pagenation li a{

border:solid 1px #000;

}

/** 2 **/

.pagenation2 li{

display:inline-block;

border:solid 1px red;

}

.pagenation2 li a{

border:solid 1px #000;

display:inline-block

}

/*スキマ埋め*/

.pagenation2 {

letter-spacing:-0.31em;

}

.pagenation2 a{

letter-spacing:normal;

}

</style>

</html>

こんな感じ..

display:table の利用

親要素に display:tableを設定。子要素にdisplay:table-cellを設定すると、テーブルのように扱える。

特長的な部分は、親要素のwidthが100%のとき。inline-blockやfloatと異なる、子要素の幅がwidthで指定されているとしても、幅100％を満たすために、その子要素のwidthが足りない分を補足してくれる。子要素で均等に分けたいなら、 table-layout:fixedを指定すればOK。

この仕様を利用すれば、子要素の数が不特定でも均等な幅で広がるレイアウトを作ることが出来るので、利便性の高いテクニックといえる。

デメリットとしては、親要素の幅を子要素があふれても改行されることはないので、複数行レイアウトは難しい。

<html>
  <head>

  </head>
  
  <body>
    <div class="wrapper">
      <ul class="table">
        <li>A</li>
        <li>B</li>
        <li>C</li>
      </ul>
    </div>
  </body>
  
  <style>
  
    .wrapper{
        /*width:500px;*/
    }
    
    
    .table{
      display:table;
      table-layout:fixed;
      width:100%;
      border :solid 1px #000;
      padding:0px; /*なんかpadding-left:40pxがあったのでクリア*/ 
    }
    
    .table li{
      display:table-cell;
      border :solid 1px #000;
    }
    
  </style>
  
</html>