MKB Project Portfolio

Sample html No.1

< HTMLのページへ戻る

webクリエイター試験の勉強のため、htmlとcssの練習で作成しました。
白の領域にはimgを入れる用にと作成しています。
また、レスポンシブに対応出来るように、メディアクエリも採用。
作成日：2024年11月2日
作成時間：2時間

各ボタンをクリックすると、表示されているページ横（スマートフォンでは下）にソース、またはcssがテキスト形式で表示されるようにしています。

ソースを表示
cssを表示

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="美味しいコーヒーの淹れ方ガイド：初心者にも分かりやすく、種類・器具・レシピを徹底解説">
	<title>コーヒーの世界を楽しむ：初心者向けガイド</title>
	<link rel="stylesheet" href="style1.css">
</head>
<body>
<header id="top">
	<h1><a href="sample1.html">コーヒーを楽しむ</a></h1>
</header>
<nav>
	<ul>
		<li><a href="#coffee">コーヒー豆一覧</a></li>
		<li><a href="#items">器具一覧</a></li>
		<li><a href="#howto">コーヒーの淹れ方</a></li>
	</ul>
</nav>
<main>
	<h2>美味しいコーヒーとは</h2>
	<aside>
		<p>コーヒー豆の種類は、いくつもあります。<br>
		豆によって色々な味があるのをご存じでしょうか。</p>
		<p>酸味、苦味、バランス…原産地や豆によって色々と変わります。</p>
		<p>それぞれの豆に合った淹れ方も沢山ありますが、<br>
		今回は一番淹れやすい「バランス型」をご紹介します。</p>
	</aside>
	<article id="coffee">
		<section>
			<h3>まずはコーヒー豆の種類から</h3>
				<p>コーヒーと言えば豆。</p>
				<p>各原産地毎の味の違いをご紹介します。</p>
			<div>
				<h4>豆の原産地と味</h4>
				<div>
					<p>フルーツ系（酸味）</p>
						<ul>
							<li>エチオピア</li>
							<li>キリマンジャロ</li>
							<li>グァテマラ</li>
							<li>コスタリカ</li>
							<li>ホンジュラス</li>
							<li>ハワイコナ</li>
						</ul>
				</div>
				<div>
					<p>苦味</p>
						<ul>
							<li>マンデリン</li>
							<li>イタリアン</li>
						</ul>
				</div>
				<div>
					<p>バランス</p>
						<ul>
							<li>ブラジル</li>
							<li>ブルーマウンテン</li>
						</ul>
				</div>
			</div>
		</section>
	</article>
	<article id="items">
		<h3>器具一覧</h3>
			<p>コーヒー豆の理解が深まったところで、続いて器具の一覧です。<br>
			豆の種類によって淹れ方に違いもありますが、まずは一般的に使用されている物をご紹介します。</p>
			<section>
				<h4>各種器具について</h4>
				<div class="items_01">
				 	<figure class="howto_02">
						<p>コーヒーフィルター</p>
						<div class="img_area"></div>
						<p>挽いた豆を入れるところです。</p>
					</figure>
					<figure class="howto_02">
						<p>コーヒーミル</p>
						<div class="img_area"></div>
						<p>コーヒー豆を挽く為の器具。お値段はピンからキリまでありますが、インテリアとしてもおすすめです。</p>
					</figure>
				</div>
				<div class="items_01">
					<figure class="howto_02">
						<p>コーヒーメーカー</p>
						<div class="img_area"></div>
						<p>どんな方でも、粉とお水をセットすればコーヒーが作れます。<br>
						手軽に楽しめるのに加え、最近では味のクオリティが上がってきています。</p>
					</figure>
					<figure class="howto_02">
						<p>サイフォン</p>
						<div class="img_area"></div>
						<p>中級者向けのドリッパーです。<br>
						扱いは少し難しいですが、味の違いをより楽しめる器具です。</p>
					</figure>
				</div>
			</section>
	</article>
	<article id="howto">
	<h3>コーヒーの淹れ方</h3>
		<p>コーヒーの淹れ方は様々ありますが、ここではドリッパーを使用した淹れ方をご紹介します。</p>
	<section>
	<h4>コーヒーを入れる手順</h4>
	<section class="howto_01">
		<figure class="howto_02">
			<p>①お湯の温度は90～95℃</p>
			<div class="img_area"></div>
			<p>沸騰してから1分ほど置くと、ちょうどいい温度になります。</p>
		</figure>
		<figure class="howto_02">
			<p>②お湯を沸かしたら、まずはカップを温めます</p>
			<div class="img_area"></div>
			<p>お湯をカップに注ぎ、カップを温めましょう。<br>
			コーヒーを淹れた時に温度が下がらずに、雑味が減ります。</p>
		</figure>
		<figure class="howto_02">
			<p>③豆は挽きたてが理想</p>
			<div class="img_area"></div>
			<p>挽きたてが理想です。難しい場合は、挽いた豆を冷凍し、淹れる30分前に解凍しておきましょう。</p>
		</figure>
	</section>
	<section class="howto_01">
		<figure class="howto_02">
			<p>④お湯を注いで30秒蒸らします</p>
				<div class="img_area"></div>
			<p>まずは蒸らし。コーヒー粉の中心から円を描くようにお湯を注ぎ、ドリッパーのフチまでしっかりとお湯がいきわたるように注ぎましょう。<br>お湯を注いだら30秒、じっとガマンです。</p>
		</figure>
		<figure class="howto_02">
			<p>⑤30秒経過、お湯を注いでいきます</p>
			<div class="img_area"></div>
			<p>30秒経つと、コーヒー粉が「起きる」ので、ゆっくりとお湯を注いでいきます。<br>
			中心からドリッパーのフチにかけて、円を描きながらゆっくりと。お湯の注ぐペースは一定を保ちましょう。</p>
		</figure>
		<figure class="howto_02">
			<p>⑥数回に分けてお湯を注ぐ</p>
			<div class="img_area"></div>
			<p>一回で全て淹れるより、３～４回に分けて注げるように調整しましょう。<br>
			こうすることで、雑味がなくなり、味わいがマイルドになります。</p>
		</figure>
	</section>
	<section class="howto_01">
		<figure class="howto_02">
			<p>⑦満杯になるまでは淹れない</p>
			<div class="img_area"></div>
			<p>淹れる時は、満杯になるまで淹れてしまうと雑味が増えます。<br>
			ドリッパーにお湯が残っていても、７分目になったらドリッパーは外しましょう。</p>
		</figure>
		<figure class="howto_02">
			<p>⑧淹れ終わったら、カップのお湯を捨てましょう</p>
			<div class="img_area"></div>
			<p>カップを温めておいたお湯は、ここまで注いだままにしておきます。<br>
			こうすると、コーヒーがすぐに冷めずに、雑味を抑えることが出来ます。</p>
		</figure>
		<figure class="howto_02">
			<p>⑨お好みのお菓子と一緒に頂く</p>
			<div class="img_area"></div>
			<p>コーヒーだけで楽しむのもいいですが、クッキーやチョコなどと合わせると、コーヒーの味わいがより深くなります。<br>
			これで完璧です！</p>
		</figure>
	</div>
	</section>
