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

以下に、記事本文としてそのまま使いやすい形で整理しました。

角を丸め、影で浮かせ、透明感で奥行きを作る。CSSの装飾指定で、やさしく洗練されたWebデザインに仕上げよう。

Webページの印象は、色や文字の大きさだけでなく、要素の形や立体感によっても大きく変わります。四角いボックスの角を少し丸くするだけで、画面全体がやわらかい雰囲気になります。影を付けると、カードや画像が少し浮き上がって見え、情報のまとまりが分かりやすくなります。半透明を使うと、背景をほんのり見せながら文字やボックスを重ねることができ、奥行きのあるデザインを作れます。

CSSでは、border-radiusで角丸、box-shadowで影、opacityで要素全体の透明度、rgbaで背景色だけの半透明を指定できます。これらの指定は、Webサイトのカード、写真、ボタン、案内ボックス、プロフィール欄、通知エリアなど、さまざまな場面で使われます。

ただし、装飾は多ければよいというものではありません。角丸を大きくしすぎると形が不自然になり、影を強くしすぎると画面が重く見えます。半透明も、文字まで薄くなってしまうと読みにくくなることがあります。大切なのは、見た目を整えながら、内容が読みやすい状態を保つことです。

ここでは、角丸、影、半透明の基本を、具体的なHTMLサンプルとともに確認していきます。最初は画像やボックスの角を丸くするところから始め、次に外側と内側の影、最後にopacityとrgbaの違いを学んでいきます。

素材のダウンロード

以下のリンクから画像素材をダウンロードできます。
※ウイルス対策ソフト ESET でチェックしておりますが、ダウンロードは自己責任でお願いします。

css-corners-shadows-transparencyダウンロード
landscape-photo.pngsoft-pattern.png

border-radiusで角を丸くする

border-radiusは、要素の角を丸くするためのCSSです。画像、ボックス、ボタン、カードなどに指定できます。角が丸くなると、全体の印象がやわらかくなり、親しみやすいデザインになります。

たとえば、画像にborder-radiusを指定すると、四隅が丸く切り取られたように表示されます。

img {
  border-radius: 24px;
}

この指定では、画像の四隅が24pxの半径で丸くなります。数値が小さいほど少しだけ丸くなり、数値が大きいほど丸みが強くなります。

border-radiusの基本指定

指定方法説明
border-radius: 20px;四隅すべてを同じ丸みにする
border-radius: 20px 10px;角ごとに異なる丸みを付ける
border-radius: 20px 10px 30px;複数の角に異なる丸みを指定する
border-radius: 20px 10px 30px 5px;四隅をそれぞれ個別に指定する

border-radiusに4つの値を指定する場合は、左上、右上、右下、左下の順番で指定します。CSSの上下左右指定では、時計回りに考える場面が多いため、この順番に慣れておくと理解しやすくなります。

個別の角を指定するプロパティ

CSS対象
border-top-left-radius左上の角
border-top-right-radius右上の角
border-bottom-right-radius右下の角
border-bottom-left-radius左下の角

すべての角を同じ丸みにしたい場合はborder-radiusを使います。特定の角だけを調整したい場合は、個別プロパティを使うと分かりやすくなります。

画像の四隅を丸くする

まずは、画像の四隅を丸くする例を見ていきましょう。写真に角丸を付けると、やわらかく落ち着いた印象になります。観光案内、ギャラリー、プロフィール画像などでよく使われる表現です。

ファイル名： Lesson16-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>角丸の風景写真</title>
  <style>
    body {
      font-family: sans-serif;
      background-color: #FAFAFA;
      text-align: center;
    }

    img.landscape {
      width: 360px;
      height: auto;
      border-radius: 25px;
    }
  </style>
</head>
<body>
  <h1>角丸でやわらかく見せる写真</h1>
  <img src="landscape-photo.png" alt="湖と山の風景写真" class="landscape">
</body>
</html>

ブラウザの表示例

このHTMLでは、img要素にlandscapeというclassを付けています。CSSでは、width: 360px;で画像の横幅を指定し、height: auto;で縦横比を保っています。

border-radius: 25px;を指定しているため、画像の四隅が丸く表示されます。写真のような四角い要素は、そのままだと少し硬い印象になることがあります。角丸を加えることで、画面になじみやすく、やさしい見た目になります。

