マジレス希望

HTMLですCSSですこの画像のように文字を打ち込みたいのですが、下の３この四角にを画像のよ

解決済

質問者：Wohinfahrensie
質問日時：2023/12/25 16:07
回答数：3件

HTMLですCSSです
この画像のように
文字を打ち込みたいのですが、
下の３この四角にを画像のように入れたいのですが
どうすればいいですか？教えてくださいお願いしますすいませんおしえてください！
ホットコーヒー
\5,000-
当店自慢のホットコーヒーです。「あなただけの１杯」をぜひお試しください。
もっと見る

アイスコーヒー
\8,000-
暑い夏にぴったりのアイスコーヒーです。ご注文を頂いてから氷出しで１滴１滴抽出します。
もっと見る

アイスカフェオレ
\8,000-
ご注文を頂いてから氷で抽出するアイスコーヒーと，搾りたての牛乳を絶妙なバランスで。
もっと見る
を画像のように入れたいのですが
どうすればいいですか？教えてくださいお願いしますすいませんおしえてください！
hot_coffee.png
ice_caffee_au_lait.png
ice_coffee.png
使う画像です↑

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>T.U.Cafe</title>
<style>
body {
background-color: #A52A2A; /* 背景色を茶色に設定 */
color: white;
font-family: 'Your Font', sans-serif;
}
.title {
background: rgba(255, 255, 255, 0.5); /* 透明背景 */
color: white;
font-size: 2em;
text-align: center;
padding: 10px; /* 追加：タイトルの余白 */
}
.subtitle {
color: white; /* 追加：サブタイトルの文字色 */
text-align: center;
padding: 10px; /* 追加：サブタイトルの余白 */
}
#div1 {
border-left: solid 8px white;
color: white;
border-bottom: dotted 4px white;
padding: 10px; /* 追加：店主のこだわりの余白 */
}
.menu-item {
background-color: white;
color: #8B4513;
padding: 10px;
margin: 10px;
}
.menu-name {
font-weight: bold;
}
.menu-price {
font-weight: bold;
}
.menu-description {
font-size: 0.8em;
}
.footer {
color: #8B4513;
font-size: smaller;
text-align: center;
padding: 10px; /* 追加：フッターの余白 */
}
#wrap {
width: 80vw;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
#wrap > div {
width: 35vw;
height: 35vw;
margin: 2vw;
border: 1px solid gray;
text-align: center;
font-size: 4vw;
background-color: white; /* 追加：ボックスの背景色 */
}
</style>
</head>
<body>
<div class="title">T.U.Cafe</div>
<div class="subtitle">こだわりの１杯をあなただけのために</div>
<div id="div1">店主のこだわり
</div>
<div style="background-color: white; padding: 10px;">
ご来店ありがとうございます。<br>
<span style="color: white; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; font-size: larger; font-weight: bolder;">T.U.Cafe</span> はご注文を頂いてからコーヒーの実の収穫，果肉などの取り除き，豆の選別，焙煎，グラインドをして提供しています。
ご提供まで少々お時間を頂きますが，「あなただけの１杯」を淹れることにこだわりを持っています。<br>
楽しんでください。<br>
</div>
<div class="menu-item">
<div class="menu-name"></div>
<img src="hot_coffee.png" alt="hot_coffee.png" />
<div class="menu-price">/5,000-</div>
<p style="border-bottom: 1px dotted white;">下線ボーダー、ドット</p>
<div class="menu-description">当店自慢のホットコーヒーです。「あなただけの１杯」をぜひお試しください。</div>
<span style="text-decoration: underline; color: red;">もっと見る</span>
</div>
<div id="wrap">
<div>ホ</div>
<div>ア</div>
<div>レ</div>
</div>
<div class="menu-item">
<div class="menu-name"></div>
<img src="path_to_shaved_ice_image.jpg" alt="かき氷" />
<div class="menu-price">/8,000-</div>
<div class="menu-description">暑い夏にぴったりのアイスコーヒーです。ご注文を頂いてから氷出しで１滴１滴抽出します。</div>
<span style="text-decoration: underline; color: red;">もっと見る</span>
</div>
<div class="menu-item">
<div class="menu-name">アイスカフェオレ</div>
<img src="path_to_daikon_image.jpg" alt="大根" />
<div class="menu-price">/8,000-</div>
<div class="menu-description">ご注文を頂いてから氷で抽出するアイスコーヒーと，搾りたての牛乳を絶妙なバランスで。</div>
<span style="text-decoration: underline; color: red;">もっと見る</span>
</div>
<div class="menu-item">
<div class="menu-name">Copyright c T.U.Cafe. All Rights Reserved.</div>
<div class="menu-price"></div>
<div class="menu-description"></div>
<span style="text-decoration: underline; color: red;"></span>
</div>
<div class="footer">Copyright c T.U.Cafe. All Rights Reserved.
</div>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： gura_
回答日時：2023/12/27 19:53

