【6日でできるHTML入門】CSSによる角丸・影・半透明の指定

　近年のWebデザインでは、角を丸くしたり、要素に立体感を与える影を付けたり、さりげない半透明効果を使って奥行きを表現したりすることが多くなっています。これらはすべてCSSだけで実現可能で、ページの印象を大きく向上させるテクニックです。本記事「CSSによる角丸・影・半透明の指定」では、以下のプロパティを順に学習し、実際のHTMLサンプルとともに出力例・構文の解説を行います。

１．角丸の指定 — `border-radius`

素材のダウンロード

以下のリンクから画像素材をダウンロードできます。

posting-images ダウンロード

1.1. ショートハンドとロングハンド

プロパティ	説明
border-radius: R;	全ての角を半径 R の円弧で丸める。
border-radius: R1 R2;	上・下を R1、左右を R2 の半径で丸める。
border-radius: R1 R2 R3;	上 R1／左右 R2／下 R3 の順で丸める。
border-radius: R1 R2 R3 R4;	上→右→下→左をそれぞれ R1～R4 の半径で丸める。
border-top-left-radius: R;	左上だけ R の半径で丸める。
border-top-right-radius: R;	右上だけ R の半径で丸める。
border-bottom-right-radius: R;	右下だけ R の半径で丸める。
border-bottom-left-radius: R;	左下だけ R の半径で丸める。

補足
値には px のほか %（要素幅の割合）や em（フォントサイズの倍率）も指定可能です。
２つ値をスラッシュで区切ると、横半径／縦半径の楕円形状にできます（例：border-radius: 20px/10px;）。

ファイル名： lesson16-1.html

border-radius は要素の四隅を丸くするプロパティ。値に半径を指定します。

<!-- ファイル名: lesson16-1.html 🌼 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>角丸イメージ🌼</title>
  <style>
    img {
      border-radius: 25px; /* 四隅25pxの角丸 */
    }
  </style>
</head>
<body>
  <h1>四隅が丸い画像</h1>
  <img src="landscape.png" alt="風景写真">
</body>
</html>

ブラウザの出力例

画像の四隅が半径25pxで丸くカットされます。

1.2. 個別半径指定（上・右・下・左）

ファイル名： lesson16-2.html

4つの値を指定すると、それぞれ上→右→下→左の角丸半径になります。

<!-- ファイル名: lesson16-2.html 📦 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>個別角丸📦</title>
  <style>
    .box {
      width: 300px;
      padding: 16px;
      margin: 24px auto;
      background-color: #E0F7FA;
      border: solid 2px #006064;
      border-radius: 30px 10px 30px 10px;
      /* 上30px／右10px／下30px／左10px */
    }
  </style>
</head>
<body>
  <div class="box">
    border-radius: 30px 10px 30px 10px;<br>
    上→右→下→左それぞれ異なる半径
  </div>
</body>
</html>

ブラウザの出力例

boxの角が交互に大きさ違いの丸みを帯びます。

２．影の指定 — `box-shadow`

2.1. 基本構文と各パラメータ

項目	必須/省略	説明
offset-x	必須	影を右方向にずらす距離（負数で左にずらす）
offset-y	必須	影を下方向にずらす距離（負数で上にずらす）
blur-radius	省略可（0）	影のぼかし半径（大きいほどふんわり）
spread-radius	省略可（0）	影の広がり量（正で拡大／負で縮小）
color	省略可	影の色（未指定時は要素の色を使用）
inset	省略可	内側に影を落とす場合に指定

/* 基本例：外側に影 */
box-shadow: 8px 8px 16px 0 rgba(0,0,0,0.3);
/* inset を追加すると内側に影 */
box-shadow: inset 4px 4px 8px rgba(0,0,0,0.4);

2.2. 複数影の指定

/* カンマ区切りで複数の影を重ねられる */
box-shadow:
  4px 4px 8px rgba(0,0,0,0.2),
  -4px -4px 6px rgba(255,255,255,0.6) inset;

2.3. 内側の影 — `inset`

値	説明
`normal`	デフォルト。外側に影を落とす
`inset`	要素の内側に影を落として凹凸感を演出

ファイル名： lesson16-3.html

box-shadow は「横ずらし」「縦ずらし」「ぼかし」「拡散」「色」を順に指定。省略可の値もあります。

