JavaScriptで簡単に実装！Display Styleの5つの使い方

はじめに
●JavaScript
●Display Styleの基本
- ○displayプロパティ
●Display Styleの使い方
●応用例とサンプルコード
●注意点と対処法
- ○要素のデフォルトのdisplayプロパティ
- ○ブラウザの違い
●カスタマイズ方法
- ○displayプロパティのカスタマイズ
まとめ

はじめに

この記事を読めば、JavaScriptを使ってDisplay Styleを簡単に実装できるようになります。

初心者の方でも分かりやすく、サンプルコードや応用例も交えながら解説していきますので、ぜひ最後までお付き合いください。

●JavaScript

Display Styleとは JavaScript Display Styleとは、ウェブページ上の要素の表示スタイルを制御する方法のことです。

ウェブページのレイアウトやデザインを変更するために、JavaScriptとCSSを組み合わせて使用します。

●Display Styleの基本

○displayプロパティ

Display Styleは、主にCSSのdisplayプロパティを使って要素の表示方法を制御します。

displayプロパティには、次のような値があります。

none
inline
block
inline-block
flex
grid

これらの値をJavaScriptで動的に変更することで、要素の表示スタイルを柔軟にコントロールすることができます。

●Display Styleの使い方

○サンプルコード1：要素を非表示にする

このコードでは、要素を非表示にする方法を紹介しています。

この例では、ボタンをクリックすると、指定された要素が非表示になります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素を非表示にする</title>
<script>
function hideElement() {
  var element = document.getElementById("target");
  element.style.display = "none";
}
</script>
</head>
<body>
<p id="target">この文章が非表示になります。</p>
<button onclick="hideElement()">非表示にする</button>
</body>
</html>

○サンプルコード2：要素をインライン要素にする

このコードでは、要素をインライン要素に変更する方法を紹介しています。

この例では、ボタンをクリックすると、指定された要素がインライン要素になります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素をインライン要素にする</title>
<script>
function makeInline() {
  var element = document.getElementById("target");
  element.style.display = "inline";
}
</script>
</head>
<body>
<div id="target">この要素がインライン要素になります。</div>
<button onclick="makeInline()">インライン要素にする</button>
</body>
</html>

○サンプルコード3：要素をブロック要素にする

このコードでは、要素をブロック要素に変更する方法を紹介しています。

この例では、ボタンをクリックすると、指定された要素がブロック要素になります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素をブロック要素にする</title>
<script>
function makeBlock() {
  var element = document.getElementById("target");
  element.style.display = "block";
}
</script>
</head>
<body>
<span id="target">この要素がブロック要素になります。</span>
<button onclick="makeBlock()">ブロック要素にする</button>
</body>
</html>

○サンプルコード4：要素をインラインブロック要素にする

このコードでは、要素をインラインブロック要素に変更する手法を紹介しています。

この例では、ボタンをクリックすることで、指定された要素がインラインブロック要素に変更されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素をインラインブロック要素にする</title>
<script>
function makeInlineBlock() {
  var element = document.getElementById("target");
  element.style.display = "inline-block";
}
</script>
</head>
<body>
<div id="target">この要素がインラインブロック要素になります。</div>
<button onclick="makeInlineBlock()">インラインブロック要素にする</button>
</body>
</html>

○サンプルコード5：要素をフレックスコンテナにする

このコードでは、要素をフレックスコンテナに変更する手法を紹介しています。

この例では、ボタンをクリックすることで、指定された要素がフレックスコンテナに変更されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素をフレックスコンテナにする</title>
<style>
.flex-container {
  display: flex;
}
.flex-item {
  background-color: lightblue;
  padding: 10px;
  margin: 5px;
}
</style>
<script>
function makeFlexContainer() {
  var element = document.getElementById("target");
  element.classList.add("flex-container");
}
</script>
</head>
<body>
<div id="target">
  <div class="flex-item">要素1</div>
  <div class="flex-item">要素2</div>
  <div class="flex-item">要素3</div>
</div>
<button onclick="makeFlexContainer()">フレックスコンテナにする</button>
</body>
</html>

●応用例とサンプルコード

○応用例1：レスポンシブデザイン

