LabEx
ログイン登録

CSS の表示プロパティを探求する

CSSBeginner
オンラインで実践に進む

はじめに

この実験では、学生たちはウェブ要素のレイアウトと表示を制御する基本的な CSS 表示プロパティを探求します。一連の実践的な演習を通じて、参加者はブロック、インライン、インラインブロック、および非表示の表示プロパティを操作する方法を学び、ウェブページのレイアウトを構築および管理する実践的なスキルを身につけます。この実験では、異なる表示プロパティが要素の配置にどのように影響するかを理解したり、ナビゲーションメニューを作成したり、要素の表示を制御したりするなどの重要な概念をカバーしており、CSS レイアウト技術の包括的な紹介を行っています。

実際の例とコードのデモを通じて、学習者は表示プロパティがウェブデザインにどのように影響するかをしっかりと理解し、より柔軟で応答性の高いウェブページのレイアウトを作成することができます。段階的なアプローチにより、学生たちは基本的なブロックレベル要素の特性からより高度な表示プロパティの実装まで、徐々に知識を築くことができます。

ブロック表示プロパティを理解する

このステップでは、CSS のブロック表示プロパティについて学びます。これは、ウェブ要素のレイアウトを制御するための基本概念です。デフォルトでは、多くの HTML 要素はブロックレベルの表示プロパティを持っています。

まず、ブロック表示プロパティを示すための HTML ファイルを作成しましょう。WebIDE を開き、~/project ディレクトリに新しいファイル block-display.html を作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Block Display Property</title>
    <style>
      .block-element {
        display: block;
        background-color: lightblue;
        padding: 10px;
        margin: 10px 0;
        border: 2px solid blue;
      }
    </style>
  </head>
  <body>
    <div class="block-element">This is a block-level div element</div>
    <div class="block-element">Another block-level div element</div>
    <p class="block-element">This is a block-level paragraph</p>
  </body>
</html>

ブロックレベル要素の主な特徴：

  • 常に新しい行から始まります
  • デフォルトで利用可能な全幅を占めます
  • 幅、高さ、マージン、およびパディングのプロパティを適用できます
  • ブロック要素は縦に順に積み重なります

ファイルの内容を確認しましょう：

cat ~/project/block-display.html

出力例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Block Display Property</title>
    <style>
       .block-element {
            display: block;
            background-color: lightblue;
            padding: 10px;
            margin: 10px 0;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div class="block-element">This is a block-level div element</div>
    <div class="block-element">Another block-level div element</div>
    <p class="block-element">This is a block-level paragraph</p>
</body>
</html>

一般的なブロックレベル要素には以下が含まれます：

  • <div>
  • <p>
  • <h1> から <h6>
  • <section>
  • <article>
  • <ul> と <ol>

インライン表示プロパティを適用する

このステップでは、CSS のインライン表示プロパティについて学びます。このプロパティにより、要素は水平方向に流れ、必要な幅のみを占めることができます。

インライン表示プロパティを示すための HTML ファイルを作成しましょう。WebIDE を開き、~/project ディレクトリに新しいファイル inline-display.html を作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Inline Display Property</title>
    <style>
      .inline-element {
        display: inline;
        background-color: lightgreen;
        padding: 5px;
        margin: 5px;
        border: 2px solid green;
      }
    </style>
  </head>
  <body>
    <span class="inline-element">First inline element</span>
    <span class="inline-element">Second inline element</span>
    <a href="#" class="inline-element">Inline link</a>
  </body>
</html>

インライン要素の主な特徴：

  • 同じ行内で水平方向に流れます
  • 必要な幅のみを占めます
  • 幅と高さのプロパティは機能しません
  • 垂直方向のパディングとマージンの効果は限られています
  • 幅と高さを直接設定することはできません

ファイルの内容を確認しましょう：

cat ~/project/inline-display.html

出力例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline Display Property</title>
    <style>
      .inline-element {
            display: inline;
            background-color: lightgreen;
            padding: 5px;
            margin: 5px;
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <span class="inline-element">First inline element</span>
    <span class="inline-element">Second inline element</span>
    <a href="#" class="inline-element">Inline link</a>
</body>
</html>

一般的なインライン要素には以下が含まれます：

  • <span>
  • <a>
  • <strong>
  • <em>
  • <img>

インラインブロック表示プロパティを実装する

このステップでは、CSS のインラインブロック表示プロパティについて学びます。このプロパティは、インライン要素とブロックレベル要素の両方の最良の特徴を兼ね備えています。

インラインブロック表示プロパティを示すための HTML ファイルを作成しましょう。WebIDE を開き、~/project ディレクトリに新しいファイル inline-block-display.html を作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Inline-Block Display Property</title>
    <style>
      .inline-block-element {
        display: inline-block;
        background-color: lightsalmon;
        padding: 10px;
        margin: 10px;
        border: 2px solid red;
        width: 150px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="inline-block-element">First inline-block element</div>
    <div class="inline-block-element">Second inline-block element</div>
    <div class="inline-block-element">Third inline-block element</div>
  </body>
</html>

インラインブロック要素の主な特徴：

  • インライン要素のように水平方向に流れます
  • ブロック要素のように幅、高さ、パディング、およびマージンを持つことができます
  • 要素のサイズと間隔を精密に制御できます
  • ナビゲーションメニューや画像ギャラリーのような水平レイアウトを作成するのに便利です

ファイルの内容を確認しましょう：

cat ~/project/inline-block-display.html

出力例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline-Block Display Property</title>
    <style>
      .inline-block-element {
            display: inline-block;
            background-color: lightsalmon;
            padding: 10px;
            margin: 10px;
            border: 2px solid red;
            width: 150px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="inline-block-element">First inline-block element</div>
    <div class="inline-block-element">Second inline-block element</div>
    <div class="inline-block-element">Third inline-block element</div>
</body>
</html>

インラインブロックの一般的な使用例：

  • 水平ナビゲーションメニューの作成
  • 画像ギャラリーのデザイン
  • 精密な制御で要素を横並びに配置する

要素の非表示に none 表示プロパティを使用する

このステップでは、CSS の display: none プロパティについて学びます。このプロパティは、要素をページレイアウトから完全に削除し、不可視にして空間を占めません。

非表示表示プロパティを示すための HTML ファイルを作成しましょう。WebIDE を開き、~/project ディレクトリに新しいファイル none-display.html を作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>None Display Property</title>
    <style>
      .visible-element {
        background-color: lightblue;
        padding: 10px;
        margin: 10px;
      }

      .hidden-element {
        display: none;
        background-color: lightgray;
        padding: 10px;
        margin: 10px;
      }

      .toggle-button {
        padding: 5px 10px;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <div class="visible-element">This element is always visible</div>
    <div id="hiddenDiv" class="hidden-element">This element is hidden</div>
    <button class="toggle-button" onclick="toggleElement()">
      Toggle Hidden Element
    </button>

    <script>
      function toggleElement() {
        var hiddenDiv = document.getElementById("hiddenDiv");
        if (hiddenDiv.style.display === "none") {
          hiddenDiv.style.display = "block";
        } else {
          hiddenDiv.style.display = "none";
        }
      }
    </script>
  </body>
</html>

display: none の主な特徴：

  • 要素をページレイアウトから完全に削除します
  • 要素は空間を占めません
  • visibility: hidden とは異なり（空間は維持されますが要素は不可視になります）
  • 動的なコンテンツの非表示やレスポンシブデザインに便利です

ファイルの内容を確認しましょう：

cat ~/project/none-display.html

出力例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>None Display Property</title>
    <style>
       .visible-element {
            background-color: lightblue;
            padding: 10px;
            margin: 10px;
        }

       .hidden-element {
            display: none;
            background-color: lightgray;
            padding: 10px;
            margin: 10px;
        }

       .toggle-button {
            padding: 5px 10px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="visible-element">This element is always visible</div>
    <div id="hiddenDiv" class="hidden-element">This element is hidden</div>
    <button class="toggle-button" onclick="toggleElement()">Toggle Hidden Element</button>

    <script>
        function toggleElement() {
            var hiddenDiv = document.getElementById('hiddenDiv');
            if (hiddenDiv.style.display === 'none') {
                hiddenDiv.style.display = 'block';
            } else {
                hiddenDiv.style.display = 'none';
            }
        }
    </script>
</body>
</html>

display: none の一般的な使用例：

  • 条件に応じて要素を非表示にする
  • レスポンシブメニューを作成する
  • 動的なコンテンツの表示を管理する
  • ドロップダウンやトグルインターフェイスを実装する

表示プロパティを使ってナビゲーションメニューを作成する

このステップでは、前のステップで学んだ表示プロパティを使って水平ナビゲーションメニューを作成します。この実際の例は、レスポンシブでクリーンなナビゲーションレイアウトを作成するためにインラインブロック表示をどのように使うかを示します。

ナビゲーションメニュー付きの HTML ファイルを作成しましょう。WebIDE を開き、~/project ディレクトリに新しいファイル navigation-menu.html を作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Navigation Menu</title>
    <style>
      .nav-menu {
        background-color: #333;
        padding: 10px;
      }

      .nav-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      .nav-menu li {
        display: inline-block;
        margin-right: 20px;
      }

      .nav-menu a {
        text-decoration: none;
        color: white;
        font-family: Arial, sans-serif;
        transition: color 0.3s ease;
      }

      .nav-menu a:hover {
        color: #ffd700;
      }
    </style>
  </head>
  <body>
    <nav class="nav-menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </body>
</html>

このナビゲーションメニューで使用される主なテクニック：

  • メニュー項目に display: inline-block
  • デフォルトのリストスタイリングを削除
  • ホバーエフェクトを追加
  • 水平レイアウトを作成

ファイルの内容を確認しましょう：

cat ~/project/navigation-menu.html

出力例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigation Menu</title>
    <style>
       .nav-menu {
            background-color: #333;
            padding: 10px;
        }

       .nav-menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

       .nav-menu li {
            display: inline-block;
            margin-right: 20px;
        }

       .nav-menu a {
            text-decoration: none;
            color: white;
            font-family: Arial, sans-serif;
            transition: color 0.3s ease;
        }

       .nav-menu a:hover {
            color: #ffd700;
        }
    </style>
</head>
<body>
    <nav class="nav-menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

ナビゲーションメニューのベストプラクティス：

  • <nav> のような意味的な HTML5 タグを使用
  • メニュー構造をシンプルに保つ
  • 良好な読みやすさとアクセシビリティを確保
  • ユーザーインタラクションを向上させるためにホバーとアクティブな状態を追加

まとめ

この実験では、参加者は CSS の表示プロパティを探求し、異なる表示値が Web ページのレイアウトと要素の動作にどのように影響するかを理解することに焦点を当てました。この実験は、ブロック表示プロパティを調べることから始まり、ブロックレベル要素が横幅いっぱいを占め、新しい行で始まり、マージン、パディング、および境界線でスタイルを設定できる方法を示しました。参加者は <div>、<p>、見出しタグなどの一般的なブロックレベル要素と、文書内でどのように自然に垂直に積み重なるかを学びました。

その後のステップでは、インライン、インラインブロック、および非表示表示プロパティの適用方法を学習者に案内し、要素のレンダリングと可視性を制御するための実践的な洞察を提供しました。実際の例を作成し、CSS スタイルを実験することで、参加者は要素の表示特性を操作する実践的な経験を得、最終的に CSS 表示プロパティを使用してより柔軟でレスポンシブな Web ページレイアウトを作成する方法を理解するようになりました。

関連 CSS コース
初心者向け CSS

初心者向け CSS

cssweb-development
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

javascriptweb-development
モグラたたき Web ゲームの作成

モグラたたき Web ゲームの作成

javascriptweb-development