【CSS】レッスン2-06:ボックススタイルを変更しよう

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

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

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

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

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

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

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

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

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

<<前のページ HTML/CSSの記事一覧 次のページ>>

主要なボックススタイルプロパティ

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

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

overflow プロパティ

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

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

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

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

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

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

border-radius プロパティ

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

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

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

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

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

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

box-shadow プロパティ

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>

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

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

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

正解コード
<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>

このコードをVSCにコピーしてブラウザ表示してみましょう。

応用テクニック

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

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

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

スクロール可能なコンテンツボックス

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

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

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

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

角を丸めたカードデザイン

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

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

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

カードレイアウトの作成

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

<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>

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

まとめ

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

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

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

まとめ

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

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

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

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

次のステップ

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

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

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

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

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

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

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

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

lesson2-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学習の入り口) からLesson3-9まで順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「HTML/CSSの情報まとめ

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

Lesson2-6のまとめノートを作ろう

VSCを使ってlesson2フォルダの中に「MyWebsite2-6.html」というファイルを作り、下記のHTMLコードをコピーして貼り付けて下さい。

まとめノート(Lesson2-6/HTMLコード)
<!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/color.css">
    <link rel="stylesheet" href="style/text-style.css">
    <link rel="stylesheet" href="style/box-model.css">
    <link rel="stylesheet" href="style/link.css">   
    <link rel="stylesheet" href="style/box-style.css">
</head>
<body>
    <header>
        <h1>Lesson2-6 ボックススタイルを変更しよう</h1>
        <nav>
            <ul>
                <li>Lesson2-5:<a href="MyWebsite2-5.html">ボックスモデルを理解しよう</a></li>
                <li>Lesson2-7:<a href="MyWebsite2-7.html">継承とカスケードを理解しよう</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="highlight-block">
            <h2>ボックススタイルの基本</h2>
            <ol>
                <li>CSSで要素の表示形式を制御するには<code>display</code>プロパティを使用。</li>
                <li>主な<code>display</code>プロパティの値:
                    <ul>
                        <li><strong>block</strong>:幅100%、改行あり。</li>
                        <li><strong>inline</strong>:幅・高さ指定不可、隣接要素と横並び。</li>
                        <li><strong>inline-block</strong>:横並び+幅・高さ指定可能。</li>
                    </ul>
                </li>
            </ol>
        </section>
        <section class="highlight-block">
            <h2>主要なボックススタイルプロパティ</h2>
            <ol>
                <li><strong>overflow プロパティ</strong>:内容がボックスを超えたときの挙動を制御。
                    <ul>
                        <li><strong>visible</strong>:超えた内容をそのまま表示。</li>
                        <li><strong>hidden</strong>:超えた部分を非表示。</li>
                        <li><strong>scroll</strong>:常にスクロールバー表示。</li>
                        <li><strong>auto</strong>:必要時のみスクロールバー表示。</li>
                    </ul>
                </li>
                <li><strong>border-radius プロパティ</strong>:ボックスの角を丸くする。</li>
                <li><strong>box-shadow プロパティ</strong>:ボックスに影をつけて立体感を表現。</li>
            </ol>
        </section>
        <section class="highlight-block">
            <h2>応用テクニック</h2>
            <ol>
                <li>スクロール可能なボックス:<code>overflow: auto</code>を使用。</li>
                <li>角を丸めたデザイン:<code>border-radius</code>を活用。</li>
                <li>カードレイアウト:<code>border-radius</code>、<code>box-shadow</code>、<code>overflow</code>を組み合わせて作成。</li>
            </ol>
        </section>
    </main>
    <aside>
        <p><a href="../MyWebsite.html">ページトップへ戻る</a></p>
    </aside>
    <footer>
        <p>&copy; 初心者のためのプログラミングテキスト&問題集</p>
    </footer>
</body>
</html>

このコードをコピーしてMyWebsite2-6.htmlに張り付けてください。

続いてLesson2フォルダの中にあるstyleフォルダの中に「box-style.css」というファイルを作り、ボックススタイルを任意に指定するコードを書きましょう。

・highlight-blockという名のクラスセレクタを定義し、任意のスタイルを指定

ご自身で考えて書くことを推奨しますが、模範解答も用意しましたので必要な方は以下のコードを活用して下さい。

模範解答(CSSコード)
@charset "utf-8";
/* ハイライトブロックのスタイル */
.highlight-block {
    background-color: #f9f9f9;  /* 優しいグレーで背景を設定 */
    padding: 20px;             /* 全体に余白を設定 */
    margin-bottom: 20px;       /* 下の要素とのスペース */
    border-radius: 12px;       /* 角を丸める */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);  /* 軽い影を追加 */
    border-left: 5px solid #3498db;  /* 左側にアクセントカラー */
}

.highlight-block h2 {
    margin-top: 0;  /* 上部のマージンを削除して統一感を出す */
}

.highlight-block ul {
    margin: 10px 0;
    padding-left: 20px;  /* インデントを調整 */
}

このコードをコピーしてbox-style.cssに張り付けてください。

まとめ

お疲れさまでした!

今回の学習を通して、新たな知識やスキルを身につけることができたかと思います。

この調子でさらに理解を深めるために次のレッスンにもチャレンジしてみましょう。

継続は力なり。少しずつステップアップしていきましょう!

<<前のページ HTML/CSSの記事一覧 次のページ>>

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

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

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






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