🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSSテンプレート：角丸ボタン（border-radius + background）

📝 使用用途

このテンプレートは、ユーザーに視認性の高い操作ボタンを提供したい場面で使います。装飾も簡単なので初心者にも応用できます。

📘 解説

border-radius で角を丸くし、background-color で色を付けたボタンをCSSで実装しています。フォーム送信ボタンやリンクボタンなどに活用できます。

🔹 部分コード

<button class="rounded-button">クリック</button>

<style>
  .rounded-button {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    cursor: pointer;
  }
</style>

🔸 HTML全体コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>角丸ボタン</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    .rounded-button {
      background-color: #28a745;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 12px;
      font-size: 1rem;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button class="rounded-button">クリック</button>
</body>
</html>
コピーしました！

🎯 角丸ボタンのデザイン応用テクニック

角丸ボタンはモダンなUIデザインの基本要素です。border-radiusを使ったこのシンプルなテクニックは、ユーザーインターフェースの使いやすさを大幅に向上させます。

🌈 カスタマイズのポイント

border-radiusの値を調整することで、ボタンの印象を大きく変えられます。5px程度の小さな値はビジネス向け、25pxのような大きな値はフレンドリーな印象に。完全な円形ボタンを作るには50%を指定します。背景色は#28a745（緑）だけでなく、#007bff（青）や#dc3545（赤）など、用途に応じて変更可能です。

✨ インタラクションの追加

基本のボタンに:hoverや:activeのスタイルを追加すると、よりインタラクティブなUIになります。例えば.rounded-button:hover { background-color: #218838; transform: scale(1.05); }とすると、ホバー時に色が濃くなり少し拡大します。transitionプロパティを追加すれば、これらの変化を滑らかにできます。

📱 レスポンシブ対応のコツ

モバイルデバイスでは、ボタンのpaddingを大きく（15px 30pxなど）するとタップしやすくなります。メディアクエリを使って@media (max-width: 768px) { .rounded-button { padding: 15px 30px; } }のように調整すると良いでしょう。また、フォントサイズも画面幅に応じて変更可能です。

角丸ボタンはシンプルながら効果的なUI要素ですが、1つのページで多用すると却って目立たなくなるので注意が必要です。主要なアクションボタンなど、本当に重要な要素に限定して使用しましょう。

関連テンプレート