【CSS】CSS ～ あれこれ ～

CSS/SCSS/SASS

■ はじめに

目次

【１】1px移動させるには - position
【２】表示・非表示の設定 - visibility:visible/hidden
【３】表示・非表示の設定 - display
【４】透過度を指定する - opacity

 【１】1px移動させるには - position

<div style="position:relative; left:1px;">
ああああ
</div>

 【２】表示・非表示の設定 - visibility:visible/hidden

 構文

非表示 

visibility:hidden;

表示 

visibility:visible;

 サンプル

<div style="background-color: rgb(0,255,100); visibility:hidden;">
非表示(visibility:hidden)</div>
<div style="background-color: rgb(0,255,100); visibility:visible;">
表示(visibility:visible)</div>

 【３】表示・非表示の設定 - display

 * display でも可能だが、
　こちらは表示・非表示だけの設定以外にも色々なプロパティがある(下記参照)

http://www.marguerite.jp/Nihongo/WWW/RefCSS/display.html

 構文

非表示 

display:none;

※ 表示上は、存在していないかのように扱われる

表示 

display:block;

 サンプル

<div style="background-color: rgb(0,255,100); display:none;">
非表示(display:none)</div>
<div style="background-color: rgb(0,255,100); display:block;">
表示(display:block)</div>

 【４】透過度を指定する - opacity

<div style="background-color: rgb(0,255,100); color: rgb(255,255,255); opacity: 0.9;">
opacity: 0.9</div>
<div style="background-color: rgb(0,255,100); color: rgb(255,255,255); opacity: 0.5;">
opacity: 0.5</div>
<div style="background-color: rgb(0,255,100); color: rgb(255,255,255); opacity: 0.1;">
opacity: 0.1</div>

 参考文献

http://www.marguerite.jp/Nihongo/WWW/RefCSS/opacity.html#VISIBILITY