htmlcss テーブル(表)エリアを作ろう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

テーブル(表)エリアを作ろう

HTML×CSS|2018年10月16日

2018年10月16日
  • このエントリーをはてなブックマークに追加

データを表示する時に、表を使うケースがあります。

MISSION5を確認してみてください。
例として「ユーザー一覧」のデータ表示などで使っています。

もちろんユーザー一覧だけではなく、様々なデータ表示に使えます。
データを扱う時に、よく使う表現方法です。

今回、表の作り方の1つとして、CSSのtableを使います。
少し面倒ですが、進めていきましょう。

■ MISSION 5 – こちらのサイトを再現してみましょう
https://base91.net/mission/cording/5/index.html

■ 解答ファイルのダウンロード
https://base91.net/mission/cording/5/mission5.zip

※ zipファイルって何? どうやって開くの?
http://base91.net/zip-how-to-open/

もし、どうしても分からなければ、解答ファイルをダウンロードして中身を確認しましょう。
1人で何も見ることなく、MISSION5を再現できたら次に進んでみてください。

今回活用しているHTMLとCSSは下記の通りです。

新出のHTMLタグ

特にありません。mission4以前を参考にしてください。

各タグにおける、より詳しい内容を知りたい場合は、下記のURLを参考にしてみてください。
http://www.htmq.com/html/

新出のCSSプロパティ

基本的に表とは、エクセルのように「セル」の集合体になっています。
縦横に線が無数に引かれ、空欄に数字などを入力しますね。

それを、CSSで再現することができます。
下記のプロパティを参考にしてみてください。

display:table;

tableは、対象の要素が表のエリアであることを示します。
tableを指定するのは、データを囲む「親の要素」です。
子要素に指定しても、表のレイアウトを再現することはできません。

ただ、表を作るにはtableだけでは不十分です。
次のタグを「子要素」に適用することによって、tableは再現されます。

display:table-cell;

tableで囲んだ要素の中で「子要素」にtable-cellを使うと、横並びになります。
横並びになった要素に、それぞれborderを指定して線を引くと、表っぽくなるでしょう。

また、widthやpaddingで幅や隙間を調整することで、表らしく表現できます。
どのように表現しているのかは、デベロッパーツールでMISSIONを観察してみましょう。

vertical-align:middle;

主にテーブルの中で、上下の中央に要素を寄せます。
bottomで下に、topで上にあわせることができます。
テーブル以外では、インライン要素同士の横軸を合わせる時にも使えます。

tableをレイアウトに使っている時代があった

実はtableはcssだけではなく、htmlにもtableというhtmlタグがあります。
今回は使っていませんので、興味がある方は調べてみてください。

このtableタグ、昔の話ですがサイトのレイアウトに使った時期がありました。
表のセルの幅を調整しながら、ウェブサイトをレイアウトするのです。
表ではなく、デザインを再現するために、tableを使ったのです。

しかし、tableは表として使うタグです。
レイアウトのためにあるわけではありません。

当然、Googleの見解もNGですし、SEOとしても最悪の結果をもたらします。
そういうわけで、tableレイアウトのサイトは、もう撲滅されました。
また残っていたら、逆に奇跡です。

では、当時、なぜtableレイアウトが使われたかと言うと、CSSが機能してない時期があったからですね。
ブラウザごとに、まったくCSSの解釈が異なり、ブラウザによる崩れが激しかったのです。
今ではそんなことも無くなりましたので、もう必要ありません。

なので、ふと、tableをレイアウトに使おうか、なんて考えは持たないようにしましょう。
何一つとしてメリットはありません。

各プロパティにおける、より詳しい内容を知りたい場合は、下記のURLを参考にしてみてください。
http://www.htmq.com/style/

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら