Create2016.09.23こんにちわこんばんはちばです。日々のコーディングの際に横並びをよく使うと思います。そんな横並びの方法を紹介したいと思います。̇)วfloatおなじみのfloatです。特長としては左または右寄せにでき、テキストやボックスの回り込みがされます。floatしている要素の親の要素の高さがなくなります。clearfixというcssのテクニックを仕様する方法があります。clearfixは下記のようなコードで出来ています。both;}clearfix書き方や仕組みについては調べていただくと詳しい説明されてる資料が見つかると思うので気になる方は調べてみてください。inline;インライン要素にするアレです。タグのように横並びになります。注意する点としては要素の間に隙間が出来てしまう、マージンが使えない、上下のパディングが効かない。隙間についての解決方法としては下記になります。<li>lorem...</li><li>lorem...</li></ul>タグの間をコメントアウトする方法と、タグの間の改行をなくす方法です。指定も忘れずにしましょう。inline-block;便利なアレです。同じなのですが違いとしては、マージンが使える、上下のパディングが効く、というところです。IE7を対象に入れない昨今では使いやすい良いやつですね。table-cell;内包している要素をテーブルセルにしてくれます。特長として、マージンが使えない、高さが揃う、天地中央揃えなどが出来る。癖があるプロパティですが、IE8から対応しており高さに関係なく天地中央揃えが可能だったり高さが揃ったりと使い所によっては便利なので覚えておくと良いと思います。flex;主要モダンブラウザでサポートしており、最近ちらほら使う機会ありそうかなっていうアレです。こちらも内包している要素を横並びにします。横並びにするだけでなく、高さを揃える、天地中央揃えはもちろんのこと、要素の並び順を変えたり、要素との間隔を均一にしたりと様々なオプションを使用することが出来ます。すべて紹介するとすごい量になってしまうので、気になる方は調べてみてください。まとめ5つの方法を紹介しましたが如何だったでしょうか?最近では古いブラウザをサポート対象外にすることも多いと思うので状況に応じて使い分けることが出来ると思います。それぞれに注意する点もありますので、勉強しておくといざという時に時間を取られずに済むと思います。∩ˇωˇ∩)シェアツイートブックマークWriterちば北海道から上京してきました。コーダー歴二年目入りましたヽ(゚∀。CreateCSSでの横並びの方法Contactご提案依頼、ご相談、お見積もりなどお気軽にお問合わせください。10:00~19:00「Web制作について」とお伝え頂ければ担当者に取次させていただきます。Mailformcontact@trym.jpでも受け付けております。