個人的備忘録：記事投稿イベントに参加している方へ、HTMLとCSSでシンプルかつ美しいメッセージページを作ってみた

## はじめに  
Web ページを作成する際、デザインをシンプルにしつつも洗練された印象を持たせることは重要です。

:::note info
**特に、ちょっとしたメッセージページやお知らせページでは、過度な装飾をせずに見やすさと伝わりやすさを意識することが求められます。**
:::

そこで本記事では、HTML と CSS を使って簡単に美しく仕上げる方法を紹介します。  

## 書こうと思ったきっかけ  
以前、簡単な Web ページを作成する機会がありましたが、デザインのちょっとした工夫で印象が大きく変わることを実感しました。

:::note warn
***特に `box-shadow` や `border-radius` を使うだけで、シンプルながら柔らかく洗練されたデザインに仕上がることに気づきました。***
:::

そこで、誰でもすぐに実装できるような HTML と CSS のサンプルコードを共有したいと思い、本記事を執筆しました。 

**完成はこんな感じです**

![Screenshot 2025-02-16 at 18.47.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/7ae7a64e-1cae-4595-a78b-ae574117aa01.png)

### 1. 基本的なHTML構成

まず、`<!DOCTYPE html>` を使用してHTML5の宣言を行い、ページの基本的な構造を作成します。

- `<head>` セクションでは、文字エンコーディング (`UTF-8`) を設定し、レスポンシブ対応のための`viewport`を指定。
- `<title>` 要素でページタイトル「お疲れ様でした！！」を設定。
- Google Fonts を利用して`Noto Sans JP`フォントを読み込み。

### 2. CSSでのスタイリング

このページでは、CSSを使用してデザインを整えています。以下の点に注目してください。

#### 2.1 ページ全体のデザイン

```css
body {
    font-family: 'Noto Sans JP', sans-serif;
    text-align: center;
    background-color: #f5f8fa;
    padding: 50px;
    margin: 0;
}
```

背景色は`#f5f8fa`という淡いグレー系の色を指定し、文字フォントに`Noto Sans JP`を適用。テキストの中央揃えや、余白の調整も行っています。

#### 2.2 コンテンツボックスのデザイン

```css
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
```

- `max-width: 800px;` → コンテンツの横幅を最大800pxに設定。
- `margin: 0 auto;` → ページの中央に配置。
- `border-radius: 10px;` → 角を丸くして柔らかい印象に。
- `box-shadow` → 影をつけて立体感を演出。

#### 2.3 メッセージ部分のデザイン

```css
.message {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    display: inline-block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-left: 5px solid #55c500;
}
```

- `font-size: 20px;` → 見やすいサイズに設定。
- `border-left: 5px solid #55c500;` → 左にアクセントとなる緑のラインを追加。
- `box-shadow` → 軽い影をつけて浮き上がらせる。

#### 2.4 ボタンデザイン

```css
.btn {
    margin-top: 20px;
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #55c500;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}
.btn:hover {
    background-color: #4aa300;
}
```

- `background-color: #55c500;` → 鮮やかな緑色を採用。
- `border-radius: 5px;` → 角を丸くして親しみやすいデザイン。
- `transition: background-color 0.3s;` → ホバー時の色変更をスムーズに。

### 3. 実際のページの内容

```html
<div class="container">
    <div class="message">
        記事投稿が完了した方は、ぜひ Organization 紐付けしましょう！！<br>
        お疲れ様でした！！
    </div>
    <br>
    <a href="#" class="btn">
        その努力は必ず誰かの心に響いています。<br>
        あなたの頑張りが、誰かの勇気になっているはずです！
    </a>
</div>
```

- `.container` 内に `.message` を配置し、メッセージを中央揃え。
- `.btn` をクリックできるボタンとして設置。

## 実際に完成したコード

```Qiita.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>お疲れ様でした！！</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
        
        body {
            font-family: 'Noto Sans JP', sans-serif;
            text-align: center;
            background-color: #f5f8fa;
            padding: 50px;
            margin: 0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 40px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .message {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            display: inline-block;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-left: 5px solid #55c500;
        }
        .btn {
            margin-top: 20px;
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            background-color: #55c500;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s;
            line-height: 1.6;
            text-align: center;
        }
        .btn:hover {
            background-color: #4aa300;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="message">
            記事投稿が完了した方は、ぜひ Organization 紐付けしましょう！！<br>
            お疲れ様でした！！
        </div>
        <br>
        <a href="#" class="btn">
            その努力は必ず誰かの心に響いています。<br>
            あなたの頑張りが、誰かの勇気になっているはずです！
        </a>
    </div>
</body>
</html>
```

### まとめ

このコードでは、シンプルながら洗練されたデザインのWebページを作成しました。
- `Noto Sans JP`フォントで日本語を美しく表示。
- `box-shadow` や `border-radius` を活用し、柔らかいデザイン。
- `hover`エフェクトを用いたボタンデザイン。

ちょっとしたメッセージページを作成する際に、ぜひ参考にしてください！