<!-- ファイル名: lesson16-3.html 🌟 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>外側の影🌟</title>
  <style>
    .card {
      width: 280px;
      padding: 16px;
      margin: 24px auto;
      background-color: #FFF8E1;
      border-radius: 8px;
      box-shadow: 10px 10px 15px #888888;
      /* 右10px／下10px／ぼかし15px／色#888 */
    }
  </style>
</head>
<body>
  <div class="card">
    box-shadow: 10px 10px 15px #888888;<br>
    外側にふわっとした影を付与
  </div>
</body>
</html>

ブラウザの出力例

box の右下側にぼかしの効いた灰色の影が付きます。

2.2. `box-shadow` 内側の影（`inset`）

ファイル名： lesson16-4.html

inset を付けると影が要素内側に描画されます。

<!-- ファイル名: lesson16-4.html 🔲 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>内側の影🔲</title>
  <style>
    .panel {
      width: 300px;
      padding: 16px;
      margin: 24px auto;
      background-color: #F3E5F5;
      border: solid 1px #4A148C;
      box-shadow: inset 5px 5px 10px #666666;
      /* 内側に右下5pxずつ、ぼかし10pxの影 */
    }
  </style>
</head>
<body>
  <div class="panel">
    box-shadow: inset 5px 5px 10px #666666;<br>
    要素の内側に影を落とす
  </div>
</body>
</html>

ブラウザの出力例

panel の内枠に陰影が付き、くぼんだ印象になります。

３．半透明の指定 — `opacity`

3.1. 要素全体を半透明にする `opacity`

opacity: 0〜1 で要素丸ごと透明度指定。文字も半透明になります。

値	説明
`0.0`	完全に透明（要素も文字も見えなくなる）
`0.x`	半透明（要素・文字ともに透けて見える）
`1.0`	完全不透明（透過なし。通常表示）

<div class="ghost">opacity: 0.3; 要素全体を半透明に</div>

<style>
.ghost {
  width:200px; padding:16px; margin:24px auto;
  background:#4DB6AC;
  opacity: 0.3;
  color: #004D40;
  text-align:center;
}
</style>

注意点
opacity は要素内の文字や子要素すべてに適用されます。
背景だけ半透明にしたい場合は、background-color: rgba(r,g,b,a); のように rgba() を使って背景色のみ透過させましょう。

ファイル名： lesson16-5.html

<!-- ファイル名: lesson16-5.html 🌫️ -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>要素の半透明🌫️</title>
  <style>
    .ghost {
      width: 280px;
      padding: 16px;
      margin: 24px auto;
      background-color: #B2EBF2;
      opacity: 0.5; /* 透明度50% */
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="ghost">
    opacity: 0.5;<br>
    要素全体が半透明になります
  </div>
</body>
</html>

ブラウザの出力例

ghost の背景・文字・枠線すべてが透けて見える状態に。

3.2. 背景だけ半透明にする `rgba()`

ファイル名： lesson16-6.html

文字をクリアに残しつつ背景だけ透過させたい場合は、背景色に rgba() を使います。

<!-- ファイル名: lesson16-6.html 💧 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>背景だけ半透明💧</title>
  <style>
    body {
      background: url("pattern.png");
    }
    .note {
      width: 300px;
      margin: 24px auto;
      padding: 16px;
      background-color: rgba(255,235,59,0.3);
      /* 背景イエローを透明度30%で */
      border-radius: 8px;
      box-shadow: 0 0 10px #999;
    }
  </style>
</head>
<body>
  <div class="note">
    background-color: rgba(255,235,59,0.3);<br>
    文字は不透明、背景だけ透けて見えます
  </div>
</body>
</html>

ブラウザの出力例

背景だけが半透明になり、下の模様が透けて見えます。

まとめ

プロパティ	用途
border-radius	四隅の丸みを指定（単一または個別半径）
box-shadow	要素への外側／内側（inset）の影
opacity	要素全体の透明度（0〜1）
background-color: rgba()	背景色だけ半透明（文字は不透明）

　角丸・影・半透明を適切に組み合わせることで、立体感や奥行きを演出し、より洗練されたデザインを実現できます。ぜひ制作に役立ててください！

【6日でできるHTML入門】CSSによる角丸・影・半透明の指定