Yamamoto's Laboratory
レイアウト
プログラムソース

水平方向レイアウト (flaot)

水平方向のレイアウトは,以下のようにします.これには,CSS の float を使っています.

<div class="boxContainer">
    <div class="lbox">左寄せ html</div>
    <div class="lbox">左寄せ html</div>
    <div class="rbox">右寄せ html</div>
    <div class="rbox">右寄せ html</div>
</div>

具体例を以下に示します.右寄せの場合,最初に記述したものが最も右になります.そして,左側に順番にレイアウトされます.

水平方向レイアウトの具体例

<div class="boxContainer">
    <div class="lbox" style="margin-left:50px">
      <span style="background:#007bbb; padding:30px; color:white">左寄せ A</span>
    </div>

    <div class="lbox" style="margin-left:20px">
      <span style="background:#007bbb; padding:30px; color:white">左寄せ B</span>
    </div>

    <div class="lbox" style="margin-left:20px">
      <span style="background:#007bbb; padding:30px; color:white">左寄せ C</span>
    </div>

    <div class="rbox" style="margin-right:50px">
      <span style="background:#f8b500; padding:30px; color:white">右寄せ A</span>
    </div>

    <div class="rbox" style="margin-right:20px">
      <span style="background:#f8b500; padding:30px; color:white">右寄せ B</span>
    </div>

</div>

これをブラウザで表示すると,以下のように表示されます.

左寄せ A
左寄せ B
左寄せ C
右寄せ A
右寄せ B

今風のレイアウト (Flexbox)

水平レイアウト

クラス「flex_align_h」を使うと,簡単に水平方向にオブジェクトをレイアウトできます.その記述方法は,以下のとおりです.

<div class="flex_align_h">
    <div>左寄せ html</div>
    <div>左寄せ html</div>
    <div>左寄せ html</div>
    <div>左寄せ html</div>
</div>

これを使うと,以下のレイアウトができます.

左寄せ A
左寄せ B
左寄せ C
左寄せ D

この水平方向レイアウトのソースは以下のとおりです.

水平方向のレイアウト

<div class="flex_align_h" style="margin-left:100px">
    <div><span style="background:#007bbb; padding:10px; margin-right:20px; color:white">左寄せ A</span></div>
    <div><span style="background:#007bbb; padding:10px; margin-right:20px; color:white">左寄せ B</span></div>
    <div><span style="background:#007bbb; padding:10px; margin-right:20px; color:white">左寄せ C</span></div>
    <div><span style="background:#007bbb; padding:10px; color:white">左寄せ C</span></div>
</div>

要素の高さが異なる場合は,css のalign-items を使います.この要素の値により,以下の表のように位置合わせができます.(参照: Flexboxで、要素の上下中央寄せ,金と割りの方法)

align-items の値要素の位置合わせの方法
flex-start要素の上端を一致させる.
flex-end要素の下端を一致させる.
center要素の中心を一致させる (中央寄せ).
stretch均等割り.
baselineベースラインを合わせる.

垂直レイアウト

クラス「flex_align_v」を使うと,オブジェクトを垂直レイアウトできます.さらに,center を加える,すなわち「flex_align_v center」とするとセンタリングされてレイアウトされます.

<div class="flex_align_v center">
    <div>垂直 html</div>
    <div>垂直 html</div>
    <div>垂直 html</div>
    <div>垂直 html</div>
</div>

以下のような垂直方向のレイアウトが可能です.

中央 A
中央 B
中央 C
中央 D

このレイアウトのソースは,以下のとおりです.

垂直方向のレイアウト

<div class="flex_align_v center">
    <div><span style="background:#8b4513; padding:5px; color:white">中央 A</span></div>
    <div><span style="background:#8b4513; padding:5px; color:white">中央 B</span></div>
    <div><span style="background:#8b4513; padding:5px; color:white">中央 C</span></div>
    <div><span style="background:#8b4513; padding:5px; color:white">中央 D</span></div>
</div>

最初だけ左

<ul class="frex_lrrrr">
    <li>左寄せ html</li>
    <li>右寄せ html</li>
    <li>右寄せ html</li>
    <li>右寄せ html</li>
</ul>
  • 左寄せ A
  • 右寄せ A
  • 右寄せ B
  • 右寄せ B

最初のみ左端のレイアウト

<ul class="frex_lrrrr">
    <li><span style="background:#007bbb; padding:10px; color:white">左寄せ A</span></li>
    <li><span style="background:#f8b500; padding:10px; margin-right:20px; color:white">右寄せ A</span></li>
    <li><span style="background:#f8b500; padding:10px; margin-right:20px; color:white">右寄せ B</span></li>
    <li><span style="background:#f8b500; padding:10px; color:white">右寄せ B</span></li>
</ul>

ページ作成情報

参考資料

更新履歴

2020年08月08日 ページを分割し,新規ページに変更.


no counter