display

display: block

display: none

<div>↓ブロック1表示</div>

<p class="block1">ブロック1</p>
<div>↓ブロック2非表示</div>

<p class="block2">ブロック2</p>

* {
  margin: 0;
  padding: 0;
}

.block1 {
  background-color: #c2eeff;
  margin: 16px;
  padding: 16px;
}

.block2 {
  /* 問題2. スタイルの指定 */
  /* この下に解答してください */
  background-color: #ffbeda;
  margin: 16px;
  padding: 16px;
  /* 問題3. blockの非表示 */
  /* この下に解答してください */
  display: none;
}


<div>↓ブロック1表示</div>


<div>↓ブロック2非表示</div>

* {
  margin: 0;
  padding: 0;
}

.block1 {
  background-color: #c2eeff;
  margin: 16px;
  padding: 16px;
}

.block2 {
  /* 問題2. スタイルの指定 */
  /* この下に解答してください */

  /* 問題3. blockの非表示 */
  /* この下に解答してください */
}


ブロック

インライン

display: inline-block

インラインブロック

演習問題

「ブロック要素」と「インライン要素」の違いを学ぶコースです。これらの違いを学べば、HTMLのレイアウト設計がスムーズになります。まずは基本から理解しましょう。



0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。