MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
【CSS】CSSレイアウト組まとめ(前編)

【CSS】CSSレイアウト組まとめ(前編)

公開日:2018年09月08日
最終更新日:2019年05月28日
オンスタ運営
マークアップ
ホーム > 全記事一覧 > 制作 > エンジニア > マークアップ > 【CSS】CSSレイアウト組まとめ(前編)
このエントリーをはてなブックマークに追加
【CSS】CSSレイアウト組まとめ(前編)

こんにちは!前回ゴリラから人間に転生した
ゴリラ出身のフロンドエンドエンジニア、ケイジャニストやまだです!
さて今回のネタは表題の通り、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について掘り下げてみましょう!
最もよく使われる指定なのでしっかり押さえてコーディングに臨みたいですね!
以上ケイジャニストでした〜

 

 

関連コンテンツ

JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
プログラミング
マークアップ
公開日: 2018年12月28日
最終更新日: 2019年05月28日
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
オンスタ運営
コーダーはCSS設計に夢を見る
エンジニア
マークアップ
公開日: 2017年02月10日
最終更新日: 2019年05月28日
コーダーはCSS設計に夢を見る
オンスタ運営
もう一度考えてみる、HTMLのマークアップとSEO対策についての考察
マークアップ
公開日: 2016年12月15日
最終更新日: 2019年05月28日
もう一度考えてみる、HTMLのマークアップとSEO対策についての考察
オンスタ運営
HTMLって何?Web初心者でも理解できるように簡単に解説!
エンジニア
マークアップ
公開日: 2019年06月13日
最終更新日: 2019年06月19日
HTMLって何?Web初心者でも理解できるように簡単に解説!
  • # HTML
  • # pickup
  • # 初心者
オンスタ運営
WEB用に使われる画像形式の基礎と特徴
Webデザイン
マークアップ
公開日: 2019年04月19日
最終更新日: 2019年06月15日
WEB用に使われる画像形式の基礎と特徴
オンスタ運営
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
エンジニア
マークアップ
公開日: 2017年01月10日
最終更新日: 2019年06月26日
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
オンスタ運営
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
デザイン
マークアップ
公開日: 2019年03月30日
最終更新日: 2019年09月02日
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
オンスタ運営
一歩踏み込んだマークダウン(Markdown)の紹介とマークダウン記法を学ぶ
マークアップ
公開日: 2019年10月08日
最終更新日: 2019年10月08日
一歩踏み込んだマークダウン(Markdown)の紹介とマークダウン記法を学ぶ
  • # markdown
  • # マークダウン
  • # 効率化
オンスタ運営
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
Webデザイン
オンライン学習
プログラミング
マークアップ
公開日: 2019年06月20日
最終更新日: 2019年09月05日
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
  • # cocoda!
  • # pickup
  • # Schoo
  • # TECHACADEMY
  • # Udemy
  • # オンライン学習
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。