CSS講座
表示に関するもの（２）
display - 要素の表示方法
要素の表示方法を指定します。
指定できる値は、inline、block、list-item、none の４種類です。
- inline
- インライン要素として表示します。
display: inline;- block
- ブロック要素として表示します。
display: block;- list-item
- リストアイテムとして表示します。
display: list-item;リストアイテムとして表示されます。
- none
- この値を指定した要素は表示しません。
display: none;
インライン要素とブロック要素については、CSSレイアウトで紹介しています。
list-item と指定することで、リストを作成することはできますが、ちゃんとリストを作成する場合は、<ul>を使用したほうがいいでしょう。
none を指定すると、完全に要素を非表示にします。似たものには、visibility: hidden;というものがありますが、違いは
- display: none;
- 要素を非表示にします。（完全に非表示です。）
- visibility: hidden;
- 要素を不可視にします。（見えなくなるだけです。）
という違いがありますので、使い分けましょう。
vertical-align - 縦位置の指定
要素の縦位置を指定します。
このプロパティは、主に、テキスト内の画像に適用します。縦位置・・・というのは、テキスト（フォント）を基準に決められています。
- baseline（規定値）
- ベースラインに揃えます。
vertical-align: baseline;- テキスト
テキスト - text-top
- テキストの上端に揃えます。
vertical-align: text-top;- テキストテキスト
- middle
- 中央揃えをします。
vertical-align: middle;- テキストテキスト
- text-bottom
- テキストの下端に揃えます。
vertical-align: text-bottom;- テキストテキスト
- super
- 上付き文字の位置に揃えます。
vertical-align: super;- テキストテキスト
- sub
- 下付き文字の位置に揃えます。
vertical-align: sub;- テキストテキスト
position - 表示位置
要素の表示位置を設定します。
指定可能な値は、static、relative、absoluteの３つです。
- static（規定値）
- 本来の位置に表示します。
position: static;- relative
- 本来の位置から、相対位置指定をします。
position: realtive;- absolute
- 絶対位置指定をします。（親要素からの相対指定）
position: absolute;
relative、absoluteは、top、left、right、bottom プロパティと組み合わせて使用することで、位置を指定します。
まずは、relativeの説明をします。下のリンクにマウスを乗せてみてください。
これは、極端な例です。通常は、下のように使うことが多いでしょう。
どうなっているかと言うと、マウスを乗せたときに、relativeの相対参照を使って、本来の位置から、右に 1px、下に 1px 移動させています。
a:hover {
position: relative;
top: 1px;
left: 1px;
}
:hover・・・というのは、擬似クラス・擬似要素のところを見てください。
右に1px、下に1px動かしたいときは、元の位置の左から1px、元の位置の上から1px 移動させる・・・と考えてください。
次に、absoluteの説明をします。absoluteは、親要素からの相対位置指定です。ただし、基準となる親要素には、position: relative; または position: absolute; を指定しておく必要があります。
- 上から20px、左から10px
position: absolute;
top: 20px;
left: 10px;子要素
- 下から10%、右から30%
position: absolute;
bottom: 10%;
right: 30%;子要素
親要素の大きさは 100px×100px です。親要素には、position: relative; が指定されています。
このタグも、レイアウトに使用することがあります。position: absolute; は、使い勝手が良いのですが、使い道は限られるかと思います。なぜなら、positionプロパティを使用した要素は、重なって表示されることがあるためです。
これについては、CSSレイアウトのページで説明してあります。
z-index - 要素の重なる順番
positionプロパティを使用した時の、要素が重なる順番を設定します。
positionプロパティ（absolute）を使用すると、要素を重ねることができます。その、重ねる順番を指定するためのプロパティです。（z-index：Z軸方向の指定・・・という意味合いでしょうか。）
通常、要素が重なる場合は、後に書かれている要素の方が、上に表示されることになります。下の「Cascading Style Sheets」という文字は、要素が重なった場合のサンプルになります。
Cascading Style Sheets
z-indexプロパティの値には、数字を指定します。（単位は必要ありません。）大きな数字を指定するほど、前面に表示されることになります。
z-index: 1;
ためしに、z-indexプロパティを付けて、「Cascading」が一番上、「Style」が次、「Sheets」が一番下に表示されるようにしてみました。
- Cascading・・・z-index: 3;
- Style・・・z-index: 2;
- Sheets・・・z-index: 1;
Cascading Style Sheets
判りにくいですが・・・よく見れば、違いは分かるでしょう。
面白いプロパティですが・・・このプロパティを使用する機会は、滅多に無いでしょう。
visibility - 要素の可視・不可視
要素を見えるようにするか、見えないようにするか指定します。
指定できる値は、visible と hidden の２種類です。
- visible（規定値）
- 要素を可視します。
visibility: visible;- hidden
- 要素を不可視にします。
visibility: hidden;
似たようなものに、display: none;というプロパティがありますが、違いは、
- display: none;
- 要素を非表示にします。（完全に非表示です。）
- visibility: hidden;
- 要素を不可視にします。（見えなくなるだけです。）
ということです。
要するに、display: none;を指定すると、要素は跡形も無く、全く表示されなくなります。また、要素の効果も適用されません。
それに対し、visibility: hidden;を指定した要素は、（見えないけど）その要素大きさのスペースが確保されます。また、要素の効果が適用されます。
要素の効果・・・と言うと、<br />にdisplay: none;とvisibility: hidden;を付けて、比べてみれば分かります。（元からbrは目に見える要素では無いですが・・・そこは気にしないこと。）
display: none;を指定した場合は、改行は行われません。しかし、visibility: hidden;を指定した場合は、改行が行われます。試してみてください。
このプロパティを何に利用するか・・・私はよく知りません。ただ、私の場合は以下のようにして使用する場合があります。
hr.clearing { visibility: hidden; clear: both; height: 1px; }
これは、floatの回り込みを解除したいとき、floatを指定した要素の次に、clearを指定できる適当なブロック要素が無い場合に、
<hr class="clearing" />
という水平線を挿入します。こうすることで、水平線は表示されること無く、floatの効果を打ち消すことができます。
・・・あくまで、「私はこうやって使います」というだけです。もっと効果的な使用法があるかもしれませんので、あしからず。
