![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
↓すいませんおしえてください!以下は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>
![「HTMLですCSSです 画像のように作り」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/0/543186319_6587cf0799e0a/M.png)
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で質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
初めて自分の家と他人の家が違う、と意識した時
子供の頃、友達の家に行くと「なんか自分の家と匂いが違うな?」って思いませんでしたか?
-
HTMLです すいません教えてください お願いします 色の点せんは関係ないので色の点線は作らなく
HTML・CSS
-
すいません HTMLです この画像をHTML、(もしくはCSS)で表すにはどうすれば良いですか? 教
HTML・CSS
-
HTMLですCSSです この画像のように 文字を打ち込みたいのですが、 下の3この四角にを画像のよ
HTML・CSS
-
-
4
HTMLです ブロック要素にするにはどうすれば良いですか?教えてくださいお願いします
HTML・CSS
-
5
すいませんHTMLです cssです教えてください!お願いします!↓ 画像のように イを、左上に アを
HTML・CSS
-
6
HTMLです 店主のこだわりというのを画像のように表せますか? 背景は茶色で 文字は白で 点線と白四
HTML・CSS
-
7
卒業研究でよく分からないところがあるので教えて欲しいです。 インバータ用組み込みソフトウェア開発シス
C言語・C++・C#
-
8
HTMLで作った時報アプリが動きません
JavaScript
-
9
ワードプレスインストールできない
オープンソース
-
10
無料hp作成ソフトお勧め
オープンソース
-
11
今さらですがHPを作成するに当たって初歩の初歩を教えてください
ホームページ作成・プログラミング
-
12
HTMLです 四角みたいにして中には ホ、 ア、 レ みたいに 上の四角は2つ、 下は左に1つ、 と
HTML・CSS
-
13
ウェブ、孤立画像を検出する方法
その他(プログラミング・Web制作)
-
14
パイソンの
C言語・C++・C#
-
15
htmlのstyleのposition:relativeとpoition:abusoluteと無指定
HTML・CSS
-
16
HTMLの CSSのファイルというのは、 .cssにするとメモ帳が出てくるのですが 大丈夫でしょうか
HTML・CSS
-
17
HTMLで表をつくったのですがウィンドウの大きさを変化させると、表の真ん中の列だけ補足なり、表の中の
HTML・CSS
-
18
JRのjsonファイルって使って大丈夫そ?
その他(プログラミング・Web制作)
-
19
HTMLとJavaScriptで作った表示して検索するWebアプリが正常に動かない
JavaScript
-
20
どなたかこのプログラミングを完成させて欲しいです。 ヒントはこちらです↓ 青色:ゲームプログラムのル
C言語・C++・C#
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS 可変マージン
-
HTMLですCSSです 画像のように...
-
htmlのstyleのposition:relativ...
-
スタイルシート※max-heightがIE...
-
html/cssで要素が出てこなくて...
-
Flickity で画像にリンクを貼る...
-
Webサイト作成 プログレスバー ...
-
[W3C]フラッシュ画像について
-
テーブルの1つのセル内で、上揃...
-
オープニングにアニメーション...
-
MAX関数を使ってからLEFT JOIN...
-
jqueryのsortableで一部ソート...
-
iframe内のリンクが飛ばないの...
-
チェックボックスで画像を一括表示
-
javascriptでオブジェクトの重...
-
読み込んだQRコードをフォーム...
-
Slick.jsのオプションrtlについて
-
背景色を透明化
-
javascriptテキストBOX色を元に...
-
ダブルクォーテーションが消え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
サイトにコンテンツを並べる際...
-
CSS <div>の入れ子が反映さ...
-
スクロール可能なチェックボックス
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
textareaで入力した文字を改行...
-
文字をクリックしたら別の文字...
-
css固定したフッターが本文と重...
-
文字を固定したいのですが…
-
Flickity で画像にリンクを貼る...
-
Ctrl+F(検索)の窓を出したいの...
-
オンマウス時に別画像を上に重...
-
背景の過
-
離れた場所にマウスオーバーで...
-
チェックボックスの背景色って...
-
フッターの下に隙間ができてしまう
-
ポップアップのソースの書き方...
-
スタイルシートで画面を上下に...
-
floatさせたdivタグを折り返さ...
-
TABLEの高さを固定したいのですが…
おすすめ情報