はじめに
今回は、和室の雰囲気を再現したWebページをHTMLとCSSで作成した際の備忘録として、この記事をまとめました。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
書こうと思ったきっかけ
受講しているITスクールのハッカソンの開発の一環で、和のテイストを表現するレイアウトや配色の工夫について試行錯誤した経験を残しておくためです。
内容
作成したのは、和室をイメージしたWebページのテンプレートです。
test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>和室スタイルページ</title>
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
<style>
body.washitsu {
margin: 0;
padding: 0;
background: repeating-linear-gradient(
45deg,
#d6e3c4,
#d6e3c4 4px,
#b0c59a 4px,
#b0c59a 8px
);
font-family: "M PLUS Rounded 1c", "Yu Mincho", "Hiragino Mincho ProN", serif;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
nav.tatami-navbar {
width: 100%;
background-color: #3a5b2a; /* 畳縁のような深緑 */
color: white;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
nav.tatami-navbar .logo {
font-size: 1.5rem;
font-weight: bold;
}
nav.tatami-navbar .nav-links a {
color: #f9f9f9;
text-decoration: none;
margin-left: 1rem;
font-weight: bold;
}
nav.tatami-navbar .nav-links a:hover {
color: #c09749; /* 金茶アクセント */
}
.content {
margin-top: 2rem;
text-align: center;
color: #2e3c2f;
}
.content h1 {
font-size: 2rem;
}
.content p {
font-size: 1.2rem;
}
</style>
</head>
<body class="washitsu">
<nav class="tatami-navbar">
<div class="logo">和モード</div>
<div class="nav-links">
<a href="#">ホーム</a>
<a href="#">紹介</a>
<a href="#">お問い合わせ</a>
</div>
</nav>
<div class="content">
<h1>ようこそ和室へ</h1>
<p>畳のぬくもりと落ち着きのある空間をご体験ください。</p>
</div>
</body>
</html>
主な特徴は以下の通りです。
-
背景：畳の織り目を表現するために、
repeating-linear-gradientを使用。 - フォント：丸みとやわらかさを持つ"M PLUS Rounded 1c"と、和文らしさを演出する明朝体を併用。
- ナビゲーションバー：畳縁（たたみべり）をイメージした深緑系の配色でデザイン。
- アクセント：リンクのホバー時に金茶色を使って高級感と和のアクセントを演出。
-
レイアウト：
flexboxにより、中央揃えのシンプルかつ落ち着いた構成に。
HTMLファイル1枚で完結し、外部スタイルシートを使わずに完結できるようになっています。
まとめ
今回作成した和室風のWebページテンプレートは、視覚的な落ち着きと日本らしい雰囲気を意識してデザインしました。
今後、旅館や和風カフェの紹介ページなど、和の雰囲気を大切にしたWebサイト制作に応用できると思います。
技術的にも、CSSのグラデーションやレイアウト技術、フォント選びなどを実践できた良い機会となりました。