[CSS] 整列スタイル (float)

Study / Javascript, Jquery, Css    作成日付 : 2019/12/17 00:08:54   修正日付 : 2020/01/31 00:13:16

こんにちは。明月です。


html中で基本的にタグが優先でウェブページを作りますが、タグだけでは画面スタイルで要素配置が限界があります。

タグ以外のもっと動的な配置するようには「float」のスタイルを利用してもっと綺麗に配置ができます。

<html>
  <head>
    <style>
      body {
        background: gray;
      }
      div.row {
        background: white;
        display: inline-block;
        width: 100%;
      }
      p {
        border: 1px solid;
        margin: 5px;
        width: calc(50% - 12px);
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="row">
      <p style="height:50px;">1</p>
      <p style="height:20px;">2</p>
      <p style="height:20px;">3</p>
    </div>
  </body>
</html>

上の例をみれば「p」タグの幅が「40%」で、「1」の「p」タグ隣に「2」の「p」タグがあることまで十分に予想できます。

「3」の「p」タグの位置ですが、普通なら「1」の「p」タグの下にあることが正常です。

でも、実際には「1」タグ隣に「2」、「3」の「p」タグがあります。

なぜ、その結果になるかというと「float」タグのことです。


上の「p」タグを「float」設定をすべて「left」に設定します。上、右からテトリスになると思ったらよいです。

「1」番が右に先に整列します。「2」番を整列します。「3」番は「2」番の下に空間があるので、そこで表示します。


同じく下に「4」番のことに置くとどのようになるか？

「1」番の下に「4」番が置くことになります。でも上の例は私が「3」番の高さを「40px」に設定しますね。

「1」番と「4」番の間が余白がなりました。ここで「1」番の下に余白なしで置く仕方はないかな。

<html>
  <head>
    <style>
      body {
        background: gray;
      }
      div.row {
        background: white;
        display: inline-block;
        width: 100%;
      }
      p {
        border: 1px solid;
        margin: 5px;
        width: calc(50% - 12px);
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="row">
      <p style="height:50px;">1</p>
      <p style="height:20px;">2</p>
      <p style="height:50px;float:right;">3</p>
      <p style="height:20px;float:right;">4</p>
    </div>
  </body>
</html>

「1」番と「2」番の「p」タグは「float」が「left」でしたが、「3」、「4」番は「right」に変更しました。

つまり、「3」番からテトリスが上、左に変わることですね。なので「3」、「4」番が上の例みたいになります。


普通は「float」要素を「left」、「right」を混在して使わないです。

「float」がポータルでダッシュボードのウィジェットを作ることでよく使うスタイルですが、逆にスタイルを崩れやすいのでサイズをよく考えながら使わなければならないです。

「float」を使いながら解除したいときには「clear:both;」タグで解除ができます。

<html>
  <head>
    <style>
      body {
        background: gray;
      }
      div.row {
        background: white;
        display: inline-block;
        width: 100%;
      }
      p {
        border: 1px solid;
        margin: 5px;
        width: calc(50% - 12px);
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="row">
      <p style="height:50px;">1</p>
      <p style="height:20px;">2</p>
      <p style="height:50px;float:right;">3</p>
      <p style="height:20px;clear: both;">4</p>
      <p style="height:20px;clear: both;">5</p>
    </div>
  </body>
</html>

「4」と「5」番の「p」タグは「clear: both」タグで「float」を解除しました。

◀前の投稿[CSS] 位置(position),表示(display)スタイル
次の投稿▶[CSS] Columnスタイル
#css,#float
「Study / Javascript, Jquery, Css」の他投稿
最新投稿