↓すいませんおしえてください!以下は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
-
-
4
すいません HTMLです この画像をHTML、(もしくはCSS)で表すにはどうすれば良いですか? 教
HTML・CSS
-
5
すいませんHTMLです cssです教えてください!お願いします!↓ 画像のように イを、左上に アを
HTML・CSS
-
6
HTMLですCSSです この画像のように 文字を打ち込みたいのですが、 下の3この四角にを画像のよ
HTML・CSS
-
7
大至急。webのシングルページを作ろうと考え、イラレでデザインをしました。 それからの手順で悩んでる
HTML・CSS
-
8
HTMLです次の意味を持つ要素または次の効果を設定するプロパティを選んでください。とい
HTML・CSS
-
9
HTMLに背景を追加するやり方を教えてください。
HTML・CSS
-
10
HTMLです 店主のこだわりというのを画像のように表せますか? 背景は茶色で 文字は白で 点線と白四
HTML・CSS
-
11
卒業研究でよく分からないところがあるので教えて欲しいです。 インバータ用組み込みソフトウェア開発シス
C言語・C++・C#
-
12
無料hp作成ソフトお勧め
オープンソース
-
13
HTMLで作った時報アプリが動きません
JavaScript
-
14
ワードプレスインストールできない
オープンソース
-
15
今さらですがHPを作成するに当たって初歩の初歩を教えてください
ホームページ作成・プログラミング
-
16
フロントエンジニアで一人前といわれるレベルの画面
HTML・CSS
-
17
htmlのエラーについて(デバッグ)
PHP
-
18
次のhtml・cssでspan内の文字を点滅させるには、どのようにしたらよいのでしょうか。
Java
-
19
擬似コード
C言語・C++・C#
-
20
htmlの修正方法を教えていただきたいです。
HTML・CSS
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
文字を固定したいのですが…
-
背景色が表示されない><
-
プログラミングでのビンゴマシ...
-
メニューやヘッダー背景だけを...
-
チェックボックスの背景色って...
-
2行目のブラウザ表示以上を省略
-
CSS:floatを使っての段組で困...
-
フッターの下に隙間ができてしまう
-
css固定したフッターが本文と重...
-
指定した項目を二重線で消す
-
webデザイン, コーディング
-
【CSS】floatで左右に並べた...
-
html/cssで要素が出てこなくて...
-
こんな表示はできそうですか?...
-
大分類・中分類・小分類
-
スタイルシート(CSS)で、高さ...
-
文字をクリックしたら別の文字...
-
divのheight指定で画面一杯に表...
-
ラジオボタンで段階評価
-
SafariでもBGMを流す方法という...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
CSS <div>の入れ子が反映さ...
-
Ctrl+F(検索)の窓を出したいの...
-
css固定したフッターが本文と重...
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
文字を固定したいのですが…
-
スクロール可能なチェックボックス
-
divのheight指定で画面一杯に表...
-
Flickity で画像にリンクを貼る...
-
スタイルシートで画面を上下に...
-
1行で左寄せと右寄せと中央揃え...
-
CSS のみのタブ切り替えについて
-
CSS 可変マージン
-
HTMLですCSSです この画像のよ...
-
チェックボックスの背景色って...
-
HTMLですCSSです 画像のように...
-
画像の特定の座標にカーソルが...
-
TABLEの高さを固定したいのですが…
おすすめ情報