個人的備忘録：HTML/CSSで「畳 × 掛け軸 × 襖」の世界観を表現してみた

## はじめに

本記事では、HTMLとCSSのみで実装された"和室風ユーザー登録フォーム"について解説します。

:::note info
**個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。**
:::

和室の象徴的な要素である畳、襖（ふすま）、掛け軸をモチーフにしたデザインを取り入れ、和の雰囲気を表現しています。

## 書こうと思ったきっかけ

受講している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>
```

**実際のデザイン**

![Screenshot 2025-05-01 at 4.55.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/c401d8c2-a945-418b-b7ad-4db6ab0e8eb4.png)

## デザインの概要について

この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>` 内の表示内容

#### タイトル
```html
<div class="kakejiku">一般ユーザー登録</div>
```
- 掛け軸のようなデザインの横書きタイトル

#### フォーム本体
```html
<form class="fusuma-form">
  <label>...</label>
  <input>...
  <textarea>...</textarea>
  <button>送信</button>
</form>
```
- 名前・メールアドレス・自由記述欄の3つの入力項目
- ボタンは和風カラーで視覚的に調和

## まとめ

このコードは、日本の伝統的な和室（畳＋襖＋掛け軸）をイメージし、視覚的に落ち着いた・和風らしいUIをHTMLとCSSだけで再現したものですが、引き続き頑張っていきます...!