【CSS】CSSレイアウト組まとめ（前編）

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

---

こんにちは！前回ゴリラから人間に転生した
ゴリラ出身のフロンドエンドエンジニア、ケイジャニストやまだです！
さて今回のネタは表題の通り、CSSのレイアウト組についてまとめてみました！

コーダーさんなら誰しも一度はくぐるクロスブラウザ問題、
IEシリーズが顕著ですが、みなさん頭を抱えてしまった経験がお有りなはず。
ご多分に漏れず、私もそうであります。

特に「ふざけんな」と言いたくなってしまうほど直結する問題が「レイアウト崩れ」。
今回はそんな崩れに負けないよう、CSSでレイアウトを実現する際の基本指定と新しく登場した指定方法、そしてその注意点を、複数回に分けておさらい＆ご紹介します(オレ流)。
「なんで崩れちゃうの？」って困ってしまった時などにお役立てください！
今回は横並びについてまとめました！

横並びのレイアウトを実現するcssの指定

まずcssを使ったレイアウトの基本ですが、
最初に覚えねばならないのは「横並び(並列)」させる時のcss指定ですよね。
この横並びを実現させる時によく使うcss指定が以下三つかと思います。

1. floatを使った横並び
2. display:inline-blockを使った横並び
3. display:tableを使った横並び

それぞれの特徴と注意点をご紹介します！

float指定

むかーしから、もっともよく使われる指定ですがレスポンシブデザイン最盛期の現在でも、それは変わりません。bootstrapなどのフレームワークで採用されているグリッドレイアウトなどは、この指定で実現されています。

「スマホは2列でタブレットは3列、PCは4列でコンテンツを並べたい」なんて時は
基本floatを使います。

ってわけで、まずはfloatの基本について掘り下げてみましょう。
floatの指定はあたえた要素に対して後に続く要素が回り込もうとしますので、
それで横並びが実現できます。

なお、このまま長文のテキストをつらつらと並べていくとニュースサイトでよく見かけるレイアウトになります。

上記が実現したいレイアウトであれば、このままで大丈夫ですが、
後に続くレイアウトに影響があるケースがあります。

影響を与えてしまう原因としては「回り込みの解除指定忘れ」です。
回り込みしっ放しでそのままずれていくんですね。

なのでfloatを使った際は、後に続く要素に対して必ずclear :bothなどの解除指定、もしくは
親ボックスに対するclearfixを使った擬似要素解除を使いましょう。

テキストを回り込ませず、完全に横並びにしたい場合

先ほどのレイアウトであれば、解除指定を忘れない限り、
特に困ることはないのですが、文字を回り込ませないように指定するケースなど 完全に独立させて左右に分けたい場合によく崩れが発生するかと思います。

このパターンですね。これで複雑なデザインを作成した時に崩れてしまう時があります。 そんなときは以下を見直してみましょう！

1. floatさせる要素の幅を指定していない。
2. floatさせる要素の高さがあわない。
3. inline要素にfloatをかけてしまっている。
4. display:inline-blockを指定してしまって想定外の挙動になっている
5. 単純にmargin/padding/width/の計算が合わない。
6. 先の要素でfloatをかけており、回り込みを解除し忘れてる

floatでの横並びの場合、高さが合わないと崩れますので
コンテンツの内容が変動する（テキストが増減する可能性がある）ケースでは
高さを可変にする対応が必要です。

また、複雑なデザインを実現する際は、必ずfloat指定をした要素に幅を指定し、コントロールするようしておくことを心がけておくと良いと思います！
上記を見直してみて、どうしても崩れてしまって「原因がわかんないよー」なんて場合は、
特定のブラウザで計算方法が違って崩れるようなケースの可能性があります。
一度「幅周りの指定」をすべて切ってしまってから順番に指定してあげることで解決していくようにすると良いと思います！

display:inline-block指定

次にdisplay:inline-block指定をすることで実現する横並びをご紹介します。
inline要素とblock要素の特徴を併せ持つこの指定ですが、ちょっと癖もあったりします。
floatとの違いは以下のようなものです。

1. floatと違って高さが合わなくても横並びが実現できる
2. vertical-alignが使える

上記のような特徴があることから、こちらの指定もよく使われますが、
この手法を使って横並びさせた場合、「謎の隙間」ができます。

で、これを解除するためにはこうしましょう。

display:inline-blockで「なぜなんだ。。。」と思ってしまうような崩れに遭遇してしまった時は以下を見直してみましょう！

見直しポイント

1. 親ボックスに対してfont-size: 0;を指定し、子要素でfont-sizeを元に戻す
2. letter-spacingで-1emをかけ、子要素でletter-spacingを元に戻す。
3. htmlソースの改行をやめる

また、改行を半角として認識される場合があるのでcssで崩れを解決できない時はhtmlソースの改行をやめることで解決できることがあります。

以上、いかがでしたか？
display:tableもよく横並びで使うのですが、次回はpositionについて掘り下げてみましょう！
最もよく使われる指定なのでしっかり押さえてコーディングに臨みたいですね！
以上ケイジャニストでした〜

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

• 【体験談】主婦が「自宅で働きたい」を叶えるために、広告バナー制作を学んでみた
• 【体験談】全くの初心者がUdemyでモーショングラフィックスを学んでみた
• 【体験談】Udemy「みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習」を実際にやってみた感想
• 【体験談】無料！？Udemyで学ぶはじめてのAI（ディープラーニング、機械学習）
• 【体験談】UdemyでWeb開発を学びました【コスパ最強】