classの使い方について（複数可？）

Question

いつもお世話になっております。

ECステーションさんのページクリエイターでhtml記述しているときに疑問になったので教えてください。

https://manual.ecsystem.jp/20200211/
こちらのマニュアルを参考に、おすすめショーケースの高さ調整をscriptでやろうと思いました。
2箇所やりたくて、どちらも同じ高さで良いので、
classをひとつ作り、2箇所ともに記入しましたが、
先のほうだけ反映され、後のほうは無視される形になってしまいました。

現在は応急処置としてそれぞれのiframeに別のclassを付けて対応しています。

ネットで探すと、同classを複数箇所にできる、とあったのですがどうなのでしょうか。
今後class付きのおすすめショーケースを増やしていく予定でして、
一つずつ対応するclassを作るより、できるだけまとめられたほうが分かりやすいと思い質問しました。

ご教授よろしくお願いします。

●作ったページ
https://www.rakuten.ne.jp/gold/shimamura-miso/ecstation/spc/20200604ss_sp.html

Accepted Answer

ECマスターズの田中です。

HTMLの仕様として、同じclassは、
特に問題なく複数のタグにご記載いただくことができます。

今回、後のほうが無視されたように見えたのは、
var target01 = document.getElementsByClassName("height_50off");
にて、クラスのついたタグをすべて取得したにも関わらず、
target01[0].setAttribute('height', '300');
にて、
target01[0]
つまり、取得したタグのうち、一番最初のタグに対してのみ
処理を行っていることが原因です。

たとえば下記ソースのように、
取得したタグすべてに対して繰り返し処理を行う記述が必要となります。

var target = document.getElementsByClassName("height_off");
for( i=0; i

Answer

田中様

いつもお世話になっています。

タグを簡素化したいので、教えてもらったメディアクエリで再度挑戦してみたいと思います。

追加で質問ですが、
＞@media screen and (max-width: 479px) {
の479pxというのは、スマホはだいたいコレで収まるということで479pxの設定ということでしょうか。

そしてclassに指定するのは、
＞.height_off {
から　class="height_off"　で良いでしょうか。

また高さを何パターンか用意し、
ECステーションのページクリエイターに直接記述する場合は
下記のとおりで間違いないでしょうか？


@media screen and (max-width: 479px) {
.height_off {height: 300px;}
.height_off2 {height: 500px;}
}


よろしくお願いいたします。

Answer

ECマスターズの田中です。

いただいた内容につきましては、
すべて概ねその通りとなっております。
class名は、ご希望に応じてご変更いただいても結構です。

Answer

田中様

お返事ありがとうございます。
今回のSS終わって、スマホリニューアルまでにがんばって作ってみます。
また不明な点が出てきましたらよろしくお願いいたします。