表示の設定

2014年5月25日：CSS

要素の表示をCSSで制御する方法を紹介します。

具体的には、display、visibility、overflowについて解説します。

displayで要素の表示・非表示を決める

displayを使うと要素の表示方法をいろいろと変更することが可能です。

例えば、HTML、CSSファイルを

【index.html】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<p class="block">ブロックボックス</p>
<p class="inline">インラインボックス</p>
<p class="inline-block">インラインブロックボックス</p>
<p class="list-item">リストマーク付きブロックボックス</p>
<p class="none">表示しない</p>
</section>
</body>
</html>

【style.css】

section{
	padding:10px;
}
p{
	background-color:#ffcc66;
}
.block{
	display:block;
}
.inline{
	display:inline;
}
.inline-block{
	display:inline-block;
}
.list-item{
	display:list-item;
	list-style-type:circle;
}
.none{
	display:none;
}

とすれば

displayの例

と表示されます。ブロックボックスは改行があるような要素のことで、横いっぱい場所をとります。

そして、インラインボックスは改行がないような要素です。インラインボックスにすると幅や高さの設定がなくなるので注意してください。

もしも、幅や高さがあるようにしたい場合は、インラインブロックを指定します。

そして、list-itemにすれば、リストマーク付きのブロックボックスを作成できます。

もしも、要素を表示させたくない場合は、noneを指定すれば表示されません。

visibilityで画面上で要素を見えなくする

displayでは要素の表示方法を指定しました。visibilityでは、要素が画面上で見えるかどうかを指定できます。

display:noneを使うと

【index.html】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<p>文章1</p>
<p class="none">文章2</p>
<p>文章3</p>
</section>
</body>
</html>

【style.css】

section{
	padding:10px;
}
p{
	background-color:#ffcc66;
}
.none{
	display:none;
}
.hidden{
	visibility:hidden;
}

とすれば、

display:noneの場合

となりました。これをvisibility:hiddenでやると

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<p>文章1</p>
<p class="hidden">文章2</p>
<p>文章3</p>
</section>
</body>
</html>

visibility:hiddenの場合

となります。違いとしては

visibility:hiddenは単に見えなくなるだけで存在している

となります。見えるようにしたい場合は

visibility:visible;

とします。

あふれた内容の表示

ボックスの幅と高さを固定して、ボックスからはみ出した内容をどのように表示するかを指定できます。

その指定方法として用いるのが、overflowです。

【index.html】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="scroll">文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
<p class="hidden">文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
</body>
</html>

【style.css】

p{
	background-color:#ffcc00;
	height:50px;
}
.scroll{
	overflow:scroll;
}
.hidden{
	overflow:hidden;
}

とすれば

overflow

となります。上のp要素にはスクロールバーがつき、最後まで文章を読むことができます。

一方、下のp要素にはついておらず最後まで文章を読めません。

overflow:X;

では、Xに

  1. visible：全内容を表示させる
  2. hidden：領域を超えるものは非表示にする
  3. scroll：スクロールを表示する
  4. auto：ブラウザに依存する。たいてい領域をこえるとスクロールバーを表示する

を指定できます。

著者：安井 真人(やすい　まさと)

TOP