見出し画像

継続は力なり＃２９

うちやましょうたろう/成り上がり

表示形式を変えるプロパティの続き


見えない状態にする

displayプロパティの値として「none」を指定すると、その要素のボックスは消えてなくなった

「visibility プロパティ」を使用すると、要素自体を消すのではなく、見えないのだけれども場所は確保されている状態（あたかも透明になったような状態）にすることができる

visibilityに指定できる値

・visible
ボックスを見える状態にする

・hidden
ボックスを見えない状態にする

visibilityプロパティの使用例

以下が具体的にどうなるかを、２つの画像を表示させたサンプル

例

HTML

<img id="sample1" src="tpp.jpg" alt="タンポポの画像">
<img id="sample2" src="tpp.jpg" alt="タンポポの画像">

画像1

はじめに、この状態での表示を確認しておく

この段階では単純に画像が２つ並んで表示される


CSSを適用させる

CSS

#sample1 { visibility: hidden; }

画像2

左側の画像は消えたが、右側の画像は表示位置が変わることなく、そのまま表示されている



はみ出る部分の表示方法を設定

「overflow プロパティ」を使用すると、ボックスの幅や高さを指定している状態で、要素内容がボックス内に入り切らなくなってしまった時にどのように表示させるかを設定することができる

このプロパティを適用できるのはブロックレベルの状態の要素に限る

以下の値を指定できる

overflowに指定できる値

・visible
ボックスからはみ出た部分も表示する

・hidden
ボックスからはみ出た部分は表示しない

・scroll
ボックスからはみ出た部分は表示しないが、スクロールによって全ての内容が見られるようになる

・auto
必要に応じて（内容が入り切らなくなると）スクロール可能になる


以下のサンプルでは、幅100ピクセル・高さ100ピクセルのボックス中に、幅200ピクセル・高さ200ピクセルの画像を表示させている

「overflow プロパティ」の値によって、以下のように表示が変わる

例

HTML

<p id="sample1">
<img src="tpp.jpg" alt="タンポポの画像">
</p>
<p id="sample2">
<img src="tpp.jpg" alt="タンポポの画像">
</p>
<p id="sample3">
<img src="tpp.jpg" alt="タンポポの画像">
</p>

CSS

p {
   width: 100px;
   height: 100px;
}
#sample1 { overflow: hidden; }
#sample2 { overflow: scroll; }
#sample3 { overflow: visible; }

画像3