質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

7223閲覧

CSSのfloatとdisplayの違い

gomakichi

総合スコア17

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

1クリップ

投稿2018/02/16 01:46

実現したいこと

CSSで以下の3つの要素を横並びに配置したいと考えています。
要素1: アイコン+1行の文字
要素2: 改行された2行の文字列
要素3: 1行の文字

わからないこと

要素を横並びにするには、floatやdisplay(block、inline、inline-block、table-cell)があるというのはわかりましたが、floatとdisplayどちらを使うべきなのかがわからず困っています。

調べてみたところ、書き方次第でどちらも同じように作れるのはわかるのですが、それぞれどのような場面で使用すべきものなのか、またそれぞれの特徴を教えてもらいたいです。

退会済みユーザー👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

個人的には、横並びにする目的でfloatdisplay:table-cellを使わないほうがいいのではないかと思います。

横並びにするにはdisplay:flexまたはdisplay:gridで対応するのがよいかと。
display:gridの方が分かりやすいと思うのですが、ブラウザ対応にやや難があるかもしれません。



ただ、IE10-のようなレガシーブラウザに対応するには、残念ながらfloatdisplay:table-cellを使わざるを得ないです。

投稿2018/02/16 02:47

Lhankor_Mhy

総合スコア35860

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gomakichi

2018/02/16 02:53

回答ありがとうございます。 floatやtable-cellを使うべきでない具体的な理由はあるのでしょうか? 様々なサイトを見ても使うべき・使うべきではないというどちらの意見も出てきてしまい、悩んでしまっています…。
Lhankor_Mhy

2018/02/16 03:08

「使うべきではない」ではなくて「使わないほうがいい」です。   float は「カラム落ち」に悩まされます。カラムの内部要素がはみ出したりしただけで簡単に全体のレイアウトが崩れることがあります。また、レイアウトの自由度も低いです。いろいろ苦労が多いやり方です。「使うべきではない」に一番近いのがこのやり方だと思っています。   table-cellは細かい仕様が実装依存になっている部分が多く、見るブラウザによって表現が変わることがありえます。レイアウトの自由度はそれなりですが、HTML構造に左右される度合いが高いため、CSSだけの変更でレイアウト変更に対応できないケースがあります。まあ、floatよりは楽なので「使うな」とまでは言わないですが、他によい方法があると思います。
Lhankor_Mhy

2018/02/16 03:16

まあ、でも、table-cellは縦中央ぞろえとかするにはプロパティが直感的でお手軽なんだよなあ......
gomakichi

2018/02/16 03:22

度々回答ありがとうございます。 「使わない方が良い」ですね。大変失礼いたしました。 ご丁寧にありがとうございます。 他の良い方法というものを調べてみたいと思います。
guest

0

じゃあとりあえず、floatflexboxを比較してみましょう。

###float

  • flexがない時代からあって、多くのブラウザでこれを使えば横並びを実現できる。古いブラウザに対応可能
  • 本来は左右どちらかに寄せるためのもの。
  • clear面倒くさい

###flexbox

  • 主要なブラウザはほとんど対応しているものの、古いブラウザでは動かない
  • flexboxはある一方向にエレメントを整列させるためのもの。
  • 簡単、めんどくさくない
  • 加えて、自由度が高い(上下幅の高さ、センタリングなど)

さて、これをみると、floatよりflexboxのほうが要素を並べるという目的のために洗練されてる感じ、しませんか?そうなのです、人類はfloatなどの古い技術を使った横並びによるトラブルに苦しみ、学び、ついにflexboxを獲得したのです!だとすれば、古いブラウザをターゲットにしない限り、flexboxという便利道具を使わないわけにはいきませんよね?

今回の場合、後方互換に配慮しなくていいなら他のどれよりもflexboxを使うべきです。

投稿2018/02/16 03:34

編集2018/02/16 04:12
ViiiiiN

総合スコア36

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ViiiiiN

2018/02/16 03:35

最後の文がいいたかっただけだったりする。
gomakichi

2018/02/16 03:45

回答ありがとうございます。 今までflexboxというものは使用したことがなかったため、新しく何かできたんだなー程度にしか感じていなかったのですが、floatの苦しみからflexboxを作ったのですね・・・。 後方互換に配慮というのがわかっていないのですが、flexboxで進めてみたいと思います。ありがとうございます。
gomakichi

2018/02/16 03:51

解説記事のURLありがとうございます。 ぜひ、参考にさせていただきたいと思います。
guest

0

Lhankor_Mhy さんの書かれている通り、display:flex display:grid でほとんど処理できると思います。

下記のサイトで横並びの方法、実装における注意点についても詳細に紹介されています。

【よこ並びのCSS。】
http://lopan.jp/layout/

【段組みのCSS。】
https://lopan.jp/layout2/

display:flex がお勧めですが、IE11にはバグがあり、アップデートされることも無いのでその対策は必要になります。下記のサイトにいくつか紹介されています。(他のブラウザはアップデートで対応されている可能性があります)

【flexboxのバグに立ち向かう(flexboxバグまとめ) - Qiita】
https://qiita.com/hashrock/items/189db03021b0f565ae27

投稿2018/02/16 03:44

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gomakichi

2018/02/16 03:50

回答ありがとうございます。 対策面までご指摘いただきありがとうございます。こちらのURLを参考に対策も含めて実装したいと思います。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問