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

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

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

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

HTML5

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

Webサイト

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

Q&A

解決済

1回答

1256閲覧

webサイト上の画像を半分で設置させたい

HdNu

総合スコア32

CSS3

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

HTML5

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

Webサイト

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

0グッド

0クリップ

投稿2021/06/07 00:24

架空のブランドサイトを作成しています。

<div class="About">内のコンテナ内の右半分にフルサイズで画像を表示させたいのですが、コードの記述がわからず、詰まってしまっています。

background-size: 70px;

サイズのの記述を使い試してみましたが、大きさに特に変化は現れませんでした。

どなたかご教授頂きたい所存です。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>ブランドサイト</title> 6 <link href="css/style.css" rel="stylesheet"> 7 </head> 8 9 <body> 10 <header> 11 <div class=""></div> 12 <ul> 13 <li class="lo">Home</li> 14 <li class="lo">About</li> 15 <li class="lo">Product</li> 16 <li class="lo">Online Store</li> 17 <li class="lo">NEWS</li> 18 </ul> 19 </header> 20 <div class="container"> 21 <div class="main"> 22 23 </div> 24 <div class="consept"> 25 <h1>おいしさ際立てる、美しさ</h1> 26 <p>○○県○○市、この地域に構える○○店。 27 様々な料理に合わせたお皿を提供し、料理のおいしさ、美しさを引き立てます。 28 29 30 31 </p> 32 </div> 33 <div class="About"> 34 <h3>About</h3> 35 <p></p> 36 <img src="35531127.jpg"> 37 </div> 38 <div class="purodakut"> 39 <h3>Product</h3> 40 41 </div> 42 <div class="Online"></div> 43 <div class="news"></div> 44 <footer></footer> 45 </div> 46 </body> 47</html> 48

CSS

1body{ 2 margin: 0; 3 padding: 0; 4} 5 6 7ul{ 8 text-align:right; 9 padding-right:500px; 10 padding-top:20px; 11} 12 13li{ 14 display: inline; 15} 16 17.lo{ 18 padding:0px; 19 margin-right: 30px; 20} 21 22li:hover{ 23 opacity: 0.5; 24} 25 26li{cursor: pointer} 27 28.main{ 29 height: 80vh; 30 background-size:cover; 31 background-image: url(..//tom-chen-6DH6BojClJg-unsplash.jpg); 32} 33 34.consept{ 35text-align: center; 36} 37 38.About{ 39 text-align:right; 40} 41 42.About h3{ 43 text-align:left; 44} 45 46img{ 47 background-size: 300px; 48 49} 50 51.purodakut{ 52text-align: center; 53}

イメージ説明

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

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

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

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

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

guest

回答1

0

ベストアンサー

こういうことですか?

CSS

1.About img{ 2 width: 50%; 3}

投稿2021/06/07 00:30

itagagaki

総合スコア8402

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

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

HdNu

2021/06/09 04:03

回答いただきありがとうございます。回答が遅くなってしまい大変申し訳ございません。 無事半分に分けることができました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問