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

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

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

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

CSS

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

Q&A

解決済

1回答

252閲覧

スライドする画像の配置

risacuspin

総合スコア18

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/06/15 08:24

ヘッダーに画像のスライド配置したいです。
htmlに<li>タグで画像を設定して、スライドする為にcssで3枚の画像を同じ場所に配置したいのですがうまくできません。

spにはdisplay: none;
pcにはdisplay: block;
をhero-imageに入れ試しましたが、何も変わりませんでした。

ご教授よろしくお願いいたします。

html

1<!--slide--> 2<div class="hero-image"> 3 <ul class="hero-list bxslider"> 4 <li><img src="images/home/kv01.jpg" alt="rcudesign社内の仕事の様子"></li> 5 <li><img src="images/home/kv02.jpg" alt="rcudesign社内の仕事の様子"></li> 6 <li><img src="images/home/kv03.jpg" alt="rcudesign社内の仕事の様子"></li> 7 </ul> 8 <img src="images/home/kv_logo.png" alt="rcudesign" class="logo-img__center"> 9 </div> 10<!--/slide-->

css

1html{ 2 font-size: 62.5%;/*16px×62.5%=10px*/ 3} 4body{ 5 color: #333; 6 font-family: 'Montserrat', 'Noto Sans Jp', sans-serif; 7 font-style: 1.6rem; 8 font-feature-settings: "palt"; 9 letter-spacing: 0.025em; 10} 11a{ 12 text-decoration: none; 13 color: #333; 14} 15img{ 16 max-width: 100%; 17 height: auto; 18} 19/*------------------------------------------------------ 20 * utility 21------------------------------------------------------*/ 22.wrapper{ 23 box-sizing: border-box; 24 padding: 0 20px; 25} 26.page{ 27 margin-top: 72px; 28} 29.text-center{ 30 text-align: center; 31} 32.img-pc{ 33 display: none; 34} 35 36.bg-gray{ 37 background-color: #e6e6e6; 38} 39.bg-lightgray{ 40 background-color: #f4f4f4; 41} 42 43 44/*------------------------------------------------------ 45 * section 46------------------------------------------------------*/ 47.section-header{ 48 padding: 75px 0 55px; 49} 50.section-header2{ 51 padding: 75px 0 75px; 52} 53.section-header3{ 54 padding: 75px 0 55px; 55} 56.section-body{ 57 padding-bottom: 55px; 58} 59.section-body2{ 60 padding-bottom: 75px; 61} 62.section-body3{ 63 padding-bottom: 0; 64} 65.section-footer{ 66 padding: 0 56px 75px; 67} 68.section-footer2{ 69 padding: 0; 70} 71/*------------------------------------------------------ 72 * header 73------------------------------------------------------*/ 74.header{ 75 position: fixed; 76 top: 0; 77 left: 0; 78 z-index: 50; 79 width: 100%; 80 padding: 20px 20px 16px; 81 background-color: #fff; 82} 83.header-inner{ 84 padding-left: 0; 85} 86/*------------------------------------------------------ 87 * hero-image 88------------------------------------------------------*/ 89.hero-image{ 90 position: relative; 91 margin-top: 72px; 92} 93.img-sp{ 94 display: none; 95} 96.img-pc{ 97 display: block; 98}

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

記載されたコードであれば
<div class="hero-image img-sp">のときに非表示
<div class="hero-image img-pc">のときに表示
になるので、正しく書かれてあれば何も変わらないということはないです。

あと.img-pcが2つ書かれているため
最初のやつは削除したほうが良いです。

投稿2019/06/15 10:39

yasutomi

総合スコア2937

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問