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

CSS: 枠線付きボックス border: 1px solid #ccc; padding: 10px;

📝 使用用途

このテンプレートでは、CSSを使って枠線とパディングを持つボックスを作成する方法を紹介します。

📘 解説

上記のCSSコードでは、border: 1px solid #ccc;を使ってボックスに枠線を、padding: 10px;を使って内側の余白を追加しています。

🔹 部分コード

このボックスに枠線とパディングを適用しています。

<div class="demo-area">
  <p>このボックスに枠線とパディングを適用しています。</p>
</div>

<style>
  .demo-area {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    width: 300px;
    margin: 20px auto;
  }
</style>

💻 完全動作コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS: 枠線付きボックス border: 1px solid #ccc; padding: 10px;</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    .demo-area {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: center;
      width: 300px;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <div class="demo-area">
    <p>このボックスに枠線とパディングを適用しています。</p>
  </div>
</body>
</html>
コピーしました！
```html

📌 枠線ボックスの実践的活用術

シンプルな枠線ボックスは、ウェブデザインの基本要素として様々な場面で活用できます。borderとpaddingの組み合わせは、コンテンツを視覚的に区切りつつ、適度な余白を与えるのに最適です。

🎨 デザインのバリエーション

枠線のスタイルを変更するだけで、全く異なる印象を作れます。border: 2px dashed #999;で点線に、border: 3px double #333;で二重線に変更可能です。また、border-radius: 8px;を追加すると角丸の優しい印象に変わります。

📱 レスポンシブ対応のポイント

モバイル対応では、padding: 5px;のようにパディングを減らすと良いでしょう。メディアクエリを使って@media (max-width: 768px) { .demo-area { width: 90%; padding: 8px; } }とすると、スマホでも見やすいレイアウトになります。

枠線ボックスは、注意書きや補足情報の表示、フォームの入力欄グループ、商品の特徴説明など、様々なコンテンツの囲みに使えます。背景色をbackground-color: #f9f9f9;のように設定すると、さらに目立たせることが可能です。

重要なのは、サイト全体で枠線スタイルを統一することです。色や太さ、角丸の有無などを一貫させることで、プロフェッショナルな印象を与えることができます。また、影を追加するbox-shadow: 0 2px 4px rgba(0,0,0,0.1);と組み合わせると、立体感が出てより目立たせられます。

```

関連テンプレート