
スキルアップ
2021.03.02
プログラミングに向いている人の特徴5つ!向いていない人の特徴も紹介
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
ITコラム
2017.05.09
displayプロパティでdisplay: tableと指定して、その中の子要素に display: table-cell を指定すると、table要素と同じように表示することができます。
今回は、displayプロパティでdisplay: tableを指定した場合のサンプル表示などを紹介したいと思います。
displayプロパティについては、以下のページもご参照下さい。
CSS【 display 】1 ~ 要素の表示形式を指定するdisplayプロパティ
CSS【 display 】2 ~ list-item
CSS【 display 】3 ~ table(本ページ)
1.displayプロパティの値
2.display:table
3.display:table-cell
4.display:table-row
5.display:inline-table
6.display:table-header-group
テーブル関連のdisplayプロパティの値は、次の通りです。
table 要素はtable要素と同じ性質になる table-cell 要素はテーブルのセルとなり、td要素と同じ性質になる table-row 要素はtr要素と同じ性質になる table-header-group 要素はthead要素と同じ性質になる table-row-group 要素はtbody要素と同じ性質になる table-footer-group 要素はtfoot要素と同じ性質になる table-column-group 要素はcolgroup要素と同じ性質になる table-column 要素はcol要素と同じ性質になる table-caption 要素はcaption要素と同じ性質になる inline-table 要素はtable要素と同じ性質で、インラインの並び方になる
displayプロパティの値は、継承されません。
また、displayプロパティは、全ての要素で使用できます。
displayプロパティを使ってテーブルを表示させたい場合は、まず、親要素に display: table を指定します。
中の子要素をテーブルセルとして指定していくので、先に親要素を指定することは必須です。
そして、親要素に display: table と指定しても、それだけではテーブルを表示することはできません。
子要素に display: table-cell を指定してはじめてテーブルらしい形となります。
親要素に display: table を指定した上で、子要素に display: table-cell を指定すると、テーブルセルとなります。
div要素に display: table を指定し、span要素に display: table-cell を指定すると、次のように表示されます。
ソースは次の通りです。
(CSS) div#sample { margin:1em 0; padding:1em 0; display:table; border-spacing:1em; background:#AAA} div#sample span { display:table-cell; padding:.5em} div#sample span:nth-child(1) {background:blue} div#sample span:nth-child(2) {background:red;vertical-align:middle} div#sample span:nth-child(3) {background:green} (HTML) <div id="sample"> <span>セル1</span> <span>セル2</span> <span>セル3</span> </div>
真ん中のセルはvertical-align:middleを指定しているので、文字が中央揃えになっています。同様に、上揃えと下揃えも指定できます。
border-spacingプロパティは、セルの外枠の間隔を指定するテーブル専用のプロパティです。
テーブルセルは、どんどん横に並びます。
table要素内のtr要素のような働きをさせたい場合には、要素に display: table-row を指定します。
display: table-row を指定した要素でテーブルセルの要素を囲むと、改行することができます。
1行目セル1
1行目セル2
1行目セル3
2行目セル1
2行目セル2
2行目セル3
ソースは次の通りです。
(CSS) div#sample { margin:1em 0; padding:0; display:table; border-spacing:1em; background:#AAA} div#sample p { display:table-row; margin:0; padding:0} div#sample span { display:table-cell; padding:1em; background:#31A9EE} (HTML) <div id="sample"> <p> <span>1行目セル1</span> <span>1行目セル2</span> <span>1行目セル3</span> </p> <p> <span>2行目セル1</span> <span>2行目セル2</span> <span>2行目セル3</span> </p> </div>
table-rowを指定したp要素で、各行のセルを囲んでいます。
親要素に display: inline-table を指定すると、複数のテーブルを横に並べることができます。
ソースは次の通りです。
(CSS) div#sample1, div#sample2 { margin:0; margin-right:0.5em; padding:0; display:inline-table; border-collapse:separate; border-spacing:1em; background:#AAA;} div#sample1 span, div#sample2 span { display:table-cell; padding:1em; background:#31A9EE} div#sample2 span {background:#FF9696} (HTML) <div id="sample1"> <span>1-1</span> <span>1-2</span> </div> <div id="sample2"> <span>2-1</span> <span>2-2</span> </div>
各div要素に、display:inline-tablを指定しています。
このほか、table要素内には、グループ化を行うthead要素、tbody要素、tfoot要素、colgroup要素、col要素がありますが、displayプロパティでも同じような指定をすることができます。
display: table-header-group thead要素と同じ性質 display: table-row-group tbody要素と同じ性質 display: table-footer-group tfoot要素と同じ性質 display: table-column-group colgroup要素と同じ性質 display: table-column col要素と同じ性質
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
卒業生インタビュー
2021.02.17
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社アールピーシー プログラマカレッジ卒業生の岡嶋さんにお話しをお伺いしました! 目次 仕事は楽しかったし、やりがいもあった。そ […]
お知らせ
2021.02.09
※※当イベントは、募集を終了いたしました。沢山のご応募ありがとうございました。 既にお申込みいただいている方には順次メールにて当日のご案内をお送りしております。当日15時までにメールが確認できない場合は、お問い合わせまで […]
INTERNOUS,inc. All rights reserved.