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

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

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

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

HTML5

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

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

CSS

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

Q&A

解決済

1回答

1367閲覧

背景が表示できないbackground-image

退会済みユーザー

退会済みユーザー

総合スコア0

div

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

HTML5

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/09/24 03:17

一番したのカレンダークラスを空にしてそこにい背景画像を入れたいのですが背景画像が表示されません

やってみたこと

divの数の確認
模写しているのでディベロッパーツールで確認してみた
一時間ほど考えてもやはりダメでした

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="mosh1.css"> <title>mosha1-flower</title> </head> <body> <header> <div class="logo"></div> <div class="tagline"> かわいいが届くお花便 </div> <div class="download-wrapper"> <div class="download-item"> <div class="container"> <a class="download for-ios" href="https://flowr.page.link/88Lt">App Store</a> <a class="download for-andoroid" href="https://flowr.page.link/19mT">Google Play</a> <p>* 北海道、沖縄、離島エリアは現在対象外です</p> </div> </div> </div> </header> <section class="service"> <div class="service2"> <div class="item item1"> <h2>届くのは<br>あなたの好みのお花だけ</h2> <p> FLOWERのお花は季節やトレンドに合わせてプロがセレクトしたもの。雰囲気の異なる複数のお花から毎回好きなものが選べます。 </p> </div> <div class="item item2"> <h2>お花はポストに投函<br>忙しくても大丈夫</h2> <p> お花は専用BOXに入れてポストに直接お届け。不在で受け取れなくても安心して使えます。 </p> </div> <div class="item item3"> <h2>FLOWERなら<br>いつもかわいく飾れる</h2> <p> 専用の花器を使うと、届いたお花をさっと生けるだけでかわいい空間のできあがり。お花のある暮らしがもっと楽しくなります。 </p> </div> </div> </section> <section class="price"> <div class="container"> <div class="item-contents"> <div class="heading"> <h2>お部屋に飾りやすいサイズの<br>ブーケをワンコインで</h2> </div> <div class="freetrial"> <img class="free-image" src="https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/price_freetrial-f9eff918f8de1901e1e25d84228cb3ab5eb126f5c2469cfc03ea46b507f29e49.png"> </div> <div class="price-image"> <img class="image" src="https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/price_bouquetimg-9d58e59120ae586337c3b91a2f531ad14e7b05dc3d3ec63ab0ee68b41c8852fb.png"> <p>お花とグリーン5本〜6本のブーケ</p> <p class="large">500円<span>/1回</span></p> </div> <div class="footnote"> <p>送料は360円です</p> <p>価格は税別です</p> </div> </div> </div> <div class="item-frequency"> <h2>月に2回の注文で、<br>お花がいつもあるちょうどいいペース</h2> <div class="calendar"> </div> </div> </section> </body> </html>
header { background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_header_pink-4704d42ed44908fb061e80afc515a93ab2fcbfd605c2580de486a4d980b2115a.jpg); height:100vh; background-size: cover; padding-top: 48px; background-position: center; position: relative; } p { margin:0; } .body { font-size:14px; } .logo { background-image: url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/header_logo-0dbc9cb7c037472d3bf71fde0c1d3efd708c2c2547e9ed3e420051ca826cdad8.png); margin: 0 auto 16px; width: 131px; height: 116px; background-repeat: no-repeat; background-size:contain; background-position: center; margin-top:5vh; } .tagline { color:white; text-align: center; } .download-wrapper { padding-top:24px; margin: 0 auto; text-align: center; position: absolute; bottom:24px; left:0px; right: 0px; } .download-item { padding:24px 16px; } .download { display: inline; background-color: black; border-radius: 3px; padding: 20px 29px; color:white } .download.for-ios { margin-right: 10px; } .download-wrapper p { color:white; padding-top:100px; } body, h2, h3, h4, p { font-family: "Noto Sans JP", sans-serif; line-height: 1.6; letter-spacing: 0.05rem; } .service2{ display: flex; } .item { color: white; width:calc(100%/3); } .item1 { background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_service01-01ee576583ddad054106d9f2dc78caf78be6c829383351a4fbc99ac5a566020a.jpg); background-size:cover; padding: 8vmin 6vmin; background-position:center bottom; min-height: 540px; line-height: 1.6; } .item2 { background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_service02-cd59d8cd17b05503a9fc3eeae42d618d0cc19b2277b581f5db275d5dde09e94d.jpg); padding:8vmin 6vmin; background-position: center bottom; background-size:cover; min-height: 540px; } .item3 { background-image:url("https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_service03-4c44f872ed6f7ed3007faeb109b1e03ceabcdb3106ba54392a5457a159a0f2ab.jpg"); padding:8vmin 6vmin; min-height:540px; background-size:cover; background-position:center bottom; } .price { text-align: center; min-height:578px; padding:16vmin 6vmin 20vmin; background: #f5f5f5; } .heading { position: relative; } .free-image { width:125px; height:46px; top:80px; right: 90px; } .price-image { margin-bottom:16px; } .freetrial { position: absolute; top:80px; right:600px; } .image { width:200px; height:200px; text-align: center; } .item-frequency { padding: 16vmin 0 20vmin; } .calender { background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/img_frequency-e1cc7b2fcecb9a18105144861c456538abb21a5049fe1d320846cb61e42d1fdd.png); margin:24px; background-position:center; background-size:contain; height:156px; }

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

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

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

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

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

kei344

2020/09/24 08:38

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
guest

回答1

0

ベストアンサー

html

<div class="calendar">

css
.calender

タイプミスが原因ではないかと思います。

投稿2020/09/24 03:30

Jon_do

総合スコア1373

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

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

退会済みユーザー

退会済みユーザー

2020/09/24 05:54

ありがとうございます。。頑張って探したのにタイプミス????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問