楽天大学に案内されていたスマホのタグ講座動画について

Question

とても基本的なことだと思うのですがわからないので質問させていただきます。

楽天大学に案内されていたスマホのタグ講座動画の中で、
下記のようなものを見つけました。

【スマホ】【ガイド付】6スマートフォンの画面をフルに使う！
画像を画面横幅をフィットさせる指定方法
https://daigaku.rms.rakuten.co.jp/rmsapp/watch/30335

こちらの中では、
タグをcssで指定する方法が案内されています↓

img. SAMPLE名 {
max-width:100%;
height:auto;
}

私はがんばれプランでGOLDを使っているのですが、
そもそもスマホにCSSは出来ないため、
 
ではじまるタグを使用してきしたがこちらは楽天では禁止タグなのですよね？

楽天の案内通りに横幅をフィットさせるタグを入れるためには、
下記のような画像タグを入れないといけないのだと思うのですが、



class指定もしてはいけないことになっていますよね？
楽天が説明しているこちらのタグを使うには、禁止タグ以外の方法で具体的にどこに、どのようなタグを入れたら良いのでしょうか？

私はそもそも大きな勘違いをしているのでしょうか・・・

基本的な質問で申し訳ございません、
どうか宜しくお願い致します。

Accepted Answer

ECマスターズの伊藤です。

>  
> ではじまるタグを使用してきしたがこちらは楽天では禁止タグなのですよね？

ご認識頂いております通り、iframeタグは、スマホでは禁止タグとなっておりますが
一部の禁止タグは、=""をご入力いただくことで、使用可能となっています。


> 楽天の案内通りに横幅をフィットさせるタグを入れるためには、
> 下記のような画像タグを入れないといけないのだと思うのですが、
> 
> 
> 
> class指定もしてはいけないことになっていますよね？
> 楽天が説明しているこちらのタグを使うには、禁止タグ以外の方法で具体的にどこに、どのようなタグを入れたら良いのでしょうか？

動画内で、解説されている方法は、禁止タグ(class)を使用した方法になっております。
禁止タグを利用せずに、max-width: 100%;をご使用する方法はございませんので
下記のタグをご使用くださいませ。


※class=“SAMPLE” の ”　は半角に修正してください。
※禁止タグをご利用いただくために、=""を入力してください。

なお、ご認識頂いております通り、楽天RSMのバグを利用した方法となっているため
仕様変更となった際に、ご使用いただけなくなる可能性がございますので
ご了承の上、ご利用くださいますよう、お願いいたします。

Answer

一度解決としていたのですが、もう一度質問させていただきたいです。

下記の通りにタグを入れたところ、スマホ画面から大きくはみ出して左右にぐらついてしまいます。

width="100%" 指定ですと左右に少し余白ができてしまうので、
画面横幅をフィットさせたいのですが、
下記の指定以外にタグが必要なのでしょうか？
よろしくお願いいたします。

img. SAMPLE名 {
max-width:100%;
height:auto;
}

Answer

ECマスターズの村井です。

いただいたご質問は休み明け担当より回答させていただきますので、
今しばらくお待ちくださいませ。

Answer

ECマスターズの伊藤です。

恐れ入りますが、実際のページを拝見させていただきたいと思いますので
ページのURLと、実際にタグを入れていただいた箇所を
返信、もしくは、一番最初のご質問投稿の右下にございます
「投稿内容について報告する」よりご連絡いただけますでしょうか。

お手数おかけいたしますが、よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

実際のソースありがとうございました。

誠に恐れ入りますが、設置したページのURLも
ご教示いただけますでしょうか。

お手数おかけいたしますが、どうぞよろしくお願いいたします。

Answer

ECマスターズの伊藤です。

ページのURLのご連絡ありがとうございました。

img.haba {
max-width:100%;
height:auto;
}

こちらの設定を、商品説明文の画像に適用させた、ということでお間違い無いでしょうか。


> 下記の通りにタグを入れたところ、スマホ画面から大きくはみ出して左右にぐらついてしまいます。

現状、スマホ画面から大きくはみ出している箇所が
アプリの商品説明文1枚目の画像となっていましたが
こちらの箇所でお間違い無いでしょうか。

アプリで画像を画面いっぱいに表示していただくには、
width="100%" の指定をしていただく必要がございます。
アプリでは、CSSの設定は反映しませんので、
お手数ですが、画面からはみ出すすべての画像に、
width="100"　を入れていただきますよう、お願いいたします。


また、CSSについてですが


と、ご指定頂いていますが
class=“haba”
の""が全角となっておりましたので
class="haba"
に修正をしていただきますと、

img.haba {
max-width:100%;
height:auto;
}

を適用していただくことができます。

Answer

ご返答ありがとうございます。
全角になってしまっていた部分を修正しましたが、やはり両側に隙間ができてしまい、
width="100%" 指定の時と変化がありません。

max-width:100%;を適用させるにはまだどこか足りないのでしょうか？

よろしくお願い致します。

Answer

ECマスターズの伊藤です。

> 全角になってしまっていた部分を修正しましたが、やはり両側に隙間ができてしまい、
> width="100%" 指定の時と変化がありません。

隙間についてですが、添付の箇所となりますでしょうか。

添付の箇所でお間違いない場合、
この隙間の内側が表示領域となるため、
width="100%"
としていただいても、隙間を削除することができません。

そのため、下記CSSを、
スマートフォン用の商品共通説明文等に入れていただき
ご確認いただきますよう、お願いいたします。



div.blockWrap {
  padding: 0;
}
###HR######IMG04b131ef77b0ddb0bc01d770435be9a1d.pngIMG0######BR###

Answer

【スマホ】【ガイド付】6スマートフォンの画面をフルに使う！
画像を画面横幅をフィットさせる指定方法

という楽天大学の案内は、両側に隙間が出来る事を無くすための案内ではなく、100%表示の案内だったのですね。

すみませんその事を理解しておりませんでした。
教えていただいたタグを挿入したところ隙間なく表示させることができました。

ありがとうございました。