マジレス希望

HTMLですCSSです画像のように作りたいのですが以下のようにあってますか？間違ってる感じがしま

解決済

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

↓すいませんおしえてください！以下はHTMLかな？CSSとかも教えていただきたいです
お直しできると助かります！！
header.png
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>
header.png
body {
background-color: #A52A2A; /* 背景色を茶色に設定 */
color: white;
font-family: 'Your Font', sans-serif;
}
.title {
background: rgba(255, 255, 255, 0.5); /*header.png 透明背景 */
color: white;
font-size: 2em;
text-align: center;
}
.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;
}
/* その他必要なスタイルを追加 */
</style>
</head>
<body>
<div class="title">T.U.Cafe</div>
<div class="subtitle">こだわりの１杯を　あなただけのために</div>

</html>
<html>
<title>Online HTML Editor</title>
<head>
<style>
body {
/* 周りは茶色で */
background-color : brown;
}
#div1 {
border-left : solid 8px white; /* 白い四角に */
color : white; /* 白い文字の店主のこだわり */
/* そして下は白点線をたくさん */
border-bottom : dotted 4px white;
}
</style>
</head>
<body>
<div id="div1">店主のこだわり
</div>
<div style="background-color : white;">
　ご来店ありがとうございます。<br>
<span style="
/* T.U.Cafeの文字は */
/* 白い文字で */
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>
</body>
</html>
<html>
<title>Online HTML Editor</title>
<head>
<style>
body {
/* 周りは茶色で */
background-color : brown;
}
#div1 {
border-left : solid 8px white; /* 白い四角に */color : white; /* 白い文字のトケイ */ /* そして下は白点線をたくさん */ border-bottom : dotted 4px white; }
</style>
</head>
<body>
<div id="div1">店主のこだわり</div>
<div style="background-color : white;">
ご来店ありがとうございます。<br>
<span style="
/* T.U.Cafeの文字は */
/* 白い文字で */
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>
</body
</html
<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>
<style>
#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;
}<p style="color: white;">・白背景</p>
<p style="border-bottom: 1px dotted black;">下線ボーダー、ドット</p>
</style>
</head>
<body>
<div id="wrap">
<div>ホ</div
<div>ア</div>
<div>レ</div
</div>
</body>
</html>
<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 © 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 © T.U.Cafe. All Rights Reserved.
</div>
</body>
</html>

通報する

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

質問の本文を隠す

回答 (3件)

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

No.2ベストアンサー

回答者：イニシャルK.
回答日時：2023/12/24 16:31

<!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>