画像の角丸は、写真一覧やカード型デザインでもよく使われます。角丸の数値を小さくすると控えめな印象になり、大きくすると丸みが強いデザインになります。ページ全体の雰囲気に合わせて調整しましょう。

図1：border-radiusで角丸を作る

この図から分かること

border-radiusを使うと、画像やボックスの角を丸くできます。角丸を少し加えるだけでも、四角い要素の硬さがやわらぎ、親しみやすい印象になります。画像、カード、ボタンなど、さまざまな要素に使える基本的な装飾です。

四隅の丸みを個別に変える

border-radiusは、四隅を同じ丸みにするだけでなく、角ごとに違う丸みを指定することもできます。これにより、少し動きのあるデザインや、個性的なボックスを作れます。

4つの値を指定する場合は、左上、右上、右下、左下の順番です。

.box {
  border-radius: 30px 10px 30px 10px;
}

この指定では、左上と右下が30px、右上と左下が10pxになります。交互に丸みが変わるため、少しリズムのある形になります。

ファイル名： Lesson16-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>角ごとに丸みを変えるボックス</title>
  <style>
    body {
      font-family: sans-serif;
      background-color: #F5F5F5;
    }

    .info-box {
      width: 320px;
      margin: 32px auto;
      padding: 18px;
      background-color: #E0F7FA;
      border: solid 2px #006064;
      border-radius: 32px 8px 32px 8px;
      line-height: 1.7;
    }
  </style>
</head>
<body>
  <div class="info-box">
    border-radiusに4つの値を指定すると、四隅の丸みを個別に変えられます。
    形に変化が生まれ、少し印象的なボックスになります。
  </div>
</body>
</html>

この図から分かること

この例では、info-boxにborder-radius: 32px 8px 32px 8px;を指定しています。左上と右下は大きく丸くなり、右上と左下は少しだけ丸くなります。

角丸の指定を変えると、同じ四角いボックスでも雰囲気が変わります。やわらかい雰囲気にしたいときはすべての角を同じように丸くし、少しデザイン性を出したいときは角ごとに丸みを変えるとよいでしょう。

ただし、角ごとの違いが大きすぎると、本文より形のほうが目立ってしまうことがあります。学習段階では大きめの値で違いを確認し、実際のページでは控えめに調整すると自然に仕上がります。

border-radiusで使える単位

border-radiusには、pxだけでなく、%やemも指定できます。

単位説明使いやすい場面
px固定された半径で角を丸めるカード、画像、ボタン
%要素の大きさに対する割合で丸める丸い画像や円形のボタン
em文字サイズを基準に丸める文字サイズに合わせたボタン

たとえば、正方形の画像にborder-radius: 50%;を指定すると、円形の画像を作れます。プロフィール写真などでよく使われる指定です。

.profile {
  width: 160px;
  height: 160px;
  border-radius: 50%;
}

このように、border-radiusは単なる角丸だけでなく、円形や楕円形の表現にも使えます。

また、スラッシュを使うと横方向と縦方向の半径を分けて指定できます。

.box {
  border-radius: 30px / 15px;
}

この指定では、横方向の丸みと縦方向の丸みが異なるため、楕円に近い角丸になります。最初は通常のpx指定から学び、慣れてきたら%やスラッシュ指定も試してみると理解が深まります。

box-shadowで影を付ける

box-shadowは、要素に影を付けるためのCSSです。カード、画像、ボタン、パネルなどに影を付けると、背景から少し浮き上がったように見えます。

影は、情報のまとまりを見せるためにも役立ちます。たとえば、カード型のレイアウトでは、影を少し付けることで、1つのカードとして認識しやすくなります。

box-shadowの基本構文

.card {
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.25);
}

box-shadowでは、主に次の値を指定します。

項目説明
offset-x影を横方向にずらす距離
offset-y影を縦方向にずらす距離
blur-radius影のぼかし具合
spread-radius影の広がり
color影の色
inset内側の影にする指定

offset-xが正の値なら右に、負の値なら左に影がずれます。offset-yが正の値なら下に、負の値なら上に影がずれます。blur-radiusを大きくすると、影がふんわり広がります。

影の値による印象の違い