</article>
<footer>
	<p>コーヒーのことならMKB Projectへ！</p>
		<ul>
			<li><a href="#">会社概要</a></li>
			<li><a href="#">採用情報</a></li>
			<li><a href="#">プライバシーポリシー</a></li>
		</ul>
		<div>
			<a href="#"><img src="#" alt="当社のＸロゴ"></a>
			<a href="#"><img src="#" alt="当社のInstagramロゴ"></a>
		</div>
	<small><a href="#top">Copryright &copy; 2024 MKB Project</a></small>
</footer>

</body>
</html>

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&family=Lora:wght@400;700&display=swap');

body {
	font-family: "Merriweather", serif;
	color: #4E342E;
	width: 100%;
	background-color: #F5EDE0;
	margin: 0 auto;
}

header h1 {
	text-align: center;
}

header a {
	text-decoration: none;
	color: #4e342e;
}

header a:hover {
	color: #237d32;
}

nav ul {
	list-style-type: none;
	display: flex;
	justify-content: center;
	padding: 0;
}

nav ul li {
	margin: 0 0 0 25px;
}

main h2,aside {
	text-align: center;
}

main {
	margin: 0 auto;
	width: 90%;
}

h3 {
	background-color: #f8f8f8;
	color: #237d32;
	border-left:10px solid #237d32;
	padding: 0 0 0 5px;
}

h4 {
	border-bottom: 1px solid #237d32;
	border-left: 10px solid #237d32;
	padding: 0 0 0 5px;
}

.coffee_01,
.items_01 {
	display:flex;
	justify-content: space-evenly;
}

.howto_01 {
	display: flex;
	margin: 10px;
	justify-content: space-evenly;
}

.items_01 div{
	width: 800px;
}

footer {
	text-align: center;
	padding: 25px 0;
}

footer ul {
	list-style-type: none;
	display: flex;
	justify-content: center;
	padding: 0;
}

footer ul li {
	margin: 0 0 0 25px;
}

footer div {
	margin: 0 0 20px 0;
}

a {
	text-decoration: none;
	color: #4e342e;
}

a:hover {
	text-decoration: underline;
	color: #2e7d32;
}

.img_area {
	background-color: #fff;
	max-width: 300px;
	height: 300px;
}

.howto_02 {
	width: 350px;
}

@media (max-width: 768px) {
	.howto_01,
	.items_01 {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.img_area {
		background-color: #fff;
		max-width: 350px;
		height: 350px;
	}
}
前へ : ポートフォリオサイト制作に当たってSample html No.2 : 次へ