CSSボックススタイル完全ガイド｜border-radius・box-shadow・overflowの基本と応用テクニック

ながみえ

HTML/CSSレッスン2-6『ボックススタイルを変更しよう』記事用アイキャッチ画像

一つ前の章ではボックスモデルについて学習しました。

今回はボックススタイルの変更方法について見ていきましょう。

Lesson2-1：CSS学習の入り口｜文字に色を付けよう
Lesson2-2：CSSを読み込む３つの方法
Lesson2-3：テキストスタイルを変更しよう
Lesson2-4：４種類のセレクタを使いこなそう
Lesson2-5：ボックスモデルを理解しよう
Lesson2-6：ボックススタイルを変更しよう ◁今回はココ
Lesson2-7：継承とカスケードを理解しよう

ウェブページのレイアウトやデザインを作成する際、ボックスモデルの基本を理解することは非常に重要です。

しかし基本的な「コンテンツ」「ボーダー」「パディング」「マージン」だけでは、デザインに柔軟性を持たせることが難しい場合があります。

そこでボックススタイルを活用することで、より洗練されたデザインを実現できます。

例えばコンテンツがはみ出してしまったときの処理や、ボックスの角を丸めたり、影をつけたりすることで、ユーザーにとって視覚的に心地よいデザインを提供できます。

本レッスンではoverflow、border-radius、box-shadow といった、ボックスのスタイリングに関わる主要なプロパティについて詳しく解説していきます。

これらのプロパティを理解し、適切に活用することで、より魅力的なウェブデザインが可能になります。

<<前のページ

HTML/CSSレッスン2-5『ボックスモデルを理解しよう』記事用アイキャッチ画像

HTML/CSSの記事一覧

HTML/CSS学習カテゴリの親ページ用アイキャッチ画像（Webサイト制作入門）、記事一覧へのリンク案内

次のページ>>

HTML/CSSレッスン2-7『継承とカスケードを理解しよう』記事用アイキャッチ画像

CSSボックススタイルの基本プロパティ解説

ボックスのスタイルを設定する際に、CSSにはさまざまなプロパティがあります。

ここでは特に重要な以下のプロパティについて解説します。

【CSS】勉強猫がノートパソコンを前にして学習を始める様子。記事内の学習スタート用イラスト

overflowプロパティとは？スクロールや非表示を自在に操る

overflow プロパティは、ボックスの内容が指定したサイズを超えた場合にどのように表示するかを決定します。

以下の4つの値がよく使用されます。

値	説明
`visible`	内容がはみ出してもそのまま表示（デフォルト値）
`hidden`	はみ出た内容を隠す
`scroll`	常にスクロールバーを表示
`auto`	内容がはみ出た場合のみスクロールバーを表示

例えば、以下のHTMLコードをブラウザ表示してみて下さい。

<div style="width: 200px; height: 50px; overflow: hidden; border: 1px solid black;">
  このテキストはボックスのサイズを超えて表示されるので、見えなくなります。
</div>

HTMLとCSSで作成されたボックスモデルの例。「このテキストはボックスのサイズを超えて表示される」と書かれたテキストが、枠線付きのボックスからはみ出して表示されている。

overflowプロパティを活用することで、コンテンツの表示をコントロールし、見た目を整えることができます。

「border-radiusで角丸デザインを作る方法

border-radius プロパティは、ボックスの角を丸くするために使用されます。

ボーダーの角を滑らかにすることで、柔らかいデザインを実現できます。

<div style="width: 100px; height: 100px; background-color: lightblue; border-radius: 20px;">
    角が丸いボックス
</div>

border-radius: 10px;

HTMLとCSSで作成された「角が丸いボックス」の表示例。水色の背景色で、角が丸くデザインされたボックス内に「角が丸いボックス」とテキストが表示されている。

さらに、以下のように異なる角を個別に設定することも可能です。

border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 0;

このプロパティを使うことで、ボタンや画像のデザインをより魅力的に仕上げることができます。

box-shadowで立体感のある影をつける

box-shadow プロパティを使用すると、ボックスに影をつけることができます。

影をつけることで、要素に立体感や視覚的な階層を与えることができます。