指定の傾向印象
ずらしが小さい控えめで自然な影
ずらしが大きい強く浮き上がる印象
ぼかしが小さいはっきりした影
ぼかしが大きいやわらかい影
濃い色重く目立つ影
薄い色軽く自然な影

影は強くしすぎると古いデザインや重たい印象になりやすいため、やや薄めに指定すると自然に見えます。rgbaを使って透明度のある黒を指定すると、やわらかい影を作りやすくなります。

図2：box-shadowで要素に立体感を出す

この図から分かること

box-shadowを使うと、要素に影を付けて立体感を出せます。横方向と縦方向のずれ、ぼかし、色を組み合わせることで、影の見え方を調整できます。カードや画像に少し影を付けると、情報のまとまりが分かりやすくなります。

外側に影を付けたカードを作る

次は、ボックスに外側の影を付ける例です。カード型のデザインでは、角丸と影を組み合わせることで、見やすく整った印象になります。

ファイル名： Lesson16-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>影付きのお知らせカード</title>
  <style>
    body {
      font-family: sans-serif;
      background-color: #F5F5F5;
    }

    .news-card {
      width: 300px;
      margin: 36px auto;
      padding: 20px;
      background-color: #FFF8E1;
      border-radius: 10px;
      box-shadow: 10px 10px 18px rgba(0, 0, 0, 0.25);
      line-height: 1.7;
    }
  </style>
</head>
<body>
  <div class="news-card">
    box-shadowを指定すると、カードが背景から少し浮き上がったように見えます。
    影を薄めにすると、自然で読みやすい印象になります。
  </div>
</body>
</html>

この図から分かること

このHTMLでは、news-cardにbox-shadowを指定しています。

box-shadow: 10px 10px 18px rgba(0, 0, 0, 0.25);

最初の10pxは横方向のずれです。影が右に10px移動します。次の10pxは縦方向のずれです。影が下に10px移動します。18pxはぼかしの大きさです。値が大きいほど、影はふんわり広がります。

影の色にはrgba(0, 0, 0, 0.25)を使っています。これは、黒を25%の濃さで表示する指定です。真っ黒な影にすると強すぎることがありますが、rgbaで透明度を下げると自然な影になります。

また、このカードにはborder-radiusも指定しています。角丸と影を組み合わせることで、やわらかく立体感のあるカードになります。

複数の影を重ねる

box-shadowでは、カンマで区切ることで複数の影を重ねられます。外側の影と内側の光、または濃い影と薄い影を重ねることで、より繊細な表現ができます。

.card {
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.2),
    -3px -3px 8px rgba(255, 255, 255, 0.8);
}

この例では、右下に薄い黒い影を付け、左上に白っぽい光のような影を重ねています。背景色やカードの色によって見え方が変わるため、実際にブラウザで確認しながら調整するとよいでしょう。

複数の影は便利ですが、指定が多くなるとデザインが複雑になります。まずは1つの影で自然に見える指定を練習し、慣れてから複数の影に進むと分かりやすくなります。

insetで内側に影を付ける

box-shadowにinsetを付けると、影が要素の内側に表示されます。外側の影は要素が浮いているように見えますが、内側の影はくぼんでいるような印象になります。

.panel {
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.35);
}

insetは、フォームの入力欄、押し込まれたボタン、内側にへこんだパネルのような表現に使えます。

ファイル名： Lesson16-4.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>内側の影を使ったパネル</title>
  <style>
    body {
      font-family: sans-serif;
      background-color: #FAFAFA;
    }

    .inset-panel {
      width: 320px;
      margin: 36px auto;
      padding: 20px;
      background-color: #F3E5F5;
      border: solid 1px #6A1B9A;
      border-radius: 10px;
      box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.35);
      line-height: 1.7;
    }
  </style>
</head>
<body>
  <div class="inset-panel">
    insetを指定すると、影が要素の内側に表示されます。
    パネルが少しへこんだような印象になります。
  </div>
</body>
</html>

この図から分かること

この例では、box-shadowの先頭にinsetを指定しています。これにより、影はボックスの外側ではなく内側に描画されます。

外側の影はカードを浮かせたいときに向いています。内側の影は、入力欄や押し込まれたようなボタン、くぼんだ表示エリアなどに向いています。

ただし、内側の影は強くしすぎると文字が読みにくくなることがあります。本文が入る要素では、影を薄めにするか、文字の周辺に暗い影がかかりすぎないように調整しましょう。

