
↑お酒①:div(クラス名t330:330)を設定後、画像(300*200)を挿入。
・(ブラウザー確認で)下段に2㎜の間隔が出る。
クラス名t330のcssで「height:200px ;」設定すれば出なくなる。(divの高さを画像の高さに合わせると出ない)
divの高さを設定するのが常道か。
「height:auto ;」設定では、2㎜の間隔が出る。「height:100% ;」設定でも、2㎜の間隔が出る。

↑お酒②:div(レイアウトコンテナ)を挿入するが、クラス名を設定せず、画像(300*200)を挿入。
・下段に2㎜の間隔が出ない。

↑お酒③:div(レイアウトコンテナ)を挿入せず、画像(300*200)を直接挿入(Pタグとなる)。
・下段に2㎜の間隔が出ない。
↑上高地⑩:div幅(t450:450)、画像幅(450*253)、css(div95%、img98%)
・手順:元コード(<iframe width="1161"***)貼り付け⇒HTMLソースでサイズ変更(1161*653⇒450*253)
・動画はPCとスマホで内容同じだが(大きさは若干PCが大きい)、スマホの静止画で左右の欠落はなく、動画では上下に帯がほぼほぼ出ない。450が一番よさそう。
・divクラス名:t450
width:450px ;
margin: 0 auto ;
background: #e8e8e8 ;
・上高地、草津湯畑、ショート動画で全て、下段に2㎜の間隔が出る。
⇒原因不明だが、背景色を統一したら問題にならないので、当面このままでいく。
↑上高地⑪:div幅(t450pad5px5px:450)、画像幅(450*253)、css(div95%、img98%)
・手順:元コード(<iframe width="1161"***)貼り付け⇒HTMLソースでサイズ変更(1161*653⇒450*253)
・divクラス名t450pad10px30px
width:450px ;
margin: 0 auto ;
background: #e8e8e8 ;
padding: 5px 5px ; ⇒divの上下左右の内側にに5pxの間隔が設定される(文章、画像共)。
PC表示でdivの全体幅は450+5+5となる。
↑上高地①:div幅(test:960)、画像幅(500*281)、css(div95%、img98%)
・手順:元コード(<iframe width="1161"***)貼り付け⇒HTMLソースでサイズ変更(500*281)
・動画はPCとスマホで内容同じだが(大きさは違う)、スマホの静止画で左右の欠落はなく、動画では上下に少し帯が出る。(height: auto ;にしたら、スマホの静止画で上下が大幅に欠落し<全体が横長>、スマホの動画では左右に大きな帯が出る)
↑上高地②:div幅(test:960)、画像幅(960*540)、css(div95%、img98%)
・手順:元コード(<iframe width="1161"***)貼り付け⇒HTMLソースでサイズ変更(960*540)
・動画はPCとスマホで内容同じだが(大きさは違う)、スマホの静止画で左右が大幅に欠落し<少し縦長の長方形>、動画では上下に大きな帯が出る。(height: auto ;にしたら、スマホの静止画で上下が大幅に欠落し<全体が横長>、スマホの動画では左右に大きな帯が出る)
↑草津湯畑⑩:div350、画像350*197
・手順:元コード(<iframe width="1161"***)貼り付け⇒HTMLソースでサイズ変更(350*197)
・css(div95%、img98%)だが、画像がスマホ幅より小さいので、スマホ表示でスマホ幅近くに広がらない。
↑草津湯畑①:div400、画像400*225
・手順:元コード(<iframe width="1161"***)貼り付け⇒HTMLソースでサイズ変更(400*225)
・PC表示:400,450,480,500,550,660,960で、サイズは違うが、最初の静止画像、動画とも内容同じ(欠落なし)
・スマホ表示(最初の静止画):
映像左右:660から欠落始まる。990で欠落幅かなり広くなる。
映像上下:7件とも欠落なし。
帯左右:7件とも帯なし。
帯上下:400、450ほとんどなし(下にほんの僅か)。480から目立ち始めだんだん幅が広くなる(660迄)。
何故か、960で帯がなくなる。
・スマホ表示(動画):400~960で、内容同じ(欠落なし)
映像(動画):7件ともサイズ、内容とも同じ。
帯左右:7件とも帯なし。
帯上下:400、450ほとんどなし(下にほんの僅か)。480から目立ち始めだんだん幅が広くなる。
960が帯の幅最大。
⇒PC表示で動画サイズはそこそこ大きくしたいが、大きすぎるとスマホで帯が出る。
その兼ね合いがポイントか。
⇒PC表示の画面サイズは概要がわかれば、大きくなくていい。じっくり観たい人は最大化すればいい。 1画面で複数動画を見せれる程度の大きさの方がいいかも。
↑草津湯畑②:div450、画像450*253
↑草津湯畑③:div480、画像480*270
↑草津湯畑④:div500、画像500*281
↑草津湯畑⑤:div550、画像550*309
↑草津湯畑⑥:div660、画像660*371
↑草津湯畑⑦:div960、画像960*540
↑ショート①div400、画像435*773→400*711