ブログに表を埋め込みたいが編集画面に表を追加する機能が無い. ExcelやNumbersで作成した表をコピペすることは出来るが,少々物足りない気持ちになる. といった声にお応えして,今回はHTMLとCSSで表をつくる方法を記録してみる.
今回目指す表はこちら.
| 項目 |
登場人物 |
| マイケル |
トレバー |
フランクリン |
| 出身地 |
North Yankton |
Canada |
South Los Santos |
| 身長[m] |
1.88 |
1.86 |
1.83 |
| 俳優 |
Ned Luke |
Steven Ogg |
Shawn Fonteno |
HTMLの基本
"タグを制する者はHTMLを制す"と言われるほどHTMLの世界でタグは重要だ. じゃあ"タグ"とは何か？
<html>
上の文字列がタグである. 山括弧の間の言葉は"タグの名前"(この場合はhtmlがタグ名). タグの使い方は次の通り.
このようにタグで文章を挟むだけ. 挟まれた文章はタグ名の構造を持つ. この場合"アボカド"という文章は本文(body)だと解釈される. 終わりのタグを見てほしい. 終わりのタグだけ,タグ名の前にスラッシュ"/"が付く. HTMLの基本は"開いたタグは必ず閉じる"と言える. 閉じる時のスラッシュを忘れずに.
と言った直後で申し訳ないが,閉じないタグも実は存在する. 例えば改行(Break line)を表現するタグは閉じようが無いのでそれ単体で使う.
どうしても閉じたくてしょうがないんだ,という方は次のような書き方も出来るが,詳しく言うとこれはXHTML記法に属する.
こんにちは<br />
もういっかい外からこんにちは
もう気づいた方も居るだろうが,HTMLで表を作りたければ"表(table)タグ"でデータを括れば良いのだ.
表をつくる
表の基本を次に記す.
これもHTML的には立派な表だが,これだけでは他の文章と見た目は変わらない. 表が表である所以(ゆえん)は行と列があること. そこで行を表現するタグを次に紹介する.
trはTable Row(表の行)の略だと言われている. そして行の中にはデータの収まったセル(要素)が並ぶ. これがいわゆる列になるわけだ. 列は次のタグで表す.
tdはTable Data(表のデータ)の略だと言われている. 組み合わせて書くとこうなる.
<table>
<tr>
<td>あ</td>
<td>い</td>
<td>う</td>
</tr>
<tr>
<td>わ</td>
<td>を</td>
<td>ん</td>
</tr>
</table>
これで2行3列の表が出来た.
あれ？ 罫線が入っていないぞ. それはCSSにお任せあれ.
スタイルを編集する
CSS(Cascading Style Sheet)はHTMLでつくった文章の見た目に魔法をかける. どんなにキレイにレイアウトされたWebページでもCSSを無効化すると辞書のようなレイアウトしか残らない(これが本来のWebページの姿なのだが). 多くのブラウザにはCSSを無効化するオプションが備わっているので,試しに無効化してみるのも良いかもしれない. フォントや画像の大きさ,ファンシーなアニメーションなども最近ではすべてCSSによって実現されている.
CSSはHTMLのタグに直接書き込むことが出来る.
<div style="color: gray;">
灰色の文字になるよ
</div>
しかし,次のように別の場所にまとめて書くことで編集が楽になる.
<div>
こちらも同じく灰色の文字になるよ
</div>
<style>
div {
color: gray;
}
</style>
styleタグで囲われた部分にCSSを記述できるのだ. わかりやすくするためCSSの部分だけ抜き出して見てみよう.
divタグの文字色をグレーにするよ,という意味だ. divの部分を一般的にセレクタと呼ぶ. セレクタをtableに書き換えれば,全てのtableタグ内にある文字が灰色に変わる. 文字を大きくしたければfont-sizeをlargeに設定すればよい. このように.
div {
color: gray;
font-size: large;
}
colorやfont-sizeのような設定項目(スタイル)は
W3Schoolsのようなサイトにまとめられている(日本語ならば
www.htmlq.comが良いだろう). 一読することをおすすめする.
罫線はボーダー(Border)と呼ばれる枠線で表現できるので,すべてのtdにボーダーを設定すればそれっぽく見えるはずだ.
table td {
border: 1px solid white;
}
今わざと"table td"と書いた. このように書くとtableタグの中にあるtdにだけこのスタイルを適用出来るようになる. tableの外にあるtdには適用されないし,table自体にも適用はされない(かと言ってtableの外にtdを書くことは無いのだが). borderスタイルは線の幅,種類,色を設定できる. 1pxを2pxにすれば倍の太さの線になるし,solidをdashedにすれば破線に変わる.
さっきよりはマシだが,罫線が離れていて気になる. これはtd同士の間にスペースがあるからだ. このスペースはtableタグにborder-collapseスタイルのcollapseを適用することで潰す(Collapse)ことができる.
table {
border-collapse: collapse;
}
table td {
border: 1px solid white;
}
この調子でどんどん目指す表に近づけてゆこう.
table {
border-collapse: collapse;
text-align: center;
background-color: rgba(1, 70, 99, 0.5);
}
table td {
border: 1px solid white;
padding: 5px;
}
text-alignは文字揃えで,centerにすると中央揃えになる. background-colorは背景色を設定する. ここではrgba()という色の表現方法で記述してある.
paddingは文字と罫線の間のスペースを設定している. 文字と罫線の間に上下左右5pxのスペースを空けてね,とお願いしているのだ. 見た目が目標に近付いて来たので,今度は表を広げて,表を完成させよう.
表を完成させる
今の表を広げて行き,目標の表を完成させる.
<table>
<tr>
<td>項目</td>
<td>登場人物</td>
<td>登場人物</td>
<td>登場人物</td>
</tr>
<tr>
<td>項目</td>
<td>マイケル</td>
<td>トレバー</td>
<td>フランクリン</td>
</tr>
<tr>
<td>出身地</td>
<td>North Yankton</td>
<td>Canada</td>
<td>South Los Santos</td>
</tr>
<tr>
<td>身長[m]</td>
<td>1.88</td>
<td>1.86</td>
<td>1.83</td>
</tr>
<tr>
<td>俳優</td>
<td>Ned Luke</td>
<td>Steven Ogg</td>
<td>Shawn Fonteno</td>
</tr>
</table>
| 項目 |
登場人物 |
登場人物 |
登場人物 |
| 項目 |
マイケル |
トレバー |
フランクリン |
| 出身地 |
North Yankton |
Canada |
South Los Santos |
| 身長[m] |
1.88 |
1.86 |
1.83 |
| 俳優 |
Ned Luke |
Steven Ogg |
Shawn Fonteno |
もうほぼ完成だが,あと一歩残っている. "項目"と"登場人物"のセルがひとつにまとまっていない(結合されていない)のだ. セルを結合する方法はcolspanとrowspanを使うこと. colspanは横にセルを結合する時に使い,rowspanはセルを縦に結合したい時に使う. まずは,結合したいセルをひとつに削る. 最初に登場するセルだけを残して重複する残りのセルを消すのだ. HTMLコードをすべて書くのは冗長なので,2行分だけ抜き出して書く.
↓これが今の表(2行分だけを抜粋)↓
<tr>
<td>項目</td>
<td>登場人物</td>
<td>登場人物</td>
<td>登場人物</td>
</tr>
<tr>
<td>項目</td>
<td>マイケル</td>
<td>トレバー</td>
<td>フランクリン</td>
</tr>
↓下のようにセルを削る↓
<tr>
<td>項目</td>
<td>登場人物</td>
</tr>
<tr>
<td>マイケル</td>
<td>トレバー</td>
<td>フランクリン</td>
</tr>
"登場人物"のセル2つと"項目"のセル1つを消した. だいぶスッキリとした所で,colspanとrowspanの出番だ.
<tr>
<td rowspan="2">項目</td>
<td colspan="3">登場人物</td>
</tr>
<tr>
<td>マイケル</td>
<td>トレバー</td>
<td>フランクリン</td>
</tr>
"項目"のセル(tdタグ)にrowspanを使った. 2と書いてあるのはセル2つ分を1つに結合することを意味している. 同様に,colspanの部分には3と書いてあるが,これはセル3つ分を横に結合することを意味する. さて,出来上がったHTMLコードの全貌を見てみよう.
<table>
<tr>
<td rowspan="2">項目</td>
<td colspan="3">登場人物</td>
</tr>
<tr>
<td>マイケル</td>
<td>トレバー</td>
<td>フランクリン</td>
</tr>
<tr>
<td>出身地</td>
<td>North Yankton</td>
<td>Canada</td>
<td>South Los Santos</td>
</tr>
<tr>
<td>身長[m]</td>
<td>1.88</td>
<td>1.86</td>
<td>1.83</td>
</tr>
<tr>
<td>俳優</td>
<td>Ned Luke</td>
<td>Steven Ogg</td>
<td>Shawn Fonteno</td>
</tr>
</table>
<style>
table {
border-collapse: collapse;
text-align: center;
background-color: rgba(1, 70, 99, 0.5);
}
table td {
border: 1px solid white;
padding: 5px;
}
</style>
| 項目 |
登場人物 |
| マイケル |
トレバー |
フランクリン |
| 出身地 |
North Yankton |
Canada |
South Los Santos |
| 身長[m] |
1.88 |
1.86 |
1.83 |
| 俳優 |
Ned Luke |
Steven Ogg |
Shawn Fonteno |
素晴らしい！ 目指していた表が,今まさに完成したのだ！ Yippee！
もうひとつ...
HTMLとCSSで表をつくることが出来た. この項ではいくつか覚えておくと便利なことを紹介する. 今までTableタグにスタイルを適用する例を見てきたのだが,同じHTML(Webページ)中に表がいくつもある場合,すべての表に同じスタイルが適用されてしまうので少々使い勝手が悪い. そこでclassとidという別名を与えることが出来るようになっている. 例えば次のように.
<div class="info">
文章ぶんしょうテキスト
</div>
これで上述のdivタグをinfoクラスにすることが出来た！ のだが...一体これが何の役に立つというのか. それは,CSSと併用した時に威力を発揮する.
これでinfoクラスの文字色を白に出来る. 言い忘れたがクラス名は自分の好きに決められるので,なるべくそれと分かりやすいような名前をつけてみよう. CSSのセレクタ部分ではクラス名の前にドット"."が付いている点に注意. このように,クラスでスタイルを決めておけば,タグが違えど同じクラスのものに同じスタイルを適用出来るわけだ.
<div class="info">文章ぶんしょうテキスト</div>
<p class="info">文章ぶんしょうテキスト</p>
<span class="info date">文章ぶんしょうテキスト</span>
上は全てinfoクラスなので,タグは違えどその中身の文章は全て白い文字になる. よく見ると最後のspanだけクラスが2つ書いてある(infoクラスとdateクラス). 1つのタグでも複数のクラスに属することが出来る好例だ. スペースで分ければ複数のクラスに属することが出来る.
idはclassとほぼ同じ仕組だが,複数のタグに同じidを使えない点のみ異なる. 1つのHTML内に同じidを持つタグを書くことは出来ないのだ(だからID = 身分証と呼ぶ).
<div id="todaysInfo">文章ぶんしょうテキスト</div>
<div id="yesterdaysInfo">文章ぶんしょうテキスト</div>
ある1つのタグだけを指し示したい場合にidは有効だ. CSS内のセレクタ部分ではID名の前にハッシュ"#"を付ける.
#todaysInfo {
color: red;
}
これでtodaysInfoというIDのタグでは文字色が赤になる. 今回のように特注でつくった表ならばidで名前を付けても良いかも知れない.
<table id="characters">
<tr> ...
これでCSSを次のように変更できる.
#characters {
margin: 1em auto;
border-collapse: collapse;
text-align: center;
background-color: rgba(1, 70, 99, 0.5);
}
#characters td {
border: 1px solid white;
padding: 5px;
}
こうすればIDが"characters"の表だけにこのスタイルが適用され,他の表には影響しなくなるため安全だ. おっと,新たなスタイルが1つ加わっているのに気付いただろうか. "margin: 1em auto;"というやつだ. マージン(margin)は枠線より外側のスペースを意味する. この場合上下のマージンは1em(1文字分のスペース),左右のマージンはauto(自動)になっている. こうすることで表自体がページの真中に表示されるようになり,かつ上下に1文字分のスペースが空くので見やすくなる. ちょっとしたトリックなので覚えておこう.
今まで混乱を避けるため紹介せずにいたが,thタグというものも存在する. Table Headerの略だと言われている. 文字通り,表のヘッダーを表現する時に使うタグである. 例えばこんなふうに.
<table>
<tr>
<th rowspan="2">項目</th>
<th colspan="3">登場人物</th>
</tr>
<tr>
<th>マイケル</th>
<th>トレバー</th>
<th>フランクリン</th>
</tr>
<tr>
<th>出身地</th>
<td>North Yankton</td>
<td>Canada</td>
<td>South Los Santos</td>
</tr>
<tr>
<th>身長[m]</th>
<td>1.88</td>
<td>1.86</td>
<td>1.83</td>
</tr>
<tr>
<th>俳優</th>
<td>Ned Luke</td>
<td>Steven Ogg</td>
<td>Shawn Fonteno</td>
</tr>
</table>
ヘッダーのセルだけtdの変わりにthタグを使ってみた. こうすることで,例えば"登場人物"や"出身地","身長[m]"などの項目が表のヘッダーであることを表現できるのだ. ヘッダーの部分を分かりやすくするために背景色を変更したものが次の表になる.
| 項目 |
登場人物 |
| マイケル |
トレバー |
フランクリン |
| 出身地 |
North Yankton |
Canada |
South Los Santos |
| 身長[m] |
1.88 |
1.86 |
1.83 |
| 俳優 |
Ned Luke |
Steven Ogg |
Shawn Fonteno |
ちなみに,一番最初に目標として登場していたあの表は上のHTMLコードで生成されている. これを真の完成というべきか. さて,下が上表のCSSになる.
#characters {
margin: 1em auto;
border-collapse: collapse;
text-align: center;
}
#characters th {
background-color: rgba(1, 99, 95, 0.5); /* 緑色 */
}
#characters td {
background-color: rgba(1, 70, 99, 0.5); /* 青色 */
}
#characters th, #characters td
{
border: 1px solid white;
padding: 5px;
}
最後のスタイルのようにカンマ","区切りで複数のセレクタを書くことも出来る. また /* コメント */ のようにCSS中にコメント文(プログラムが無視をする文)を書くことも出来るので,メモなどを書いておけば見やすさが向上することだろう. あっぱれCSS.
6441619861184196953
https://www.storange.jp/2016/02/htmlcss.html
https://www.storange.jp/2016/02/htmlcss.html
HTMLとCSSで表をつくる
2016-02-04T21:11:00+09:00
https://www.storange.jp/2016/02/htmlcss.html
Hideyuki Tabata
Hideyuki Tabata
200
200
72
72