<div style="width: 150px; height: 150px; background-color: lightgray; box-shadow: 5px 5px 10px rgba(0,0,0,0.5);">
    影付きボックス
</div>

box-shadow: 水平距離 垂直距離 ぼかしの強さ 広がりの範囲 色;

HTMLとCSSで作成された「影付きボックス」の表示例。灰色のボックスに「影付きボックス」と表示され、ボックスの下と右に影が付いている。

上記の例では右下にぼかしのある黒い影を設定しています。

影のぼかし具合や広がりの調整によって、さまざまな表現が可能になります。

コードを書いてみよう

以下のように表示されるボックスを作成してみましょう。

HTMLとCSSで作成された「カスタマイズされたボックス」の表示例。黄色の背景で角が丸く、影が付いたボックスに「カスタマイズされたボックス」と表示されている。

正解コードはこちらをクリック

<div style="width: 200px; height: 100px; background-color: #ffcc00; border-radius: 15px; box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.6); overflow: hidden; padding: 20px;">
    カスタマイズされたボックス
</div>

CSSボックススタイル応用テクニック集

これまで学んだボックススタイルの基本プロパティを活用し、実際のウェブデザインにどのように応用できるかを見ていきましょう。

この章では、overflow、border-radius、box-shadow を組み合わせた具体的なデザインテクニックを紹介します。

是非実際にブラウザ表示し、内容を確認してください。

overflowを使ったスクロール可能なボックスを作成

overflow プロパティを使用すると、内容が多い場合にスクロール可能なボックスを作成できます。

これによりスペースを効率的に活用しながら、ユーザーが必要な情報にアクセスしやすくなります。

<div style="width: 250px; height: 150px; overflow: auto; border: 1px solid #333; padding: 10px;">
    <p>
        これはスクロール可能なコンテンツです。長いテキストが表示されると、スクロールバーが自動的に追加されます。
        スペースを節約しつつ、情報をコンパクトに表示できます。
    </p>
</div>

このテクニックはブログ記事のリストや製品説明など、スペースが限られたエリアに適しています。

border-radiusを使った角丸カードデザイン

カードUIデザインでは、border-radius を使用して要素の角を丸めることで、柔らかくモダンなデザインを実現できます。

<div style="width: 300px; padding: 20px; background-color: #f9f9f9; border-radius: 15px; border: 1px solid #ddd;">
    <h3>カードタイトル</h3>
    <p>このボックスは角が丸く、柔らかい印象を与えます。</p>
</div>

このデザインはプロフィールカードや商品紹介カードなど、視覚的に魅力的なコンテンツを提供する際に便利です。

box-shadowで影をつけたカードレイアウト作成

border-radius、box-shadow、overflow を組み合わせて、洗練されたカードレイアウトを実現できます。

<div style="width: 280px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); overflow: hidden; border: 1px solid #ddd;">
    <img src="#" alt="カード画像" style="width: 100%;">
    <div style="padding: 15px;">
        <h3>カードタイトル</h3>
        <p>これはボーダー半径と影を組み合わせたカードデザインです。</p>
    </div>
</div>

このデザインはニュース記事や製品リストなど、情報を整理して見せたい場面に適しています。

まとめ

この章では、overflow、border-radius、box-shadow を活用した応用テクニックについて学びました。

これらのプロパティを組み合わせることで、実践的なウェブデザインが可能になります。

自分のプロジェクトで試しながら、デザインの幅を広げていきましょう！

CSSボックススタイルまとめ｜基本から応用まで

今回のレッスンでは、CSSにおけるボックススタイルの基本と応用について学びました。

特に、次の3つの重要なプロパティを詳しく解説しました。

overflow プロパティ
- コンテンツがはみ出したときの処理方法として、visible、hidden、scroll、auto を適切に使い分けることで、見やすいレイアウトを実現できるようになりました。
border-radius プロパティ
- 要素の角を丸くすることで、柔らかいデザインやモダンなUIを作成する方法を学びました。
box-shadow プロパティ
- 要素に影をつけることで、立体感や視覚的な強調を加えるテクニックを習得しました。

