↓すいませんおしえてください!以下は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も見ています
-
プロが教える店舗&オフィスのセキュリティ対策術
中・小規模の店舗やオフィスのセキュリティセキュリティ対策について、プロにどう対策すべきか 何を注意すべきかを教えていただきました!
-
HTMLです すいません教えてください お願いします 色の点せんは関係ないので色の点線は作らなく
HTML・CSS
-
かっこいいウェブを作るテク
HTML・CSS
-
すいません HTMLです この画像をHTML、(もしくはCSS)で表すにはどうすれば良いですか? 教
HTML・CSS
-
-
4
すいませんHTMLです cssです教えてください!お願いします!↓ 画像のように イを、左上に アを
HTML・CSS
-
5
HTMLですCSSです この画像のように 文字を打ち込みたいのですが、 下の3この四角にを画像のよ
HTML・CSS
-
6
HTMLです ブロック要素にするにはどうすれば良いですか?教えてくださいお願いします
HTML・CSS
-
7
CSSで謎の現象
HTML・CSS
-
8
HTMLです次の意味を持つ要素または次の効果を設定するプロパティを選んでください。とい
HTML・CSS
-
9
大至急。webのシングルページを作ろうと考え、イラレでデザインをしました。 それからの手順で悩んでる
HTML・CSS
-
10
HTMLに背景を追加するやり方を教えてください。
HTML・CSS
-
11
HTMLです 店主のこだわりというのを画像のように表せますか? 背景は茶色で 文字は白で 点線と白四
HTML・CSS
-
12
卒業研究でよく分からないところがあるので教えて欲しいです。 インバータ用組み込みソフトウェア開発シス
C言語・C++・C#
-
13
HTMLで作った時報アプリが動きません
JavaScript
-
14
無料hp作成ソフトお勧め
オープンソース
-
15
ワードプレスインストールできない
オープンソース
-
16
今さらですがHPを作成するに当たって初歩の初歩を教えてください
ホームページ作成・プログラミング
-
17
独自ドメインのHPを編集するにはどうしたらいいでしょうか。
その他(プログラミング・Web制作)
-
18
Javaって使いますか、もう古いですか?C++とどっちがいいですか?分析でC++使う授業ありましたけ
C言語・C++・C#
-
19
CSS初心者です。わかる方教えてください。
HTML・CSS
-
20
align-itemsの使い方。本が間違っている?
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLですCSSです 画像のように...
-
スタイルシートで画面を上下に...
-
大分類・中分類・小分類
-
CSS <div>の入れ子が反映さ...
-
htmlのstyleのposition:relativ...
-
フッター上部に謎の隙間
-
SafariでもBGMを流す方法という...
-
[CSS] 常にフッターは下部に表...
-
スクロール可能なチェックボックス
-
2つのDIVを中央と右に横並びに...
-
Ctrl+F(検索)の窓を出したいの...
-
文字をクリックしたら別の文字...
-
textareaで入力した文字を改行...
-
youtubeをHPに載せたいです。
-
チェックボックスの背景色って...
-
HTMLですCSSです この画像のよ...
-
Flickity で画像にリンクを貼る...
-
フッターの位置を一番下に表示...
-
MAX関数を使ってからLEFT JOIN...
-
javascriptで毎月替わる画像
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSS <div>の入れ子が反映さ...
-
フッター上部に謎の隙間
-
Ctrl+F(検索)の窓を出したいの...
-
【CSS】floatで左右に並べた...
-
css固定したフッターが本文と重...
-
HTMLですCSSです 画像のように...
-
htmlのstyleのposition:relativ...
-
HTMLですCSSです この画像のよ...
-
Flickity で画像にリンクを貼る...
-
画像の特定の座標にカーソルが...
-
チェックボックスの背景色って...
-
html スクロール要素を下から表...
-
レイアウトが崩れないようにす...
-
スクロール可能なチェックボックス
-
リンクで違うページの指定箇所...
-
オンマウス時に別画像を上に重...
-
フッターの下に隙間ができてしまう
-
スタイルシート(CSS)で、高さ...
-
かなり困っています。知恵を貸...
-
離れた場所にマウスオーバーで...
おすすめ情報