インラインフレームのWidthに関して

Question

https://obot-ai.com/campaign/

こちらのページの上から3段目にWebチャットをいれたのですが
なぜかサイドによってしまいます。

できたらその下の画像と同じwidthにしたいのですが
なぜこのようなことが起きているのでしょうか

教えていただけると幸いです。

Accepted Answer

ECマスターズの田中です。

> ほかのデザインも崩れてしまって怖いので

というのは、
たとえば「div」や「iframe」のような、
タグを対象に指定されたような形でしょうか。

スタイルシートでは、
下記ページに紹介されている、あらゆる条件の組み合わせで
適用する対象を指定することができます。
http://www.htmq.com/csskihon/005.shtml

特に、クラス名による指定は、
ご自身で名付けた要素が対象となる、
非常にわかりやすい方法ですので、
まずはクラス名による指定から馴染んでいただければ、
今後、自由なページデザインができるようになってまいります。

> 縦をもっと伸ばしたい場合はどのように指定すればよろしいでしょうか。

先程のソースを確認したところ、
height="80%"
にご変更いただいておりますね。

heightの％指定は、その要素を囲む要素に高さが指定されていないと、
％による計算ができず、何も指定されていない場合と同じ高さとなってしまいます。

height属性で指定される場合は、
height="400"
のように、半角数字でご指定ください。
この場合、PC・スマホ共通の高さとなります。

スタイルシートで指定する場合、たとえば
.web_chat iframe { height: 400px; }
という指定ができます。
（この場合、web_chatクラスを持つ要素の中にあるiframeタグの高さを400pxにする、という意味になります）
「メディアクエリ」を用いて、画面横幅ごとに高さを切り替えることも可能です。

Answer

ECマスターズの田中です。

Webチャット用のiframeタグ、width属性にて、
width="900px"
のように、英字が含まれているため
ご希望どおりの横幅として認識されていないようです。

スタイルシートと異なり、
HTMLタグに直接記載するwidth属性、height属性には
「px」など、％以外の単位はつけられませんのでご注意ください。

> その下の画像と同じwidthにしたい
ということでしたら、
width="100%"
とご指定いただきますようお願いします。

スタイルシートによって
width: 100%;
とご指定いただいても結構です。
可能であれば、見た目を調整する設定については
スタイルシートにて一元管理していただくことを
オススメします。

Answer

おっしゃるとおりできました。
CSSでやったのですが、ほかのデザインも崩れてしまって怖いので
Iframa上で指定しました。

ただ縦をもっと伸ばしたい場合はどのように指定すればよろしいでしょうか。