表示関連プロパティの値（CSS）

表示関連プロパティの値（CSS）

overflow

値（パラメータ）	内容
visible	領域からはみ出して表示する（初期値）
hidden	領域からはみ出した部分を表示させない
scroll	領域からはみ出した部分をスクロールで表示する
auto	自動（スクロールで表示されるのが一般的）

入力例	overflow: hidden;

上記表示例のサンプルコード（HTML埋め込み）

<div style="height: 100px; background-color: #fdf2f4; overflow: scroll;">この行を含めて5行あります（1行目）<br>2行目です<br>3行目です<br>4行目です<br>5行目です</div>

サンプルコード（CSS別記）

/*CSSコード*/
.overflow-visible {
  height: 100px;
  background-color: #fdf2f4;
  margin-bottom: 50px;
  overflow: visible;
}
.overflow-hidden {
  height: 100px;
  background-color: #fdf2f4;
  margin-bottom: 50px;
  overflow: hidden;
}
.overflow-scroll {
  height: 100px;
  background-color: #fdf2f4;
  margin-bottom: 50px;
  overflow: scroll;
}

<!--HTMLコード-->
<div class="overflow-visible">この行を含めて5行あります（1行目）<br>2行目です<br>3行目です<br>4行目です<br>5行目です</div>
<div class="overflow-hidden">この行を含めて5行あります（1行目）<br>2行目です<br>3行目です<br>4行目です<br>5行目です</div>
<div class="overflow-scroll">この行を含めて5行あります（1行目）<br>2行目です<br>3行目です<br>4行目です<br>5行目です</div>

サンプルコード（CSS別記） の表示

display

値（パラメータ）	内容
inline	領域に対してインラインで表示する（初期値）
block	領域に対してブロックレベルで表示する
list-item	領域に対してリスト項目として表示する
none	領域そのものを表示させない

ブロックレベル要素	文章などを構成する基本的な要素（かたまり）で、見出し・段落・表などです。 一般的には、このブロックの前後に改行が入ります。
インライン要素	文章の一部となる要素で、ブロックレベル要素の中で使用されます。 一般的には、この要素の前後に改行は入りません。

入力例	display: inline;
表示例	ブロックレベル要素の中にインライン要素を太字で表示しています。なので、ブロックレベル要素の後には改行が入ってます。

上記表示例のサンプルコード（HTML埋め込み）

<p>ブロックレベル要素の中に<strong>インライン要素を太字で</strong>表示しています。なので、ブロックレベル要素の後には改行が入ってます。</p>

サンプルコード（CSS別記）

/*CSSコード*/
.display {
  background-color: #fdf2f4;
  margin-bottom: 20px;;
}
.display-block {
  display: block;
  background-color: #a3fcff;
}
.display-inline1 {
  display: inline;
  background-color: #a3fcff;
}
.display-inline2 {
  display: inline;
  font-weight: bold;
  background-color: #a3fcff;
}
.display-inline3 {
  display: block;
  font-weight: bold;
  background-color: #a3fcff;
}
.display-list-item {
  display: list-item;
  background-color: #a3fcff;
}
.display-none {
  display: none;
  background-color: #a3fcff;
}

<!--HTMLコード-->
<div class="display">
  <h2 class="display-inline1">ブロックレベル要素のh2と</h2>
  <p class="display-inline1">ブロックレベル要素のpをインラインで表示しました。</p>
</div>
<div class="display">
  <p>通常<span class="display-inline2">この太字の部分が</span>インラインで表示されます。</p>
</div>
<div class="display">
  <p>ブロックレベルを使って<span class="display-inline3">この太字の部分をブロックにすると</span>ブロック（改行）で表示されます。</p>
</div>
<div class="display">
  <p>リストアイテムにしてみましょう<span class="display-list-item">おはようございます</span><span class="display-list-item">こんにちは</span></p>
</div>
<div class="display">
  <p>文章の一部を消してみましょう「この部分が消えます」</p>
  <p>文章の一部を消してみましょう「<span class="display-none">この部分が消えます</span>」</p>
</div>

サンプルコード（CSS別記）の表示

visibility

値（パラメータ）	内容
visible	表示する（初期値）
hidden	表示しない

入力例	visibility: hidden;

サンプルコード（CSS別記）

/*CSSコード*/
.visibility {
  background-color: #fdf2f4;
  margin-bottom: 20px;
}
.visibility-hidden {
  visibility: hidden;
}

<!--HTMLコード-->
<div class="visibility">
  <p>文章の一部を消してみましょう</p>
  <p>「この部分が消えます」</p>
  <p>ここでは表示されています</p>
</div>
<div class="visibility">
  <p>文章の一部を消してみましょう</p>
  <p class="visibility-hidden">「この部分が消えます」</p>
  <p>領域を確保した状態で消えましたね</p>
</div>

サンプルコード（CSS別記）の表示