DAY38.デザインカンプからコーディング編 テーブルとiframe埋め込み
01.テーブル作成
1.覚えておきたいこと
①table-layout: fixed;
・テーブルに複数の列がある場合は、勝手に幅が調整される
・table-layout: fixed;でテーブルの列を均等にする
・幅(width)を指定しないと機能しない
・幅を指定した列だけにwidthが反映されるが他は均等を保つ性質
②ボーダーを統一
・border-collapse: collapse;という指定をする
table/th/tdの重なったボーダーを1本としてみなしてるようになる
・罫線のようにテーブルの全てにボーダーを引きたい場合
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%;
}
この記事が気に入ったらサポートをしてみませんか?