TutorialsTypetalk検索...ヌーラボについてヌーラボは最先端のコラボレーションツールを開発する集団です。〜ボックスモデル編〜」が社内外で好評だったこともあり、エンジニアのためのCSS基礎講座シリーズ続編として、「横並び(float)レイアウト編」について解説していきたいとおもいます。横並びのレイアウトを実現する場合にfloatはとても頻繁に使用する手法なのですが、仕組みが少し特徴的なので一見すると小難しいことをしているように思われがちな手法の1つです。失敗しやすいポイントを交えながらfloatの解説を行うので、なんとなく使っていた方はこれを機会にしっかりと理解して、うまく活用していきましょう。他のレイアウト手法や次世代のレイアウト手法floatとは画像と文章が横に並んでいたり、ナビゲーションとコンテンツが左右に並んでいるwebサイトを見たことは無いでしょうか?このレイアウトでよく使用される手法がfloatを使用したやり方です。基本的には指定した要素を右や左に配置する際に使用し、ナビゲーションとコンテンツの配置、2・3カラムのコンテンツ、サムネイル付きの記事表示などで使用することが多いです。今ではfloat以外での横並びのレイアウト手法も確立されていますが、基本的なfloatの仕組みを知ることでCSSの基礎部分への理解を深めていきましょう。今回解説するfloatは以下のような機能をもっています。指定した要素をブロックボックスとして左に配置します。後に続く内容はその右側に回り込みます。指定した要素をブロックボックスとして右に配置します。後に続く内容はその左側に回り込みます。