はじめに
Web ページを作成する際、デザインをシンプルにしつつも洗練された印象を持たせることは重要です。
特に、ちょっとしたメッセージページやお知らせページでは、過度な装飾をせずに見やすさと伝わりやすさを意識することが求められます。
そこで本記事では、HTML と CSS を使って簡単に美しく仕上げる方法を紹介します。
書こうと思ったきっかけ
以前、簡単な Web ページを作成する機会がありましたが、デザインのちょっとした工夫で印象が大きく変わることを実感しました。
特に box-shadow や border-radius を使うだけで、シンプルながら柔らかく洗練されたデザインに仕上がることに気づきました。
そこで、誰でもすぐに実装できるような HTML と CSS のサンプルコードを共有したいと思い、本記事を執筆しました。
完成はこんな感じです
1. 基本的なHTML構成
まず、<!DOCTYPE html> を使用してHTML5の宣言を行い、ページの基本的な構造を作成します。
-
<head>セクションでは、文字エンコーディング (UTF-8) を設定し、レスポンシブ対応のためのviewportを指定。 -
<title>要素でページタイトル「お疲れ様でした！！」を設定。 - Google Fonts を利用して
Noto Sans JPフォントを読み込み。
2. CSSでのスタイリング
このページでは、CSSを使用してデザインを整えています。以下の点に注目してください。
2.1 ページ全体のデザイン
body {
font-family: 'Noto Sans JP', sans-serif;
text-align: center;
background-color: #f5f8fa;
padding: 50px;
margin: 0;
}
背景色は#f5f8faという淡いグレー系の色を指定し、文字フォントにNoto Sans JPを適用。テキストの中央揃えや、余白の調整も行っています。
2.2 コンテンツボックスのデザイン
.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 メッセージ部分のデザイン
.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 ボタンデザイン
.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. 実際のページの内容
<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エフェクトを用いたボタンデザイン。
ちょっとしたメッセージページを作成する際に、ぜひ参考にしてください！