16【技術】テーブル系のタグ
白猿
「今回はテーブル系のタグを紹介するぜ。こういうものだ」
<table></table> , <caption></caption> , <thead></thead> , <tfoot></tfoot> ,
<tbody></tbody> , <colgroup></colgroup> , <col> , <tr></tr> , <td></td> ,
<th></th>
黒猫
「ふむ。これは表を作るものだったかな」
白猿
「そうそう。基本的な作り方はこうだな」
・゜゜・*:.。..。.:*・゜゜・*:.。
1)表全体を<table></table>で囲む
2)表の中の各行を<tr></tr>で囲む
3)行の中のマス目を<td></td>で囲む。
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「たしか。閉じタグの</tr>と</td>は省略できるんだよね。</table>は必須だね」
白猿
「じゃあ、実際に表を作ってみよう」
・゜゜・*:.。..。.:*・゜゜・*:.。
[記事の入力内容]
<table border="1">
<tr><td>ブタ<td>ブーと鳴く
<tr><td>ネコ<td>ニャーと鳴く
<tr><td>イヌ<td>ワンと鳴く
</table>
・゜゜・*:.。..。.:*・゜゜・*:.。
[記事の表示例]
・゜゜・*:.。..。.:*・゜゜・*:.。
白猿
「ちなみにborder要素は罫線の太さを設定する。1が一番細くて、数字が大きくなると太くなるぜ。borderがないと罫線がでない」
黒猫
「文字の位置をそろえるために、線のない表を使うこともあるかな」
白猿
「tableタグを使わずに空白だけで文字の位置をそろえることもあるけど、見ている人の画面によって文字フォントが変わる。空白だけだズレることもあるだな」
黒猫
「最初の説明で、他にも<caption>とかいろいろタグが紹介されてるけど、どういうものかな？」
白猿
「これらは活動報告ではあまり使わないかもな」
・゜゜・*:.。..。.:*・゜゜・*:.。
<caption>タグ：表のタイトルや注釈などを書く
<thead>タグ：表の前書きのような情報を表す
<tfoot>タグ：表の後書きのような情報を表す
<tbody>タグ：表の本体であることを表す
<colgroup>と<col>タグ：スタイルシートの機能で横幅や背景色などを設定する
<th>タグ：列の項目名を表す
・゜゜・*:.。..。.:*・゜゜・*:.。
白猿
「列の項目に題名を付ける場合は、表の一番上の行で<td>ではなく<th>をつかうこともあるぜ」
・゜゜・*:.。..。.:*・゜゜・*:.。
[記事の入力内容]
<table border="1">
<tr><th>動物<th>鳴き声
<tr><td>ブタ<td>ブー
<tr><td>ネコ<td>ニャー
<tr><td>イヌ<td>ワン
</table>
・゜゜・*:.。..。.:*・゜゜・*:.。
[記事の表示例]
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「<th>にすると項目が太字になるのかな」
白猿
「この例ではそうなっているけど、ブラウザ任せだから太字になるとは限らないようだ」
黒猫
「見る環境によって見え方が違うんだね。さっきの表だと２列しかないけど、表が大きくなると横幅もおおきくなるよね。スマートフォンなどの狭い画面ではどうなるんだろう」
白猿
「項目の中で改行が入るようだ。情報量の多い表だと逆に見づらくなるかもな。活動報告で表を使うときは横に大きくしない方がよさそうだ」
黒猫
「さっきの表は縦横のマス目がそろっているよね。１つの項目で２マス使う場合はどうするのかな」
白猿
「セルの結合とかいうやつだな。縦に結合する場合はrowspan属性、横に結合する場合はcolspan属性を使う」
・゜゜・*:.。..。.:*・゜゜・*:.。
[記事の入力内容]
<table border="1">
<tr><th>動物<th>鳴き声
<tr><td>ブタ<td>ブー
<tr><td>ネコ<td>ニャー
<tr><td rowspan="2">イヌ<td>ワン
<tr><td>キャン
<tr><td colspan="2">２マス使用
</table>
・゜゜・*:.。..。.:*・゜゜・*:.。
[記事の表示例]
・゜゜・*:.。..。.:*・゜゜・*:.。
白猿
「rowspanとcolspanを同時に使って縦横に結合することもできるぜ。それより後の<td>の項目は結合した分だけ省略できる」
黒猫
「<td>の項目を省略し忘れると表がおかしくなりそうだね」
白猿
「tableタグの利用方法は表として使う以外にこ、位置を揃えるために使うこともある。他に１マスだけの表示で囲み文字にすることもできるんだ」
黒猫
「文字を四角の枠で囲むやつだね」
白猿
「ただ、囲み文字は割烹エディターを使った方が便利だな。ここで割烹エディターの囲み文字を紹介しよう」
・゜゜・*:.。..。.:*・゜゜・*:.。
『割烹エディターのURL』
https://k-editor.com/
・゜゜・*:.。..。.:*・゜゜・*:.。
[割烹エディターのサイト：トップ画面]
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「吾輩も開いたよ」
白猿
「黒猫さん。画面の『おしながき』『単品』の下の『Boxデザイン』をクリックしてみよう」
黒猫
「『Boxデザインくん』がでたよ」
・゜゜・*:.。..。.:*・゜゜・*:.。
・゜゜・*:.。..。.:*・゜゜・*:.。
白猿
「これは文字を四角の枠で囲む機能だ。『ここに本文を入力』に文字を入れて、『テンプレ』を選んでみよう」
黒猫
「下の『サンプル』に背景色が変わって表示されるんだね」
白猿
「ある程度いじったら、例によって『押すとなろう用に変換される』のボタンでタグに変換しよう」
・゜゜・*:.。..。.:*・゜゜・*:.。
タグの例
<div style="color:#555555;background-color:#ffffff;font-size:14px;padding:10px;line-height:1.7;text-align:center;border:1.1px dashed #000000;">割烹とは活動報告のことです</div>
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「<div>タグでできているんだね」
白猿
「『Boxデザインくん』ではリンクの機能はないから、小説などへリンクさせたい別の機能になるな」
黒猫
「囲み文字でリンクを設定するときは、割烹エディターの『リンクボタン作成くん』でいいと思うよ」
白猿
「『リンクボタン作成くん』は次回以降で紹介する予定だ。今回で活動報告の『新しく記事を作る』のところに載っているタグは一通り紹介できた。次回からは『割烹エディター』の紹介をしていく予定だ」
