個人的備忘録：掛け軸風タイトルや畳ボタンまで！CSSで和室デザインを整理してみた

はじめに

この記事では、和室風のウェブデザインをCSSで表現するためのスタイル定義についてまとめています。

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

背景やフォーム、ボタンなど各要素に和の要素を取り入れたデザインをCSSのみで再現することで、視覚的に落ち着いた和の雰囲気を演出することができます。

書こうと思ったきっかけ

受講しているITスクールのハッカソンの開発の一環で和風のデザインを採用することになり、実装内容を後から振り返るために、また再利用可能なスタイルとしてまとめておこうと思い記録しています。

サンプルコード

src/styles/common.css

/* Google Fonts を読み込む場合（HTMLに追加） */
/* <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&display=swap" rel="stylesheet"> */

/* 和室風デザイン共通CSS */

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;
  justify-content: center;
  min-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;
  font-family: "M PLUS Rounded 1c", sans-serif; /* ← 追加 */
}

/* 襖風フォーム */
.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;
  font-family: "M PLUS Rounded 1c", sans-serif; /* ← 追加 */
}

.tatami-button:hover {
  background-color: #a3b18a;
  color: #000;
}

.top-button {
  background-color: #fefae0;        /* 和紙風の背景色 */
  border: 4px solid #6b4c3b;        /* 濃い茶の太めのふち */
  padding: 12px 24px;
  margin-bottom: 30px;
  font-size: 24px;
  color: #3c2f2f;                   /* こげ茶文字 */
  border-radius: 8px;
  font-family: "M PLUS Rounded 1c", "Yu Mincho", serif;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.top-button:hover {
  background-color: #f0e5c9;
  color: #000;
}

/* 送信ボタン（緑系） */
.form-submit-button {
  background-color: #c8d5b9;
  color: #2d2d2d;
  padding: 10px 20px;
  border: 2px solid #4b6043;
  border-radius: 6px;
  width: 100%;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.form-submit-button:hover {
  background-color: #a3b18a;
}

.form-button-group {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.button-back {
  background-color: #fefae0;
  border: 3px solid #6b4c3b;
  color: #3c2f2f;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  width: 100px;
  height: 48px;
  line-height: 28px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button-back:hover {
  background-color: #f0e5c9;
}

.button-submit {
  background-color: #c8d5b9;
  border: 2px solid #4b6043;
  color: #2d2d2d;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  width: 160px;
  height: 48px;
  line-height: 28px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button-submit:hover {
  background-color: #a3b18a;
}

/* PINダイアログ用の背景 */
.modal-bg {
  background-color: #f7f0dc;
  background-image: repeating-linear-gradient(
    45deg,
    #d6e3c4,
    #d6e3c4 4px,
    #b0c59a 4px,
    #b0c59a 8px
  );
}

/* ボタンをサイズ揃えするために上書き */
.form-button-group > button {
  width: 140px;
  height: 48px;
  font-size: 18px;
  padding: 10px;
}

/* 全体のテキストカラーを黒系で統一 */
body,
input,
textarea,
button,
label,
h1, h2, h3, h4, h5, h6,
a {
  color: #2d2d2d !important; /* 明るすぎない柔らかい黒 */
}

/* Chromeなどの自動補完で文字が白くなる問題を解決 */
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input:-webkit-autofill:active {
  -webkit-text-fill-color: #2d2d2d !important;
  box-shadow: 0 0 0px 1000px #f7f0dc inset !important;
  background-color: #f7f0dc !important;
  transition: background-color 9999s ease-out;
}

何をしているか？

1. 全体の背景とフォント設定

.washitsu クラスで、畳風の斜めストライプ背景を repeating-linear-gradient で作成。
フォントには「M PLUS Rounded 1c」や「游明朝」など和風フォントを指定し、雰囲気を演出。

2. 掛け軸風タイトル（.kakejiku）

和紙をイメージした背景・縁取り・影で掛け軸のような外観に。
太文字とフォントで見た目も和風に。

3. 襖風のフォーム（.fusuma-form）

淡いベージュ系で襖（ふすま）を表現。
シャドウや縁取りで立体感を出している。

4. 畳ボタン（.tatami-button）

ボタンの背景・縁の色合いが畳のような雰囲気。
ホバー時に色が変わってインタラクションを演出。

5. 送信・戻るボタン（.form-submit-button, .button-back, .button-submit）

和紙や畳風のカラーを踏襲しつつ、サイズやホバー効果で操作感アップ。
.form-button-group でボタンサイズや配置を統一。

6. モーダル背景（.modal-bg）

背景にも畳柄を繰り返し適用して統一感を保つ。

7. 自動補完（Autofill）対策

Chromeなどで自動入力されたフィールドの文字色が白くなる問題に対応。

まとめ

このスタイル定義では、以下のような工夫を行っています：

• 背景には畳を意識したストライプパターンを使用
• フォントには「M PLUS Rounded 1c」など柔らかく和風な印象のものを指定
• 掛け軸をイメージしたタイトルデザイン
• 襖（ふすま）風のフォーム背景と縁取り
• 畳をイメージしたボタンとホバー効果
• モーダルや自動入力フィールドにも和風テイストを維持する工夫

CSSだけで日本らしさを表現したい方にとって、参考になるスタイルセットになれば幸いです...！