↑お酒①：div幅（test：960)、画像（800*532)、css（div95%、img98%)
　・手順：300jpg画像を挿入/HTMLソースの値を(300⇒800)変更　
　・HTMLソースの値を直接変更。画像枠でサイズは変更していない。　画像枠でサイズを変更したら、スマホで縦横比変わる。
　・コード：<IMG src="aお酒300×200.jpg" width="800" height="532" border="2"></DIV>

昨今、メディアで目にしない日はないと言っても過言ではないほど注目を集めているチャットGPT。多くの専門家がこの革新的な技術を賞賛し、それはまさにインターネット以上のものとも言われています。日本のAI業界の第一人者である東京大学の松尾豊教授も、日経新聞のインタビューで「これは歴史的な転換期だ」と答えています。

↑お酒②：div幅(test：960)、画像幅(800*532)、css(div95%、img98%)
・手順：お酒画像①の画像より綺麗。800の元のjpg画像をそのままを使用。
・divクラス名「ｔｅｓｔ」
border-bottom: 3px solid #888 ;
padding: 10px 30px ;　⇒ｄｉｖの上下内側に10pxの間隔が空く（文章、画像共）。
文章の場合左右内側に30pxの間隔が空く。
margin-bottom: 15px ;
・画像枠表示：画像右クリック/属性の変更/枠表示・2px

↑お酒③：div幅(test：960)、画像幅(960*637←800*532)、css(div95%、img98%)
・手順：div幅と画像幅は同じ(960)
・画像幅が大きいし、「img{max-width: 98% ;」設定しているが、
　スマホ表示で両端4～5㎜程度空くのは仕方ないのか。width: auto ;にしたらどうなるか？

↑お酒④：div幅(test：1200)、画像幅HTMLソースで変更(1200*799←1280*852)、css(div95%、img98%)
・div幅と画像幅は同じ(1200)
・画像幅が大きいし、「img{max-width: 98% ;」設定しているが、
　スマホ表示で両端4～5㎜程度空くのは仕方ないのか。

↑お酒⑤：div幅(test1：330)、画像幅(300*199)、css(div95%、img98%)
・手順：divタグを挿入し、そのdivタグの中に画像(300)を挿入。
・「img{max-width: 98% ;」設定しているが、画像幅がスマホ幅より小さいので、
スマホ表示でスマホ幅の98%にならない。

↑お酒⑥：divなし、画像幅(300*199)、css(div95%、img98%)
・手順：divタグを挿入せず、直接画像(300)を挿入（pタグとなる）。
・表示内容は、divタグとpタグで同じ（PC表示、スマホ表示とも）。　

↑ストリートビュー(アソシエ）①：div幅(map400：400)、画像幅(400*300)、css(div95%、img98%)
・手順：元コード（600を）貼り付け(動画のサイズはコードの最後の方)、
　その後サイズを直接600*450⇒400*300に変更した。
・画像幅が小さめなので両サイドに空が出る。また下段に気持ち帯が出る（450と変わらない）。

↑ストリートビュー(アソシエ）②：div幅(map450：450)、画像幅(450*338)、css(div95%、img98%)
・手順：元コード（600を）貼り付け(動画のサイズはコードの最後の方)、
　その後サイズを直接600*450⇒450*338に変更した。
・画像はスマホとPCで同じ。スマホ表示はほぼ正方形（iframeは「height: auto 」をとっている）、
　下段に気持ち帯が出るが問題なし。綺麗な画像。（幅450がいいようだ）

↑ストリートビュー(アソシエ）③：div幅(map600：600)、画像幅(600*450)、css(div95%、img98%)
・手順：元コード（600）貼り付け(動画のサイズはコードの最後の方)
・画像はスマホとPCで似ている。
　細かく言えば、スマホ表示の方が左右の領域は狭いが、上下は領域が広い。

↑google map①：div幅(map400：400)、画像幅(400*300)、css(div95%、img98%)
・手順：元コード（400）貼り付け(動画のサイズはコードの最後の方）
・画像はスマホとPCで同じ。

↑google map①b：div幅(map450：450)、画像幅(450*338)、css(div95%、img98%)
・手順：元コード（600を）貼り付け(動画のサイズはコードの最後の方)、
　その後サイズを直接600*450⇒450*338に変更した。
・画像はスマホとPCで同じ（400と比較し上下左右の表示領域が広がる）。
　スマホ表示はほぼ正方形（iframeは「height: auto 」をとっている）、
　下段に気持ち帯が出るが問題なし。（幅450がいいようだ）

↑google map②：div幅(map600：600)、画像幅(600*450)、css(div95%、img98%)
・手順：元コード（600）貼り付け(動画のサイズはコードの最後の方）
・画像はスマホとPCで似ている。
　細かく言えば、上下は同じだが、、スマホ表示の方が左右の領域が狭い。

↑google map③：div幅(map800：800)、画像幅(800*600)、css(div95%、img98%)
・手順：元コード（800）貼り付け(動画のサイズはコードの最後の方）
・画像はスマホ表示が、かなり縦長となる。
　表示内容は上下は同じだが、、スマホ表示の方が左右の領域が非常に狭くなる。

↑google map④：div幅(test：960)、画像幅(500*375)、css(div95%、img98%)
・手順：元コード（600)貼り付け⇒HTMLソースでサイズ変更（500*375）
・画像はスマホとPCで似ている。（
　細かく言えば、上下は同じだが、、スマホ表示の方が左右の領域が少し狭い。
　⇒全体イメージは画像幅400の①と画像幅600②との間の感じか？画像幅がスマホ幅に近いのがいいのか？

↑work：div幅(test2：660)、画像幅()、css(div95%、img98%)
・手順：
・