DAY38.デザインカンプからコーディング編 テーブルとiframe埋め込み

01.テーブル作成

1.覚えておきたいこと

①table-layout: fixed;
・テーブルに複数の列がある場合は、勝手に幅が調整される
・table-layout: fixed;でテーブルの列を均等にする
・幅（width）を指定しないと機能しない
・幅を指定した列だけにwidthが反映されるが他は均等を保つ性質

②ボーダーを統一
・border-collapse: collapse;という指定をする
　table/th/tdの重なったボーダーを１本としてみなしてるようになる
・罫線のようにテーブルの全てにボーダーを引きたい場合
　table/th/tdにborderのプロパティを指定

③テーブル内の高さの関係
・テーブルのセルの中に配置された要素や文字は、
　vertical-alignの指定に従って配置される

2.テーブルがはみ出る時の条件と解決策

①テーブルに幅が固定値で指定されている場合

②セルに改行禁止処理が入っている場合
・具体的にはthやtdにwhite-space: nowrap;が入っているケース

③テーブルがはみ出る場合の解決策
・overflow-x: auto;として、水平スクロールを許可する
・列を削る
・組み直す

02.iframe埋め込み

1.埋め込みタグの取得

①共有を選択

②「カスタムサイズ」を選択

③幅、高さをデザインカンプの値に合わせて変更

④iframeのHTMLタグをコピーしてHTMLファイルに貼り付け

2.埋め込み要素を縦横比を保ったままレスポンシブ対応

①埋め込み要素を囲う要素を用意

②縦横比を維持したCSS
.iframe-wrap {
　position: relative;
　width: 100%;
　padding-top: 75%;　 /* = height ÷ width × 100 */　高さ ÷ 幅 × 100
}
.iframe-wrap iframe {
　position: absolute;
　top: 0;
　left: 0;
　width: 100%;
　height: 100%;
}