<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日

ページを分割し，新規ページに変更．

WEB ページ作成基準レイアウト

目次