Q&A
「HTMLで画像を指定したら、CSSで画像の見せ方を変えることができるのはわかる」とは具体的にどのような方法でしょうか。何を意図しているのかがわかりにくいので、「background-imageを定義したら、どこでその画像を飾り付けできる」も何がしたいのかがわかりません。
背景画像は縦横画面いっぱいにしたいが、どうしても手前にあるMATSUKAZEYAの画像の縦幅に合わせたサイズになります。どのようにすれば、背景画像を画面いっぱいに表示させ、手前の画像を真ん中に配置できるのでしょうか？
html
1<!DOCTYPE html> 2<html lang ="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>松風屋</title> 6 <meta name="description" content="松風屋ホームページ"> 7 <link rel="stylesheet" href="style.css"> 8 </head> 9 10 <body> 11 <nav> 12 <h1><img src="images/logo.png" alt="松風屋のロゴです。"></h1> 13 <ul> 14 <li><a href="http://www.matukazeya.com/">トップページ</a></li> 15 <li><a href="http://www.matukazeya.com/">松風屋のこだわり</a></li> 16 <li><a href="http://www.matukazeya.com/">あんどーなつ</a></li> 17 <li><a href="http://www.matukazeya.com/">商品のご紹介</a></li> 18 <li><a href="http://www.matukazeya.com/">店舗情報</a></li> 19 <li><a href="http://www.matukazeya.com/">会社概要</a></li> 20 <li><a href="http://www.matukazeya.com/">ご注文・お問い合わせ</a></li> 21 </ul> 22 23 </nav> 24 25 <header> 26 <div class="img"> 27 <img src="images/logo (2).png" alt="松風屋のロゴです。" > 28 </div> 29 30 <div class="main"> 31 <div class="description">和菓子処松風屋のこだわり</div> 32 <div class="article"> 33 <p>当社は、対象10年に創業した約100年の歴史を持つ和菓子屋です。<br>初代社長、佐々木市郎は俳聖松尾芭蕉を敬愛しており、「奥の細道 芭蕉最中」など<br>芭蕉にゆかりのある菓子を作り続けてきました。<br>松尾芭蕉が奥の細道の旅の間に見出した概念に「不易流行」というものがあります。<br> 34 これは、いつまでも変化しない本質的なものを忘れない中にも、<br>新しい変化を取り入れていくということです。<br>当社はこの言葉を経営理念とし、昔からの伝統を守りつつ、<br>時代に流れや新しい変化を取り入れ、常により良い菓子を探求し続けています。</p> 35 </div><br> 36 <img src="images/name.png" class="img.name"> 37 <p class="contact">株式会社松風屋三代目 佐々木啓仁</p> 38 <input type="submit" value="詳しく見る" class="recommend"> 39 </div> 40 </header> 41 42 <div class="secondary"> 43 <p class="description2"><span class="section1">和菓子職人が丹精込めて作った</span><br><span class="section2">昔懐かし</span><span class="section3">あんどーなつ</span></p> 44 <p>繊細な味覚を持つ和菓子職人が丹精込めて作ったら、上品な甘さの特別なあんどーなつができました。<br>こだわりの食材を職人の技で仕上げた松風屋のあんどーなつをぜひご賞味ください。</p> 45 <input type="submit" value="詳しく見る" class="recommend"> 46 </div> 47 48 <div class="thirtiary"> 49 <p class="description3">商品のご紹介</p> 50 <p class="related"> 素材の良さを活かしながら、熟練の技ひとつひとつ、まごころ込めて手作りしています。</p> 51 <div class="container"> 52 <img src="images/ic_products1.jpg" class="item"> 53 <img src="images/ic_products2.jpg" class="item"> 54 <img src="images/ic_products3.jpg" class="item"> 55 <img src="images/ic_products4.jpg" class="item"> 56 <img src="images/ic_products5.jpg" class="item" 57 > 58 </div> 59 </div> 60 61 <div class="news"> 62 63 64 </div> 65 66 67 68 </body> 69</html> 70
CSS
1nav { 2 display: flex; 3} 4header { 5 margin:0 0 100px 0; 6} 7h1 { 8 margin: 10px 0 0 200px; 9} 10ul { 11 display: flex; 12 list-style-type: none; 13 margin: 1.1rem 0 0 2.6rem; 14 font-size:14px; 15 font-family: serif; 16} 17li { 18 margin: 0 1rem 0 0; 19} 20a { 21 text-decoration: none; 22 color: #000 23} 24 25.img { 26 text-align: center; 27 background-image: url(images/main-vsual-nontitle.png); 28 background-size: cover; 29} 30.main { 31 text-align: center; 32 font-family: serif; 33} 34.description { 35 font-size:28px; 36 margin:100px 0 40px 0 ; 37 letter-spacing: 10px; 38} 39.article { 40 font-size:18px; 41} 42p { 43 line-height: 2; 44 margin: 0; 45} 46.contact { 47 line-height:5; 48} 49.recommend { 50 width:150px; 51 height: 40px; 52 background-color: #fff 53} 54.secondary { 55 background-image: url(images/main-vsual-nontitle.png); 56 padding: 0 0 0 50%; 57 font-family: serif; 58 margin: 0 0 100px 0; 59} 60.section1 { 61 font-size:15px; 62} 63.section2 { 64 font-size:18px; 65} 66.section3 { 67 font-size:23px; 68} 69.thirtiary { 70 text-align: center; 71} 72.description3 { 73 font-size: 24px; 74 margin: 0 0 30px 0; 75} 76.related { 77 font-size:15px; 78 margin: 0 0 45px 0; 79} 80.container { 81 display: flex; 82} 83.item { 84 padding: 10px; 85}
字足らずで、申し訳ございません。
僕の中で、基本は「HTMLの情報はCSSで飾り付けする」というイメージを持ってます。
ここまでは正しいでしょうか？
そして、ここで伝えたかったことは、HTMLでは書かれておらず、CSSで急に現れた背景画像はどこで飾り付けができるのかということです。
根本が間違っていたら、教えていただきたいです。
「イメージ」などではなく、具体的に画像に対して何がしたいのかがわかりません。HTMLでできることを試した上で、それがbackground-imageで実現できるかを質問されることをお勧めします。
本文を修正しました。よろしくお願いします！
回答2件
0
自己解決
試行錯誤して、自己解決しました！
投稿2020/06/01 14:54
総合スコア15
具体的な解決手段が書いていないので低評価します。
https://teratail.com/help#resolve-myself
始めたばかりで、知らなかったです。教えていただきありがとうございました！
次回から気をつけます！
0
背景画像は縦横画面いっぱいにしたいが、どうしても手前にあるMATSUKAZEYAの画像の縦幅に合わせたサイズになります。
HTML
1<div class="img"> 2 <img src="images/logo (2).png" alt="松風屋のロゴです。" > 3 <!-- ここに後続の文章をいれればよいです。 --> 4</div>
多分、文章とロゴの塊が立て横中央にしたいのだろうと思いますが、
HTML/CSS全体を提示されないと、これくらいの回答になります。
投稿2020/05/29 15:36
総合スコア69606
あなたの回答
tips
プレビュー