これらのプロパティを適切に組み合わせることで、シンプルながらも洗練されたウェブデザインが可能になります。

次のステップ

次のレッスンでは、CSSの「継承とカスケード」について学びます。

継承をうまく活用し、スタイルの適用順序を理解することで、より効率的なCSSコーディングが可能になります。

ウェブデザインのスキルを磨くために、今回学んだボックススタイルのプロパティを実際に試してみましょう！

引き続き、頑張ってください！

FAQ｜CSSボックススタイルに関するよくある質問

Q1. border-radiusを使ったのに角が丸くなりません。なぜですか？

border-radiusが効かない場合は、要素のサイズが設定されていないか、overflowが正しく設定されていない可能性があります。

特に画像に対して角丸を適用する場合は、overflow: hidden;を親要素に設定することでうまく表示できます。

Q2. box-shadowで影をつけたのに見えません。何が原因ですか？

box-shadowが表示されない場合は以下を確認しましょう：

背景色が同じで影が目立たない場合があります。background-colorを変えてみてください。
要素にpositionやz-indexを設定することで影が隠れる問題を防げます。

Q3. overflowのautoとscrollの違いは何ですか？

autoは内容がはみ出した場合のみスクロールバーが表示されますが、scrollは内容に関係なく常にスクロールバーが表示されます。

多くの場合、ユーザー体験を考慮してautoが推奨されます。

Q4. ボックスの角を丸くして影をつけたカードデザインを作りたいのですが、うまくいきません。どんな順番でCSSを組めばいいですか？

以下の順序で記述するとうまくいきます：

.card {
  width: 300px;
  height: 200px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden; /* 画像をはみ出させない */
}

画像を含む場合は、画像にもwidth: 100%; height: 100%; object-fit: cover;を設定しましょう。

Q5. ボックスモデルの仕組みがよくわかりません。基本から学びたいです。

ボックススタイルを理解するためには、まず「Lesson2-5：ボックスモデルを理解しよう」を確認してください。

ボックスの構造やpadding・marginの違いが理解できると、このレッスンの内容もよりスムーズに学べます。

練習問題2-6：ボックススタイルの総合練習

【CSS】勉強猫がノートパソコンに向かい、練習問題に挑戦する様子。記事内の休憩用イラスト

VSCで「training2-6.html」と「training2-6.css」のふたつのファイルを作って保存してください。

training2-6.htmlには以下のコードをコピーして貼り付けましょう。

<div class="styled-box">
    これは非常に長いテキストで、ボックスのサイズを超える可能性があります。
</div>

training2-6.cssに以下の条件を満たすコードを書き、ブラウザで表示してください。

ボックスのサイズは、幅 300px、高さ 150px にする。
ボックスの背景色を #ffcc00（黄色）に設定する。
ボックスの角をすべて 20px で丸くする。
ボックスの影を右方向に 5px、下方向に 10px、ぼかし 15px、色は黒の30%の透明度 (rgba(0,0,0,0.3)) で設定する。
ボックス内に長いテキストを配置し、はみ出た部分は隠す設定にする。
ボックスの表示形式は、他のボックスと横並びに配置できるよう inline-block にする。

初めてのWebサイトを作ろう2-6

このサイトの Lesson1-1（HTML学習の入り口）かLesson2-1（CSS学習の入り口）から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」

この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

Webサイト制作に挑戦する人はここをクリック！

自分だけのWebサイト制作にはベースとなる基本セットが必要になります。

まだ入手していない人はLesson1-1かLesson2-1のページ下部からダウンロードして下さい。

Lesson2-6のまとめノートと練習問題を追加しよう

このLessonのまとめノートと練習問題の解答を、MyWebsiteフォルダに追加しましょう。

１．練習問題の解答を保存

練習問題2-6で作成した２つのファイルを学習フォルダの中に保存しましょう。

training2-6.html ⇒ Lesson2フォルダに保存
training2-6.css ⇒ Lesson2フォルダの中のstyleフォルダに保存

トップページからリンクで飛べるようになりますので確認しましょう。

２．まとめノートを作成・保存