Wohinfahrensie さん

　････３この四角にを画像のように入れたい･････

ご参考に↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>T.U.Cafe</title>
<style>
body {
background-color: #A52A2A;
font-family: 'Your Font', sans-serif;
}
main{
line-height: 1.5;
width: 80%; max-width: 800px; margin: 0 auto;
}
header{
background: #930;
padding-top: 8px;
}

.title {
display: block;
width: 300px;
margin: 30px auto;
border-radius: 16px;
background-color: rgba(255, 255, 255, 0.5);
color:white;
font-size: 2em;
text-align: center;
padding: 10px;
}
.subtitle {
color: white;
text-align: center;
padding: 10px;
}
.div1 {
border-left: solid 8px white;
color: white;
border-bottom: dotted 4px white;
padding:8px 12px;
}

.div2{
padding: 10px; color: white;
}
.div2 span{
-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black;
font-size: larger; font-weight: bolder;
}

#wrap {
width: 100%;
margin: 0px auto;
display: grid;
grid: 1fr/ 1fr 1fr;
gap: 8px 12px;
}
#wrap .menu-item {
background-color: white;
color: #8B4513;
padding: 16px 20px 0;
}
#wrap .menu-name {
font-weight: bold; font-size: larger;
}
#wrap .menu-price {
text-align: right;
font-weight: bold; font-size: large;
margin-bottom: 1rem;
}
#wrap .menu-box{
display: grid;
grid:1fr/1fr 2fr;
gap: 16px;
}
#wrap .menu-txt .menu-description {
font-size: 0.8em;
}
#wrap .menu-txt p{
text-decoration: underline; color: red;
text-align: right;
}

.footer {
color: #8B4513;background-color: #fff;
font-size: smaller; text-align: center;
margin: 16px 0px;
}

</style>
</head>
<body>
<main>
<header>
<div class="title">T.U.Cafe</div>
<div class="subtitle">こだわりの１杯をあなただけのために</div>
</header>
<h2 class="div1">店主のこだわり</h2>
<div class="div2">
ご来店ありがとうございます。<br>
<span>T.U.Cafe</span> はご注文を頂いてからコーヒーの実の収穫，果肉などの取り除き，豆の選別，焙煎，グラインドをして提供しています。<br>
ご提供まで少々お時間を頂きますが，「あなただけの１杯」を淹れることにこだわりを持っています。<br>
楽しんでください。<br>
</div>

<h2 class="div1">メニュー</h2>
<div id="wrap">
<div class="menu-item">
<div class="menu-name">ホットコーヒー</div>
<div class="menu-price">\5,000-</div>
<div class="menu-box">
<img src="https://oshiete.xgoo.jp/images/feeling/qjiro/pc/ … alt="hot_coffee.png">
<div class="menu-txt">
<div class="menu-description">当店自慢のホットコーヒーです。「あなただけの１杯」をぜひお試しください。</div>
<p>もっと見る</p>
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-name">アイスコーヒー</div>
<div class="menu-price">\8,000-</div>
<div class="menu-box">
<img src="https://oshiete.xgoo.jp/images/feeling/qjiro/pc/ … alt="かき氷">
<div class="menu-txt">
<div class="menu-description">暑い夏にぴったりのアイスコーヒーです。ご注文を頂いてから氷出しで１滴１滴抽出します。</div>
<p>もっと見る</p>
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-name">アイスカフェオレ</div>
<div class="menu-price">\8,000-</div>
<div class="menu-box">
<img src="https://oshiete.xgoo.jp/images/feeling/qjiro/pc/ … alt="大根">
<div class="menu-txt">
<div class="menu-description">ご注文を頂いてから氷で抽出するアイスコーヒーと，搾りたての牛乳を絶妙なバランスで。</div>
<p>もっと見る</p>
</div>
</div>
</div>
</div>
<div class="footer">Copyright c T.U.Cafe. All Rights Reserved.</div>
</main>
</body>
</html>

- 1
- 件

通報する

No.2

回答者：優里さん
回答日時：2023/12/25 18:01

できました。