opacityで要素全体を半透明にする

opacityは、要素全体の透明度を指定するCSSです。値は0から1の範囲で指定します。

値表示
0完全に透明
0.550%の透明度
1完全に不透明

opacityを指定すると、背景だけでなく、文字や画像、子要素も含めて要素全体が半透明になります。

.box {
  opacity: 0.5;
}

この指定では、boxの背景、文字、枠線などがすべて半透明になります。

opacityを使うときの注意点

opacityは便利ですが、文字まで薄くなる点に注意が必要です。案内ボックスや本文にopacityを使うと、背景と一緒に文字も薄くなり、読みにくくなることがあります。

背景だけを半透明にしたい場合は、opacityではなくrgbaを使います。opacityは要素全体を透けさせたいとき、rgbaは背景色だけを透けさせたいときに使い分けましょう。

要素全体を半透明にする

次の例では、ボックス全体にopacityを指定します。背景色だけでなく、文字も一緒に半透明になることを確認しましょう。

ファイル名： Lesson16-5.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>要素全体の半透明</title>
  <style>
    body {
      font-family: sans-serif;
      background-color: #ECEFF1;
    }

    .transparent-box {
      width: 300px;
      margin: 36px auto;
      padding: 20px;
      background-color: #80DEEA;
      color: #004D40;
      text-align: center;
      border-radius: 10px;
      opacity: 0.5;
    }
  </style>
</head>
<body>
  <div class="transparent-box">
    opacity: 0.5を指定すると、背景も文字も半透明になります。
  </div>
</body>
</html>

この図から分かること

このHTMLでは、transparent-boxにopacity: 0.5;を指定しています。その結果、背景色だけでなく、文字も50%の透明度になります。

装飾としては分かりやすい効果ですが、本文や重要な案内文に使うと読みにくくなる場合があります。opacityは、非アクティブなボタン、薄く見せたい補助要素、重ね合わせ表現などで使うと効果的です。

重要な文字をはっきり読ませたい場合は、次に紹介するrgbaを使って、背景だけを半透明にするほうが向いています。

図3：opacityとrgbaの違い

この図から分かること

opacityは要素全体を半透明にするため、背景だけでなく文字も薄くなります。一方、rgbaを背景色に使うと、背景だけを半透明にして文字ははっきり表示できます。本文を読みやすく保ちたい場合は、rgbaを使うほうが適しています。

rgbaで背景だけを半透明にする

背景だけを半透明にしたい場合は、background-colorにrgbaを使います。rgbaは、赤、緑、青、透明度を指定する色の書き方です。

.note {
  background-color: rgba(255, 235, 59, 0.35);
}

rgbaの最後の値が透明度です。0は完全に透明、1は完全に不透明です。0.35なら35%の濃さで背景色が表示されます。

opacityとrgbaの違い

指定透明になる範囲文字の読みやすさ
opacity要素全体文字も薄くなる
rgba指定した色だけ文字はそのまま表示できる

背景画像の上に文章ボックスを置く場合は、rgbaがとても便利です。背景を少し透けさせながら、文字はしっかり読ませることができます。

ファイル名： Lesson16-6.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>背景だけ半透明のメモ</title>
  <style>
    body {
      font-family: sans-serif;
      background-image: url(soft-pattern.png);
      background-repeat: repeat;
    }

    .clear-note {
      width: 320px;
      margin: 40px auto;
      padding: 20px;
      background-color: rgba(255, 245, 157, 0.45);
      border-radius: 12px;
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
      line-height: 1.7;
    }
  </style>
</head>
<body>
  <div class="clear-note">
    rgbaを使うと、背景だけを半透明にできます。
    文字は不透明のままなので、読みやすさを保ちながら背景の模様を見せられます。
  </div>
</body>
</html>

この図から分かること

この例では、bodyにsoft-pattern.pngを背景画像として指定しています。その上にclear-noteというボックスを配置し、background-color: rgba(255, 245, 157, 0.45);を指定しています。

この指定により、ボックスの背景だけが半透明になります。下の模様がほんのり透けて見えますが、文字は薄くなりません。そのため、背景の雰囲気を活かしながら、文章の読みやすさも保てます。

