質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

HTMLの条件によって、表示方向が切り替わる実装のコードを教えて下さい。

sktwmg8888
sktwmg8888

総合スコア4

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0リアクション

0クリップ

289閲覧

投稿2022/09/25 05:22

編集2022/09/25 05:32

実現したいこと

HTMLの条件によって、表示方向が切り替わる実装のコードを教えて下さい。

・要素①が表示されている時…要素②を表示する
・要素①が表示されていない時…要素②を非表示にする

要素① HTML

<section> <div class="item_box related_item detail_inner_box"> <div class="section_title"> <div class="image_title"></div> </div> <div class="page_contents clearfix related_item_contents standard_slide"> <div class="slider_box slider" data-auto-height="false" data-autoplay="" data-speed="350" data-slides-per-view="2" data-slides-per-group="2" data-use-breakpoints="true" data-max-cols="4"> <div class="itemlist_box inner_slider_box layout_photo"> <div class="item_list swiper-container column2 max_column4 square_photo_layout swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events"> <ul class="swiper-wrapper reset_list_style" id="swiper-wrapper-8aaa12e109ace210e" aria-live="polite"> <li class="swiper-slide slide_item_cell flex_layout list_item_32 swiper-slide-visible swiper-slide-active" role="group" aria-label="1 / 3" style="width: 182.5px;"> <div class="item_data flex_layout"> <a href="リンクURLが入ります" class="item_data_link"> <div class="inner_item_data"> <div class="list_item_photo slider_image_box"> <div class="inner_list_item_photo"> <div class="global_photo item_image_box itemph_related_item_32"> <img src="画像URLが入ります" width="133" style="aspect-ratio: 133 / 200" alt="" data-alt="" class="item_image swiper-lazy swiper-lazy-loaded"> </div> </div> </div> <div class="list_item_data"> <p class="item_name ellipsis"> <span class="goods_name">商品名が入ります</span> <span class="model_number"><span class="bracket">[</span><span class="model_number_value">型番が入ります</span><span class="bracket">]</span></span> </p> <div class="item_info"> <div class="price"> <p class="selling_price"> <span class="figure">5,852円</span><span class="tax_label list_tax_label">(税込)</span> </p> </div> </div> </div> </div> </a> </div> </li> <li class="swiper-slide slide_item_cell flex_layout list_item_32 swiper-slide-visible swiper-slide-active" role="group" aria-label="1 / 3" style="width: 182.5px;"> <div class="item_data flex_layout"> <a href="リンクURLが入ります" class="item_data_link"> <div class="inner_item_data"> <div class="list_item_photo slider_image_box"> <div class="inner_list_item_photo"> <div class="global_photo item_image_box itemph_related_item_32"> <img src="画像URLが入ります" width="133" style="aspect-ratio: 133 / 200" alt="" data-alt="" class="item_image swiper-lazy swiper-lazy-loaded"> </div> </div> </div> <div class="list_item_data"> <p class="item_name ellipsis"> <span class="goods_name">商品名が入ります</span> <span class="model_number"><span class="bracket">[</span><span class="model_number_value">型番が入ります</span><span class="bracket">]</span></span> </p> <div class="item_info"> <div class="price"> <p class="selling_price"> <span class="figure">5,852円</span><span class="tax_label list_tax_label">(税込)</span> </p> </div> </div> </div> </div> </a> </div> </li> <li class="swiper-slide slide_item_cell flex_layout list_item_32 swiper-slide-visible swiper-slide-active" role="group" aria-label="1 / 3" style="width: 182.5px;"> <div class="item_data flex_layout"> <a href="リンクURLが入ります" class="item_data_link"> <div class="inner_item_data"> <div class="list_item_photo slider_image_box"> <div class="inner_list_item_photo"> <div class="global_photo item_image_box itemph_related_item_32"> <img src="画像URLが入ります" width="133" style="aspect-ratio: 133 / 200" alt="" data-alt="" class="item_image swiper-lazy swiper-lazy-loaded"> </div> </div> </div> <div class="list_item_data"> <p class="item_name ellipsis"> <span class="goods_name">商品名が入ります</span> <span class="model_number"><span class="bracket">[</span><span class="model_number_value">型番が入ります</span><span class="bracket">]</span></span> </p> <div class="item_info"> <div class="price"> <p class="selling_price"> <span class="figure">5,852円</span><span class="tax_label list_tax_label">(税込)</span> </p> </div> </div> </div> </div> </a> </div> </li> </ul> <div class="slider_controller lower_slider_controller"> <div class="swiper-button-prev swiper-button-disabled" tabindex="-1" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-8aaa12e109ace210e" aria-disabled="true"><span class="inner-button-prev"></span></div> <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span></div> <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-8aaa12e109ace210e" aria-disabled="false"><span class="inner-button-next"></span></div> </div> <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div> </div> </div> </div> </div> </section>

要素② HTML

<div class="related_items"> <h2> <span class="title_head_space"></span> <span class="title_text">RELATED ITEMS</span> <span class="sample9"><div align="center">関連商品</div></span> <span class="title_end_space"></span> </h2> </div>

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/10/09 00:41

こちらの質問が複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。