下記のHTMLコードは、このLesson2-6で紹介した内容を端的にまとめてブラウザ表示するためのコードです。

これをコピーして「MyWebsite2-6.html」という名前で保存し、「lesson2（学習フォルダ）」の中に保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lesson2-6</title>
    <link rel="stylesheet" href="style/styles-lesson2.css">
</head>
<body>

    <h1>Lesson2-6：ボックススタイルを変更しよう</h1>

    <div class="container">
        <h2>目的・要点</h2>
        <p>
            CSSのボックススタイルを活用することで、ウェブページのデザインをより洗練されたものにできます。
            本レッスンでは、<code>overflow</code>、<code>border-radius</code>、<code>box-shadow</code> などのプロパティを学び、
            ボックスの見た目を自由に調整する方法を習得します。
        </p>

        <h2>本レッスンの到達目標</h2>
        <p>
            ボックススタイルの基本を理解し、デザインの柔軟性を高めるための応用テクニックを身につけることです。
        </p>

        <h2>このレッスンで学習した内容</h2>

        <h3>overflowプロパティ</h3>
        <ul>
            <li><strong>visible</strong>: はみ出た内容をそのまま表示（デフォルト）</li>
            <li><strong>hidden</strong>: はみ出た内容を隠す</li>
            <li><strong>scroll</strong>: 常にスクロールバーを表示</li>
            <li><strong>auto</strong>: 内容がはみ出た場合のみスクロールバーを表示</li>
        </ul>

        <h3>border-radiusプロパティ</h3>
        <ul>
            <li><code>border-radius: 10px;</code> → すべての角を丸める</li>
            <li><code>border-top-left-radius: 20px;</code> など、個別の角を調整可能</li>
        </ul>

        <h3>box-shadowプロパティ</h3>
        <ul>
            <li>ボックスに影をつける</li>
            <li><code>box-shadow: 水平方向 垂直方向 ぼかしの強さ 広がりの範囲 色;</code></li>
            <li>例：<code>box-shadow: 5px 5px 10px rgba(0,0,0,0.5);</code> → 右下にぼかしのある影をつける</li>
        </ul>

        <h2>CSSボックススタイル応用テクニック</h2>
        <ul>
            <li><code>overflow: auto;</code> を使用してスクロール可能なボックスを作成</li>
            <li><code>border-radius</code> を活用し、柔らかいデザインのカードを作成</li>
            <li><code>box-shadow</code> を加えて、立体感のあるボタンやコンテンツブロックを作成</li>
        </ul>

        <h2>トピック・豆知識</h2>
        <ul>
            <li>スクロール可能なボックスを活用し、画面のスペースを効率的に利用</li>
            <li>ボックスのデザインの一貫性を保つために、<code>border-radius</code> と <code>box-shadow</code> を組み合わせる</li>
            <li><code>overflow</code> を適切に設定し、意図しないはみ出しを防ぐ</li>
        </ul>

        <h2>まとめ</h2>
        <p>
            本レッスンでは、CSSのボックススタイルを活用し、要素の見た目を自在に調整する方法を学びました。
        </p>
        <p>
            特に以下の3つのプロパティを活用することで、デザインの自由度を大幅に向上させることができます。
        </p>
        <ul>
            <li><strong>overflow</strong>: コンテンツがボックスのサイズを超えたときの動作を指定</li>
            <li><strong>border-radius</strong>: 角を丸くして柔らかいデザインを実現</li>
            <li><strong>box-shadow</strong>: 影をつけて立体感を演出</li>
        </ul>
        <p>
            これらのプロパティを適切に組み合わせることで、シンプルながらも洗練されたウェブデザインが可能になります。
        </p>
        <p><a href="../MyWebsite.html">トップページへ戻る</a></p>
    </div>

    <footer>
        <p>&copy; 初心者のためのプログラミングテキスト＆問題集</p>
    </footer>

</body>
</html>

これでLesson2-6の作業は完了です。

継続は力なり。次のLessonも、引き続き頑張ってください^^

<<前のページ

HTML/CSSの記事一覧

次のページ>>

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。

HTML/CSSのテキスト＆問題集トップへ戻る
トップページへ戻る