こんな感じでしょうか。
コードの【】の中は画像のサイズなどに合わせてデザインを調節したりパスを書いたりしてください。横幅は1280pxで見たときに正常に表示されます。以下HTMLです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>T.U.Cafe</title>
<style>
body {
background-color: #A52A2A; /* 背景色を茶色に設定 */
color: white;
font-family: 'Your Font', sans-serif;
}
.title {
background: rgba(255, 255, 255, 0.5); /* 透明背景 */
color: white;
font-size: 2em;
text-align: center;
padding: 10px; /* 追加：タイトルの余白 */
}
.subtitle {
color: white; /* 追加：サブタイトルの文字色 */
text-align: center;
padding: 10px; /* 追加：サブタイトルの余白 */
}
#div1 {
border-left: solid 8px white;
color: white;
border-bottom: dotted 4px white;
padding: 10px; /* 追加：店主のこだわりの余白 */
}
.menu-item {
background-color: white;
color: #8B4513;
padding: 10px;
margin: 10px;
}
.menu-name {
font-weight: bold;
}
.menu-price {
font-weight: bold;
}
.menu-description {
font-size: 0.8em;
}
.footer {
color: #8B4513;
font-size: smaller;
text-align: center;
padding: 10px; /* 追加：フッターの余白 */
}
#wrap {
width: 80vw;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
#wrap > div {
width: 35vw;
height: 55vw;
margin: 2vw;
border: 1px solid gray;
text-align: center;
font-size: 4vw;
background-color: white; /* 追加：ボックスの背景色 */
}
</style>
</head>
<body>
<div class="title">T.U.Cafe</div>
<div class="subtitle">こだわりの１杯をあなただけのために</div>
<div id="div1">店主のこだわり
</div>
<div style="background-color: white; padding: 10px;">
ご来店ありがとうございます。<br>
<span style="color: white; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; font-size: larger; font-weight: bolder;">T.U.Cafe</span> はご注文を頂いてからコーヒーの実の収穫，果肉などの取り除き，豆の選別，焙煎，グラインドをして提供しています。
ご提供まで少々お時間を頂きますが，「あなただけの１杯」を淹れることにこだわりを持っています。<br>
楽しんでください。<br>
</div>
<div class="menu-item">
<div class="menu-name"></div>
<img src="hot_coffee.png" alt="hot_coffee.png" />
<div class="menu-price">/5,000-</div>
<p style="border-bottom: 1px dotted white;">下線ボーダー、ドット</p>
<div class="menu-description">当店自慢のホットコーヒーです。「あなただけの１杯」をぜひお試しください。</div>
<span style="text-decoration: underline; color: red;">もっと見る</span>
</div>
<div id="wrap" style="height:700px">
<div style="color:#000;">
<p>ホットコーヒー</p>
<p style="text-align: right;">\5000-</p>
<img src="hot_coffee.png" width="【横幅】" alt="【書く】">
<p style="text-align: right; font-size:60%; display:inline">当店自慢のホットコーヒーです。「あなただけの１杯」をぜひお試しください。<br/><a href="【書く】" style="color:【もっと見るの色】">もっと見る</a></p>
</div>
<div style="color:#000;">
<p>アイスコーヒー</p>
<p style="text-align: right;">\8000-</p>
<img src="hot_coffee.png" width="【横幅】" alt="【書く】">
<p style="text-align: right; font-size:60%; display:inline">暑い夏にぴったりのアイスコーヒーです。ご注文を頂いてから氷出しで１滴１滴抽出します。<br/><a href="【書く】" style="color:【もっと見るの色】">もっと見る</a></p>
</div>
<div style="color:#000;">
<p>アイスカフェオレ</p>
<p style="text-align: right;">\8000-</p>
<img src="hot_coffee.png" width="【横幅】" alt="【書く】">
<p style="text-align: right; font-size:60%; display:inline">ご注文を頂いてから氷で抽出するアイスコーヒーと，搾りたての牛乳を絶妙なバランスで。<br/><a href="【書く】" style="color:【もっと見るの色】">もっと見る</a></p>
</div>
</div><br/><br/>
<div class="menu-item">
<div class="menu-name"></div>
<img src="path_to_shaved_ice_image.jpg" alt="かき氷" />
<div class="menu-price">/8,000-</div>
<div class="menu-description">暑い夏にぴったりのアイスコーヒーです。ご注文を頂いてから氷出しで１滴１滴抽出します。</div>
<span style="text-decoration: underline; color: red;">もっと見る</span>
</div>
<div class="menu-item">
<div class="menu-name">アイスカフェオレ</div>
<img src="path_to_daikon_image.jpg" alt="大根" />
<div class="menu-price">/8,000-</div>
<div class="menu-description">ご注文を頂いてから氷で抽出するアイスコーヒーと，搾りたての牛乳を絶妙なバランスで。</div>
<span style="text-decoration: underline; color: red;">もっと見る</span>
</div>
<div class="menu-item">
<div class="menu-name">Copyright c T.U.Cafe. All Rights Reserved.</div>
<div class="menu-price"></div>
<div class="menu-description"></div>
<span style="text-decoration: underline; color: red;"></span>
</div>
<div class="footer">Copyright c T.U.Cafe. All Rights Reserved.
</div>
</body>
</html>