レスポンシブデザインでは、ウィンドウの幅に応じて要素の表示スタイルを変更します。

これにより、様々なデバイスで適切なデザインが表示されるようになります。

○サンプルコード6：メディアクエリを使用したレスポンシブデザイン

このコードでは、メディアクエリを使用してレスポンシブデザインを実現する方法を紹介しています。

この例では、ウィンドウの幅が600px未満の場合に要素の表示スタイルが変更されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>メディアクエリを使用したレスポンシブデザイン</title>
<style>
  .box {
    background-color: lightblue;
    padding: 20px;
    margin: 10px;
    display: inline-block;
  }

  @media (max-width: 600px) {
    .box {
      display: block;
    }
  }
</style>
</head>
<body>
  <div class="box">要素1</div>
  <div class="box">要素2</div>
  <div class="box">要素3</div>
</body>
</html>

○応用例2：アコーディオンメニュー

アコーディオンメニューは、クリックやホバーすることでコンテンツが展開・縮小されるようなインタラクティブなメニューです。

○サンプルコード7：アコーディオンメニューの実装

このコードでは、アコーディオンメニューを実装する方法を紹介しています。

この例では、メニュー項目をクリックすると、対応するコンテンツが展開・縮小されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アコーディオンメニューの実装</title>
<style>
  .accordion-menu {
    cursor: pointer;
    background-color: lightblue;
    padding: 10px;
    margin: 5px;
  }

  .accordion-content {
    display: none;
    background-color: lightgrey;
    padding: 10px;
    margin: 5px;
  }
</style>
<script>
  function toggleAccordion(id) {
    var element = document.getElementById(id);
    if (element.style.display === "block") {
      element.style.display = "none";
    } else {
      element.style.display = "block";
    }
  }
</script>
</head>
<body>
  <div class="accordion-menu" onclick="toggleAccordion('content1')">メニュー1</div>
  <div id="content1" class="accordion-content">コンテンツ1</div>
  <div class="accordion-menu" onclick="toggleAccordion('content2')">メニュー2</div>
  <div id="content2" class="accordion-content">コンテンツ2</div>
  <div class="accordion-menu" onclick="toggleAccordion('content3')">メニュー3</div>
  <div id="content3" class="accordion-content">コンテンツ3</div>
</body>
</html>

上記のサンプルコードでは、クリックイベントを使って、対象の要素のdisplayプロパティを切り替えることでアコーディオンメニューを実現しています。

メニュー項目をクリックすると、関数toggleAccordionが実行され、引数に渡されたidに対応する要素のdisplayプロパティが変更されます。

●注意点と対処法

○要素のデフォルトのdisplayプロパティ

要素のデフォルトのdisplayプロパティは、要素の種類によって異なります。

例えば、div要素はデフォルトでブロック要素、span要素はインライン要素です。

そのため、要素の種類を理解して、適切なdisplayプロパティを設定することが重要です。

○ブラウザの違い

ブラウザによっては、displayプロパティのサポートや挙動が異なる場合があります。

対応策として、CSSリセットやNormalize.cssを使用してブラウザ間の差異を減らすことができます。

●カスタマイズ方法

○displayプロパティのカスタマイズ

displayプロパティを活用することで、さまざまなレイアウトやデザインを実現できます。

ここでは、displayプロパティのカスタマイズ方法を紹介します。

この例では、要素をグリッドコンテナにしてグリッドレイアウトを作成しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>グリッドレイアウトの実装</title>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .grid-item {
    background-color: lightblue;
    padding: 10px;
    text-align: center;
  }
</style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">アイテム1</div>
    <div class="grid-item">アイテム2</div>
    <div class="grid-item">アイテム3</div>
    <div class="grid-item">アイテム4</div>
    <div class="grid-item">アイテム5</div>
    <div class="grid-item">アイテム6</div>
  </div>
</body>
</html>

上記のサンプルコードでは、.grid-containerクラスにdisplay: grid;を設定することで、その要素がグリッドコンテナになります。

また、grid-template-columnsプロパティを使って、グリッドの列のサイズを定義しています。

この例では、3列のグリッドレイアウトが作成されます。