マジレス希望

HTMLですすいません教えてくださいお願いします色の点せんは関係ないので色の点線は作らなく

解決済

質問者：Wohinfahrensie
質問日時：2023/12/26 15:18
回答数：1件

HTMLです

すいません教えてください
お願いします
色の点せんは関係ないので色の点線は作らなくていいです
どうやりますか？教えてくださいおねがいします！！！画像のようにお願いします！！！

T.U.Cafe
こだわりの１杯をあなただけのために

・店主のこだわり
・メニュー

店主のこだわり
ご来店ありがとうございます。
T.U.Cafeは，ご注文を頂いてからコーヒーの実の収穫，果肉などの取り除き，豆の選別，焙煎，グラインドをして提供しています。
ご提供まで少々お時間を頂きますが，「あなただけの１杯」を淹れることにこだわりを持っています。

メニュー

ホットコーヒー hot_coffee.png
\5,000-
当店自慢のホットコーヒーです。「あなただけの１杯」をぜひお試しください。
もっと見る

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

アイスカフェオレ
ice_cafe_au_lait.png
\8,000-
ご注文を頂いてから氷で抽出するアイスコーヒーと，搾りたての牛乳を絶妙なバランスで。
もっと見る

Copyright © T.U.Cafe. All Rights Reserved.

なんか中国語みたいになっちゃうのですが？どうすれば良いですか？

補足日時：2023/12/26 20:08
通報する

通報する

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

質問の本文を隠す

回答 (1件)

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

No.1ベストアンサー

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

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="Shift-JIS">
<title>T.U.Cafe</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}

h1 {
text-align: center;
color: #336699;
}

h2 {
color: #336699;
}

p {
line-height: 1.5;
}

img {
max-width: 100%;
height: auto;
}

.menu-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.menu-item {
width: 48%; /* 2%余白を残す */
margin-bottom: 20px;
}
</style>
</head>
<body>

<h1>T.U.Cafe</h1>
<p>こだわりの１杯をあなただけのために</p>

<h2>店主のこだわり</h2>
<p>ご来店ありがとうございます。T.U.Cafeは，ご注文を頂いてからコーヒーの実の収穫，果肉などの取り除き，豆の選別，焙煎，グラインドをして提供しています。ご提供まで少々お時間を頂きますが，「あなただけの１杯」を淹れることにこだわりを持っています。</p>

<h2>メニュー</h2>

<div class="menu-container">
<div class="menu-item">

<p>ホットコーヒー</p>
<p>\5,000-</p>
<p><img src="hot_coffee.png" alt="ホットコーヒー">当店自慢のホットコーヒーです。「あなただけの１杯」をぜひお試しください。<a href="#">もっと見る</a></p>
</div>

<div class="menu-item">

<p>アイスコーヒー</p>
<p>\8,000-</p>
<p><img src="ice_coffee.png" alt="アイスコーヒー">暑い夏にぴったりのアイスコーヒーです。ご注文を頂いてから氷出しで１滴１滴抽出します。<a href="#">もっと見る</a></p>
</div>

<div class="menu-item">

<p>アイスカフェオレ</p>
<p>\8,000-</p>
<p><img src="ice_cafe_au_lait.png" alt="アイスカフェオレ">ご注文を頂いてから氷で抽出するアイスコーヒーと，搾りたての牛乳を絶妙なバランスで。<a href="#">もっと見る</a></p>
</div>
</div>

<p>Copyright c T.U.Cafe. All Rights Reserved.</p>

</body>
</html>