↓すいませんおしえてください!以下は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">こだわりの1杯を あなただけのために</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> ご注文を頂いてからコーヒーの実の収穫,果肉などの取り除き,豆の選別,焙煎,グラインドをして提供しています。
ご提供まで少々お時間を頂きますが,「あなただけの1杯」を淹れることにこだわりを持っています。 <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>はご注文を頂いてからコーヒーの実の収穫,果肉などの取り除き,豆の選別,焙煎,グラインドをして提供しています。
ご提供まで少々お時間を頂きますが,「あなただけの1杯」を淹れることにこだわりを持っています。<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">当店自慢のホットコーヒーです。「あなただけの1杯」をぜひお試しください。</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">暑い夏にぴったりのアイスコーヒーです。ご注文を頂いてから氷出しで1滴1滴抽出します。</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>

No.2ベストアンサー
- 回答日時:
<!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">こだわりの1杯を あなただけのために</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> はご注文を頂いてからコーヒーの実の収穫,果肉などの取り除き,豆の選別,焙煎,グラインドをして提供しています。
ご提供まで少々お時間を頂きますが,「あなただけの1杯」を淹れることにこだわりを持っています。<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">当店自慢のホットコーヒーです。「あなただけの1杯」をぜひお試しください。</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">暑い夏にぴったりのアイスコーヒーです。ご注文を頂いてから氷出しで1滴1滴抽出します。</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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 初心者html・CSS ウィンドウを縮小するとタグの一部が隠れてしまう。 1 2023/12/18 19:52
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 【JavaScript】検索がヒットした場合、プルダウンをオープンで表示させる方法 2 2023/09/06 14:02
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS <div>の入れ子が反映さ...
-
YouTubeをブログに貼る時、1つ...
-
離れた場所にマウスオーバーで...
-
かなり困っています。知恵を貸...
-
css固定したフッターが本文と重...
-
リンクで違うページの指定箇所...
-
プログラミングでのビンゴマシ...
-
【CSS】floatで左右に並べた...
-
スクロール可能なチェックボックス
-
CSSでテキストの均等割付
-
javascriptテキストBOX色を元に...
-
フォームに入力された値により...
-
MAX関数を使ってからLEFT JOIN...
-
1枚の画像をクリックすると複数...
-
自働生成される<div>タグに連番...
-
javascriptでフォーカスを当て...
-
指定したパスが現URLに含まれて...
-
jQuery bxSlider 画像に変更
-
removeAttribute()メソッドで削...
-
外部javascriptの重複を防ぐには
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スタイルシートで画面を上下に...
-
【CSS】floatで左右に並べた...
-
チェックボックスの背景色って...
-
CSS <div>の入れ子が反映さ...
-
HTMLですCSSです 画像のように...
-
CSSで背景を下までのばすには?
-
CSS のみのタブ切り替えについて
-
離れた場所にマウスオーバーで...
-
スクロール可能なチェックボックス
-
htmlのstyleのposition:relativ...
-
文字をクリックしたら別の文字...
-
スタイルシート(CSS)で、高さ...
-
行間
-
Ctrl+F(検索)の窓を出したいの...
-
CSSでフローとした際の親要素の...
-
CSSで(3)段組のページを作り...
-
html スクロール要素を下から表...
-
IE6のレイアウト崩れ
-
CSSでdivのheightを動的に
-
フッター上部に謎の隙間
おすすめ情報

