教科書p138
レスポンシブデザインとは、デバイスの画面サイズに依存しないwebサイトを構築する手法です。言い換えると、デバイスのウィンドウ幅に「responsive(良く反応)」して、見やすい表示に自動で切り替える仕組みを持つデザインのことです。
レスポンシブデザインを採用すると、PC用サイトとモバイル用サイトを別々に作る必要がありません。共通のwebサイトを1つ構築して、URLやHTML(画像やテキストを表示するために必要なコード)も、ページごとに1種類ずつ用意すれば良いのです。このサイト構造のシンプルさがレスポンシブデザインの特徴であり、数々のメリットをもたらす要因となっています。
なぜ、1つのHTMLで、各デバイスに合わせた表示ができるのかというと、表示幅などのデザインはHTMLではなく、CSSというファイルでコントロールするからです。
tableタグ
<tr> 表の中の横一列。<table>内に記述する。
<th> 見出し部分。<tr>内に記述する。
<td> table data 表に入れたい内容。<tr>内に記述する。
<tbody>要素
表の行（横列）をグループ化する要素
<table>タグの子要素
複数使える
逆に子供として<tr>が必須
>表の一連の行 (<tr> 要素) を内包し、
その部分が表 (<table>) の本体部分を構成することを表す
<thead> や <tfoot> と共に有用な意味的情報を提供し、
画面への表示や印刷ばかりでなく、アクセシビリティ目的にも利用できます。
<table> 要素の子要素として <tr> 要素が存在する場合は tbody を配置してはいけません
borderで枠線を付ける
html body内--->
<table id="t1"><!--tableにもidが付けられる-->
<tr><!--1行目-->
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
<tr><!--2行目-->
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
</table>
--->css
table{
border: 1px solid #333;
}
th{
border: 1px solid #F00;/*thに赤くボーダー*/
}
td{
border: 1px solid #00F;/*tdに青くボーダー*/
}
横方向のセルを結合する
<th colspan="3">table2 見出し1</th>
colspan （コルスパン）何個のセルを結合するか
こういう記述もできる（1つと2つの結合）
<th colspan="1">table2 見出し1</th>
<th colspan="2">table2 見出し2</th>
縦方向の結合
rowspan（ロースパン）を使う
<table>
<tr><!--1行目-->
<th rowspan="2">見出しA</th>
<td>内容A</td>
</tr>
<tr><!--2行目-->
<td>内容B</td>
</tr>
</table>
1つの<tr>のなか（横一列）に<th><td>が混在することは可能
ただし<thead>（ｔヘッド）は、
こういう混在するものをマークアップできない
tableの線が二重になっているが、
google検証のelementで確認すると
tableに何かがかかっているのが分かる
"user agent stylesheet"(ユーザー・エージェント・スタイルシート)とは、
「クロームでこういうデフォルトの効果がかかっている」というもの
→
tableに対してコラプスすると消せる
table{
border: 1px solid #333;
margin-bottom: 2rem;/*下側の外側余白*/
border-collapse: collapse;
}
<th>はデフォルトでセルの中心に配置
<td>は左配置になっている
フローコンテンツ
htmlの要素には「どういうコンテンツか」という名前がついているらしい
<td>のなかには大抵のフローコンテンツが使える
使えないのもある。<span>とか
<td>のなかで<h1>とかも使うことが出来る
「このセクションのなかで一番の見出し」という使い方が
html5で使えるようになったため
