HTML・CSSCSSで横並びを実現する方法はいくつもありますが、ちょっとした挙動の違いや注意点も含めて見ていきます。利用箇所に合わせて適切なCSSを選択できるように、定番CSSからおにゅーなCSSまで実際に目で見て比較していきましょう。まとめ基本のHTML・CSSベースとなるHTMLとCSSです。ボックス3つとその親DIVで構成しています。ピンクのボックスをCSSで横並びを目指します。#fe9cab;}そのまま表示BoxABoxBBoxCはい。そのまま表示しただけではDIVのブロック要素で縦に並びますね。これをCSSで効率的に横並びのグリッドデザインにしていきましょう。各CSSで得意な場面と不得手な場面がありますので、レイアウト設計でうまく利用したいですね。display:flex」と移り変わりの激しいCSS3のフレキシブルボックスレイアウトです。その分、本気で確立した仕様に仕上げようとしているのが伺えます。たしかにめちゃくちゃ簡単ですからね。row;}BoxABoxBBoxC横並びにする為に各要素に指定するのではなく、親要素に指定するだけで実現できます。row;はデフォルト値ですので省略できますが別の指定と分別しやすいように記述しています。row-reverse;}BoxABoxBBoxC横並びが逆順で始まっていると思います。row-reverseを指定するだけなので、複雑なプログラムも必要ありませんので便利ですね。新しい順と古い順の切り替えがCSSだけで実現できそうな予感も心躍ります。display:table-cell;要素をテーブルのセルのように扱えて、リキッドレイアウトにも万能なtable-cellで横並びを行います。セル扱いなのでtable-layout:fixedの指定で横幅を自動で均等化配置もできるので、場面によってはとっても使えそうです。display:table-cell;}BoxABoxBBoxC見事な横並びですがmarginの効果がなくなっています。テーブル扱いなのでmarginという概念がなくなるわけですね。paddingは生きています。この文章もmarginが消えたおかげでボックスの下にくっつきそうになっているのがおわかり頂けると思います。手軽にグリッドデザインというよりはレイアウトやナビゲーションバーなどにかなり役立ちそうですね。display:inline-block;ブロック要素をインライン化して横に並べるCSSですね。基盤となる大きなデザインには向かないかもしれませんが、細かい部分で多用できそうな手軽さと直感的に利用できるので重宝しそうです。inline-block;}BoxABoxBBoxC素敵なグリッドでボックスが横並びになっていますね。inline-blockには存在します。margin:0;}BoxABoxBBoxCmargin:0;にも関わらず隙間が生まれてしまうんです。これはHTML側の改行を埋めるか、コメントアウトで埋めることで対処は可能ですが、コーディングしていく上で手間が増えることは否めませんね。float:left;皆さんご存知のfloatです。指定すると親DIVの高さが消えたりと力技感がぷんぷんしますが、レイアウトでfloatの存在は大きな武器になっているサイトも多いですよね。hidden;を指定してあげると表示されますね。left;}BoxABoxBBoxCどうでしょう。使える場面は多いのですが、IEのバグの話や挙動の話をしていくとfloatを使わずに横並びにする方法の方がいいのかもしれません。floatも大きな基本構造で利用するよりは、各所での細かい配置を指定するほうが理にかなっているかもしれませんね。2012-10-12Amazon楽天市場Yahooショッピングまとめもうこれからの時代は横並びでレイアウトを組んでいく時代と言っても過言じゃないほど重要な要素になってきています。レスポンシブやリキッドで利用頻度が高まってきているので、縦長のサイト構成よりも横を上手く利用するサイトの方が見やすいですよね。多様化するデバイスサイズにも臨機応変に対応できますので。デザインを見直したり新規設計するなら将来性のあるデザインの選択が望ましいですよね!紹介したflexが完全に定着すればものすごく便利ですよね!今日も知識欲は止まらない。LINKrockets関連記事レスポンシブのブレイクポイントを設定する前に知っておくべきことGoogleも推奨するレスポンシブウェブデザインですが、最初の設計がしっかりしていれば将来性も上がってメンテナンスにも有利なサイト運営が...CSSの枠線は薄っすらシャドウで影を付けるボーダーデザインが素敵CSSだけで再現できる影付きボーダーはフラットデザインでは中々表現しにくい高級感を出したり、フラットを勘違いした古臭さを除去できると...CSSのfont-familyで流行で主流の設定はコレだ!現時点のベストfont-familyだとを色々なサイトを参考に考察してみます。そんなに急激に変わるものではないですが、常に最新のfo...仮バナー・模擬バナー・ダミー画像・ダミーバナーを作らないで設置できる!サイトデザインで、この部分にこのサイズの画像を置いたらどういう配置なるかな?という場面で好きな画像サイズを即配置できる便利サイトです。Android2.X系のバグとか色々あってとっても面倒です。最近はAn...リキッドレイアウト作成方法と簡易テンプレート可変カラムに対応したリキッドレイアウトの作り方と超簡易テンプレートです。LINKAbout何これ?どっちがいいの?という知識欲が止まらない性分の「ロケッツ」です。ウェブ業界に住み着いて長いです。靴に例えると78足ほど履き潰したぐらいです。