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<target.length; i++ ){  target[i].setAttribute('height', '300');}なお、端末の横幅に併せて高さを変更するという処理は、スタイルシートの「メディアクエリ」という仕組みを用いてご記載いただくことも可能です。https://sole-color-blog.com/blog/71/たとえば今回の場合ですと下記のように、プログラムを考えることなくシンプルにご記載いただくことができます。参考にしていただければ幸いです。@media screen and (max-width: 479px) {  .height_off {    height: 300px;  }}

Answer

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

Answer

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

Answer

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

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

カテゴリーから探す