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

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

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

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

Q&A

2回答

6090閲覧

display: table;で、ツーカラムで二列という形で、画像を表記したいと思っています。

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

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

0グッド

0クリップ

投稿2015/12/12 16:08

編集2022/01/12 10:55

display: table;で、ツーカラムで二列という形で、4つの画像を表記したいと思っています。

画像が四つ同じ親要素の中に並んでいる場合は、二つずつdivを使って別の親要素を作ってそのdivに、
display: table;を適応されるのが正しいのでしょうか?

できれば無駄なdivは作りたくないのですが、致し方ないでしょうか?

また画像と同じ親要素の中にh、pタグなどもある場合は、その親にdisplay: table;をつけると、こちらまでテーブルの一部になってしまわないでしょうか?
その場合の対処法があれば教えてください。

・ソース

<section class="main__about-me"> <h2 class="content-wrap-widthmax__heading main__common-heading">GALLARY</h2> <h3>題名</h3> <p>和風の高級感を表現するをコンセプトに作ったサンプルサイトです。</p> <figure class="portfolio-images-common"> <img class="aa-pcimage" src="img/index/aa-pcimage.jpg" alt="PCサイズの画像"> <figcaption>PCサイズ</figcaption> </figure> <figure class="portfolio-images-common"> <img class="aa-tabletimage" src="img/index/aa-tabletimage.png" alt="タブレットサイズサイズのファーストビューの画像"> <figcaption>タブレットサイズ</figcaption> </figure> <figure class="portfolio-images-common"> <img class="aa-sptimage" src="img/index/aa-tabletimage.png" alt="SPサイズサイズのファーストビューの画像"> <figcaption>SPサイズ</figcaption> </figure> <figure class="portfolio-images-common"> <img class="aa-sptimage" src="img/index/aa-tabletimage.png" alt="SPサイズサイズのファーストビューの画像"> <figcaption>SPサイズ</figcaption> </figure> </section><!-- /#about -->

もしかすると下記のように、マルチカラムにしたい画像を同じfigureタグの中に入れて、別カラムにしたい、画像は別のfigureタグに入れて、、それぞれのfugureタグにdisplay: table-cell;を入れるのが、実務でも正しいやり方なのでしょうか?

・ソース

<section class="main__about-me"> <h2 class="content-wrap-widthmax__heading main__common-heading">GALLARY</h2> <h3>題名</h3> <p>和風の高級感を表現するをコンセプトに作ったサンプルサイトです。</p> <figure class="portfolio-images-common"> <img class="aa-pcimage" src="img/index/aa-pcimage.jpg" alt="PCサイズの画像"> <figcaption>PCサイズ</figcaption> <img class="aa-tabletimage" src="img/index/aa-tabletimage.png" alt="タブレットサイズサイズのファーストビューの画像"> <figcaption>タブレットサイズ</figcaption> </figure> <figure class="portfolio-images-common"> <img class="aa-sptimage" src="img/index/aa-tabletimage.png" alt="SPサイズサイズのファーストビューの画像"> <figcaption>SPサイズ</figcaption> <img class="aa-sptimage" src="img/index/aa-tabletimage.png" alt="SPサイズサイズのファーストビューの画像"> <figcaption>SPサイズ</figcaption> </figure> </section><!-- /#about -->

イメージ説明

上記のようにしたいのですが、プロのコーダーは、この場合フロートを使うのでしょうか?
マルチカラムはIE8以上なら、すべてdisplay:table;が良いのかと思っていましたが、
そうではないのですかね?

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

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

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

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

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

guest

回答2

0

display: table;で、ツーカラムで二列という形で、4つの画像を表記したいと思っています。
画像が四つ同じ親要素の中に並んでいる場合は、二つずつdivを使って別の親要素を作ってそのdivに、 display: table;を適応されるのが正しいのでしょうか?

1行4列という形式ではなく、どうしても1行2列(各列に2つの画像)という風にしたいのなら、
親要素の中にdivを2つ入れ、divの中にfigureを2つ、という形にするしかないかと思います。

また画像と同じ親要素の中にh、pタグなどもある場合は、その親にdisplay: table;をつけると、こちらまでテーブルの一部になってしまわないでしょうか? その場合の対処法があれば教えてください。

親要素にdiplay:table;をつけただけで子要素が勝手にtable-cell化するわけではありません。
display:flex;の仕組みと混同していませんか?

もしかすると下記のように、マルチカラムにしたい画像を同じfigureタグの中に入れて、別カラムにしたい、画像は別のfigureタグに入れて、、それぞれのfugureタグにdisplay: table-cell;を入れるのが、実務でも正しいやり方なのでしょうか?

figcaptionはfigureの中で1箇所しか指定できませんので、
その構造は文法違反となりますね。

投稿2015/12/14 12:58

aKusano

総合スコア3763

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

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

退会済みユーザー

退会済みユーザー

2015/12/14 16:11

ありがとうございます。 figcaptionはfigureの中で1箇所しか使えないのですね。 つまり二つの画像を一つのfugureで囲んで二つともキャプションをつける事はできないのですね。勉強になりました。
退会済みユーザー

退会済みユーザー

2015/12/16 11:11

上記画像のようにしたいのですが、プロのコーダーは、この場合フロートを使うのでしょうか? マルチカラムはIE8以上なら、すべてdisplay:table;が良いのかと思っていましたが、 そうではないのですかね?
aKusano

2015/12/16 16:10