また、clear-noteにはborder-radiusとbox-shadowも指定しています。角丸でやわらかさを出し、影で背景から少し浮かせています。角丸、影、半透明を組み合わせると、シンプルなボックスでも洗練された見た目になります。

角丸・影・半透明を組み合わせるときの考え方

border-radius、box-shadow、opacity、rgbaは、それぞれ単独でも使えますが、組み合わせることでより自然なデザインを作れます。

たとえば、カード型の情報ボックスでは、次のような組み合わせがよく使われます。

.card {
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

この指定では、背景を少し半透明にし、角を丸くし、下方向に薄い影を付けています。背景画像の上にカードを置くようなデザインに向いています。

組み合わせ方の例

目的使うCSS効果
やわらかいカードを作るborder-radius角が丸くなり親しみやすくなる
背景から浮かせるbox-shadowカードのまとまりが分かりやすくなる
要素全体を薄く見せるopacity非アクティブな印象を作れる
背景だけ透かすrgba文字の読みやすさを保てる

装飾を組み合わせるときは、控えめに使うことが大切です。角丸、影、半透明のすべてを強くすると、かえって見にくくなることがあります。角丸は自然な丸み、影は薄くやわらかく、半透明は文字が読める範囲にするのが基本です。

学習で使う主なCSSの整理

ここまでに登場したCSSを整理しておきます。

CSS用途指定例
border-radius角を丸くするborder-radius: 12px;
border-top-left-radius左上だけ丸くするborder-top-left-radius: 20px;
border-top-right-radius右上だけ丸くするborder-top-right-radius: 20px;
border-bottom-right-radius右下だけ丸くするborder-bottom-right-radius: 20px;
border-bottom-left-radius左下だけ丸くするborder-bottom-left-radius: 20px;
box-shadow外側に影を付けるbox-shadow: 8px 8px 16px rgba(0, 0, 0, 0.25);
box-shadow inset内側に影を付けるbox-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.35);
opacity要素全体を半透明にするopacity: 0.5;
background-color: rgba背景色だけを半透明にするbackground-color: rgba(255, 255, 255, 0.8);

border-radiusは形をやわらかく見せるCSSです。box-shadowは要素に立体感や奥行きを加えるCSSです。opacityは要素全体を半透明にし、rgbaは背景色だけを半透明にできます。

この違いを理解しておくと、どの場面でどのCSSを使えばよいか判断しやすくなります。

使用タグ一覧と解説

この学習で登場した主なHTMLタグを整理しておきます。

タグ用途主な属性
<html>HTML文書全体を表すlang
<head>文字コードやタイトルなどの情報を書くなし
<meta>文字コードを指定するcharset
<title>ブラウザのタブに表示されるタイトルを指定するなし
<style>HTML内にCSSを書くなし
<body>ブラウザに表示される内容を書くなし
<h1>大きな見出しを表すなし
<img>画像を表示するsrc、alt、class
<div>汎用的なまとまりを作るclass

imgは画像を表示するタグです。srcには画像ファイル名、altには画像の説明を指定します。CSSでborder-radiusを指定すると、画像の角を丸くできます。

divは、カードやパネルのようなまとまりを作るときによく使います。classを付けることで、特定のdivだけに角丸、影、半透明などの装飾を指定できます。

styleは、HTMLファイルの中にCSSを書くためのタグです。学習用の短いサンプルでは、HTMLとCSSの関係を同じファイル内で確認できるため便利です。

デザインとして使うときに意識したいこと

角丸、影、半透明は、Webページを今風で見やすい印象にするために役立ちます。ただし、どれも使いすぎると、かえって画面がにぎやかになりすぎます。

角丸は、ページ全体の雰囲気に合わせて数値を決めると自然です。落ち着いたページでは小さめの角丸、親しみやすいページでは少し大きめの角丸が合います。

影は、薄く自然に付けるのが基本です。濃く大きな影は強い印象になるため、重要なカードや目立たせたいボタンなどに絞って使うとよいでしょう。

半透明は、文字の読みやすさを最優先に考えます。opacityを使うと文字も薄くなるため、本文には注意が必要です。背景だけを透けさせたい場合は、rgbaを使うと読みやすさを保ちやすくなります。

角丸で形を整え、影で奥行きを加え、半透明で背景との重なりを表現することで、シンプルなHTMLでも見た目の完成度を高められます。