どうもNaokiです！人はなんで横に揃えたがるんでしょうか？これは cssのデザインでも共通で基本的に縦に並べるか横に並べるかが基本になって来ます！ではどうやって横や縦に並べるかを一緒に学んで行きましょう！

cssデザインの大前提を知る！

cssで位置を指定しなければ全て縦方向にならんで行く！

横並びにするには横並びにしたいものを全て囲う！（超大切です!!!）

フロートを使わない！（代わりにフレックスボックスを使いましょう！）

横並びにするための準備（html）

横並びにする一番のポイントは何と横並びにしたいかを意識しその全てを囲うことから始まります！例えばbox01,とbox02を横並びにしたいとしましょうhtml上でやるべき事はこの２つをdivで囲んでやることなのです！

<div class="box">
    <div class="box01"></div>
    <div class="box02"></div>
  </div>

上の場合は横並びにしたいbox01とbox02をboxで囲んでいるのでhtml上でやるべき事は出来ているということになります！

横並びにする(css)

では実際に横並びにしていきましょう！　css上で注意すべき点はどこにcssをかけるかです! では上のhtmlではどこにかければいいか、それは一番上の.boxです！ここにdisplay: flex;をかけると横並びになります！

.box{
    display: flex;
}
.box01{
    width: 100px;
    height: 100px;
    background-color: red;
}
.box02{
    width: 100px;
    height: 100px;
    background-color: blue;
}

これで横並びになりました！簡単ですね！　使いみちとしては様々な物がありますが何枚かの画像を横に並べて表示させたいときやdivで区切った要素を横並びにしたいときに非常に役に立つと思います！

これは使える豆知識！

display: flex;は非常に優秀で使いやすいですがこれにはさらなる機能があるのです！justify-content:とalign-items:ですこの２つはdisplay: flex;をかけた後に有効で横並びにした後の位置を更に変更することが出来ます！まずは justify-content:（display: flex;で横並びにした物を制御するcss）で横幅を左右均等に離したりすること等ができdisplay: flex;の下に書きます！　　　align-items:（flexboxで横並びにした物の高さを制御する）で横並びにした物の高さがバラバラな時中央で揃えたり出来ます！

まとめ

今日は要素の横並びとその制御についてお話しました！皆さん是非この技を使ってしっかりと揃ったデザインしてみて下さい！今日はここまで！