図のように複数行にわたって連続してボックスが格子状に配置されるレイアウトであれば、 1.後方互換に配慮するならフロート 2.最新ブラウザ環境のみならflex で作りますね。 複数行になる場合には通常table-cellは選択肢から外れます。 理由は、テーブル要素の仕組み上、複数行になる場合には必ず一行ずつdiv要素などで囲む必要があり、ボックスの増減や並べ替え等の際に支障が出るからです。 table-cellが選択肢の筆頭に入るのは、 ・1行の中で折り返されずに横並びにする ・ボックス内で上下中央揃えにする ・横並びのボックスの高さを揃える といった条件のレイアウトである場合です。 この場合も、後方互換性に配慮するならtable-cell;(※IE8以上のみ)、最新ブラウザのみならflexでしょう。 結論:flexは万能。ただし使える環境が限られるので実戦投入できるかどうかはケースバイケース。flexが無理なら条件に合わせてfloatもしくはtable-cellを適宜選択。
退会済みユーザー

退会済みユーザー

2015/12/17 15:40

ありがとうございます。 tableタグは、クローラーが内容を適切に把握できないので、SEO良くなく、 順番どおり読むのが難しいので、アクセシビリティ上もあまりよくないかもしれないと聞いていましたが、 CSSのディスプレイテーブルもtableタグと同じ扱いということでよろしいでしょうか? 下記にfloatの代わりになる http://allabout.co.jp/gm/gc/448525/ また、ディスプレイテーブルで、マルチカラムを複数行にする場合は、無駄なdivをどうしても増やさないといけないので、 プロのお仕事として良くない選択肢なのですね。 ただフロートも上下左右中央にするのが難しいようなので、上記の画像の周りに背景をつけて背景の中央に画像が来ているようにしたい場合は、 フロートでは難しいので、邪道ですがディスプレイテーブルを使うしかないのですね。 おそらくそのようなデザインをするべきではないのでしょうね。 IE10以上ならflexで統一されるのですね。 ただIE8はもう対応しなくて良いと思いますが、IE9はまだ数年は無視できないですよね。
guest

0

lang

1.portfolio-images-common { 2 float: left; 3 width: 50%; 4} 5.portfolio-images-common:nth-child(2n+1) { 6 clear: left; 7}

でどうでしょうか?

投稿2015/12/14 09:38

hello-world

総合スコア1342

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

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

退会済みユーザー

退会済みユーザー

2015/12/14 10:29

フローとでももちろん可能ですが、今回初めて、display:table;でツーカラム二列にチャレンジしてみたいので、こちらでお願いします。
退会済みユーザー

退会済みユーザー

2015/12/16 11:11

上記画像のようにしたいのですが、プロのコーダーは、この場合フロートを使うのでしょうか? マルチカラムはIE8以上なら、すべてdisplay:table;が良いのかと思っていましたが、 そうではないのですかね?
hello-world

2015/12/16 11:38

このような状況では、 float を使うことが多いです。 一般的にテーブルレイアウトは良くないと言われており、その理由は 1. HTMLのセマンティクスを破壊するため 2. 表示速度が遅いため であり、 display: table では 2 に対処できません。つまり遅いです また、CSSでテーブルレイアウトするには tableとtable-rowとtable-cellを用意する必要があり、divの階層が深くなってしまいます。 table-cellだけを使ったりもできるのですが、フルセットで使わないとよくわからない現象が起こるので、私は避けています。 有名なCSSフレームワーク bootstrapでも、カラムには float が使われています。 http://getbootstrap.com/css/#grid
退会済みユーザー

退会済みユーザー

2015/12/17 15:40

ありがとうございます。 tableタグは、クローラーが内容を適切に把握できないので、SEO良くなく、 順番どおり読むのが難しいので、アクセシビリティ上もあまりよくないかもしれないと聞いていましたが、 CSSのディスプレイテーブルもtableタグと同じ扱いということでよろしいでしょうか? 下記にfloatの代わりになる http://allabout.co.jp/gm/gc/448525/ また、ディスプレイテーブルで、マルチカラムを複数行にする場合は、無駄なdivをどうしても増やさないといけないので、 プロのお仕事として良くない選択肢なのですね。 ただフロートも上下左右中央にするのが難しいようなので、上記の画像の周りに背景をつけて背景の中央に画像が来ているようにしたい場合は、 フロートでは難しいので、邪道ですがディスプレイテーブルを使うしかないのですね。 おそらくそのようなデザインをするべきではないのでしょうね。 IE10以上ならflexで統一されるのですね。 ただIE8はもう対応しなくて良いと思いますが、IE9はまだ数年は無視できないですよね。
hello-world

2015/12/17 23:07

> tableタグは、クローラーが内容を適切に把握できないので、SEO良くなく、 > 順番どおり読むのが難しいので、アクセシビリティ上もあまりよくないかもしれないと聞いていましたが、 > CSSのディスプレイテーブルもtableタグと同じ扱いということでよろしいでしょうか? それに関してはCSSで指定した display: table と tableタグとは異なります。 それをセマンティクスという語で表現したつもりでした。すいません。 実際のところ、HTML5の仕様に従えば、<table border="0">のように記述すれば、tableをレイアウトに用いても構いません。 「border=0」がレイアウト用のテーブルである印になります。
退会済みユーザー

退会済みユーザー

2015/12/20 07:34

display: tableとCSSで指定しても、クローラーはテーブルとして認識するわけではないので、SEO上不利になることはないのですね。 クローラーはあくまでHTMLしか見ないわけですから。 >>> 実際のところ、HTML5の仕様に従えば、<table border="0">のように記述すれば、tableをレイアウトに用いても構いません。 「border=0」がレイアウト用のテーブルである印になります。 そんな仕様があったのですね。 ただtebleタグはどちらにしろレイアウトでは使わないほうが良い方が変わりないので、 いずれにしろ使わないほうがよいですよね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問