はじめに
本記事では、HTMLとCSSのみで実装された"和室風ユーザー登録フォーム"について解説します。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
和室の象徴的な要素である畳、襖（ふすま）、掛け軸をモチーフにしたデザインを取り入れ、和の雰囲気を表現しています。
書こうと思ったきっかけ
受講しているITスクールのハッカソンの開発にて、Webアプリケーションに和風のデザインが求められたため、自作で和室をイメージしたUIコンポーネントを作成しました。
実際のコード
test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>和室風フォーム</title>
<style>
body {
margin: 0;
padding: 0;
background: repeating-linear-gradient(
45deg,
#d6e3c4,
#d6e3c4 4px,
#b0c59a 4px,
#b0c59a 8px
);
font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
/* 掛け軸風タイトル（横書き） */
.kakejiku {
background-color: #fefae0;
border: 4px solid #6b4c3b;
padding: 12px 24px;
margin-bottom: 30px;
font-size: 24px;
color: #3c2f2f;
text-align: center;
box-shadow: 4px 4px 6px rgba(0,0,0,0.2);
border-radius: 6px;
}
/* 襖風フォーム */
.fusuma-form {
background-color: #f7f0dc;
border: 4px solid #8b7355;
width: 320px;
padding: 24px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 12px;
}
.fusuma-form label {
font-weight: bold;
color: #4b3f2f;
}
.fusuma-form input,
.fusuma-form textarea {
padding: 8px;
border: 2px solid #aaa08c;
border-radius: 4px;
font-size: 14px;
}
/* 畳ボタン（模様なし＋ホバーあり） */
.tatami-button {
background-color: #c8d5b9;
color: #2d2d2d;
padding: 10px 20px;
border: 2px solid #4b6043;
border-radius: 4px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
font-weight: bold;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
.tatami-button:hover {
background-color: #a3b18a;
color: #000;
}
</style>
</head>
<body>
<div class="kakejiku">一般ユーザー登録</div>
<form class="fusuma-form">
<label for="name">お名前</label>
<input type="text" id="name" name="name" placeholder="山田 太郎">
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" placeholder="example@example.com">
<label for="message">ご用件</label>
<textarea id="message" name="message" rows="4" placeholder="ご自由にご記入ください"></textarea>
<button type="submit" class="tatami-button">送信</button>
</form>
</body>
</html>
実際のデザイン
デザインの概要について
このHTMLファイルは、和室（畳・襖・掛け軸）をイメージしたユーザー登録フォームのデザインを1枚で実装しているものです。以下にパーツごとに「何をしているか」を解説します。
全体の目的
"和室"の雰囲気を演出したWebフォームを作る。畳の床・掛け軸風のタイトル・襖風のフォーム・和風の送信ボタンで構成。
<head> 内の設定
-
<!DOCTYPE html>：HTML5形式であることを宣言 -
<html lang="ja">：言語を日本語に指定 -
<meta charset="UTF-8">：文字コードをUTF-8に設定し、日本語が正しく表示されるようにする -
<title>：ブラウザタブのタイトルに "和室風フォーム" を表示
<style> セクション（CSS）
body（畳の背景）
-
repeating-linear-gradientを使って畳の織り目を再現 -
flexレイアウトで画面中央にコンテンツを配置
.kakejiku（掛け軸風タイトル）
- 和紙のような背景色（#fefae0）
- 木枠を思わせる茶色のボーダー
- 影と角丸で立体感を演出
- テキストは横書き中央揃え
.fusuma-form（襖風フォーム）
- 襖紙のような明るいベージュの背景
- 濃い茶色の縁取り
- 内部は縦方向に並ぶ入力欄
- 影付きで浮かせたような見た目
.fusuma-form label, input, textarea
- ラベルは太字＆茶色系で和の雰囲気
- 入力欄とテキストエリアは読みやすいように余白と枠を整える
.tatami-button（畳風ボタン）
- 畳をイメージした緑色ベースの背景
- 濃い緑色の縁取り
- 内側に影を加えて押し感を演出
- マウスオーバー時は背景が濃くなって反応が見える
<body> 内の表示内容
タイトル
<div class="kakejiku">一般ユーザー登録</div>
- 掛け軸のようなデザインの横書きタイトル
フォーム本体
<form class="fusuma-form">
<label>...</label>
<input>...
<textarea>...</textarea>
<button>送信</button>
</form>
- 名前・メールアドレス・自由記述欄の3つの入力項目
- ボタンは和風カラーで視覚的に調和
まとめ
このコードは、日本の伝統的な和室（畳＋襖＋掛け軸）をイメージし、視覚的に落ち着いた・和風らしいUIをHTMLとCSSだけで再現したものですが、引き続き頑張っていきます...!