スタイルシートの道具箱～手作りのホームページをスタイルシートで！～

<div style="display:list-item;background-color:yellow">list-itemを用いれば</div>
<div style="display:list-item;background-color:yellow">無理やりリスト項目に</div>
<div style="display:list-item;background-color:yellow">する事が出来ます</div>

noneに指定するとなります。

noneに指定すると<div style="display:none;background-color:yellow;">このように表示されなく</div>なります。

■非表示にする

▲ページTOPへ

visibility:

要素を非表示にする事が出来ます。表示しない領域でも、その分のスペースが確保され空白が現れます。

visible
hidden

表示する
表示しない

サンプル

hiddenにすると、その領域は確保されたまま内容が表示されなくなります。
ここには画像がありますが⇒

、画像も同様に非表示になります。

hiddenにすると、<span style="visibility:hidden">その領域は確保されたまま</span>内容が表示されなくなります。ここには画像がありますが⇒<img src="sample.jpg" style="visibility:hidden">、画像も同様に非表示になります

■配置方法

▲ページTOPへ

position:

以下のパラメータから要素の配置方法を指定します。表示位置の指定は次項のtop,left.right,bottomを利用しますが、これらを指定しないとpositionだけでは表示は変わりません。

static
relative
absolute
fixed

通常の表示位置（デフォルト）
通常の表示位置から相対的に配置
親要素からの絶対的な位置の指定
親要素からの絶対的な位置に固定（スクロールしても移動しない）※Netscape6.2以降のみ、IE未対応

サンプル

この画像はstaticの位置（初期設定）を示します

この画像が配置を変えた位置を示します
画像はともに40px ×40pxのサイズです。

緑の画像はrelativeで、上端から40px、左端から40pxの位置に指定しました。

緑の画像はabsoluteで、上端から40px、左端から40pxの位置に指定しました。
※注意：absoluteは親要素からの絶対位置で指定されますが、その親要素にも同様にpositionでrelativeかabsoluteの設定がされている必要があります。設定は無い場合はbodyに対しての絶対位置になるので注意。

緑の画像はfixedで、上端から40px、左端から40pxの位置に指定しました。IEは対応していないので、変な位置に表示されてしまいます。

触れて下さい
クリックして下さい

a:hoverやa:activeの表示位置を変える事で、カーソルが触れたりクリックすると文字がずれた効果を出す事が出来ます。

※headタグ内に以下を設定
<style type="text/css">
a:hover { position:relative,top:1,left:1}
a:active { position:relative,top:1,left:1}
</style>

■位置指定

▲ページTOPへ

top:

bottom:

left:

right:

positionプロパティでstatic以外を指定した時に、具体的な位置を指定するプロパティです。topは上端から、leftは左端から、rightは右端から、bottomは下端からの距離を指定します。

数値
auto

単位の紹介で示している単位、又は％で距離を指定します
通常の位置になります（デフォルト）

サンプル

・top:50px
・left:0px
・right:auto
・bottom:auto

・top:10px
・left:auto
・right:10px
・bottom:auto

・top:auto
・left:150px
・right:auto
・bottom:0

<div style="position:absolute;top:50;left:0;right:auto;bottom:auto;width:100;">
・top:50px
・left:0px
・right:auto
・bottom:auto
</div>

<div style="position:absolute;top:10;left:auto;right:10;bottom:auto;width:100;">
・top:10px
・left:auto
・right:10px
・bottom:auto
</div>

<div style="position:absolute;top:auto;left:150;right:auto;bottom:0;width:100;">
・top:auto
・left:150px
・right:auto
・bottom:0
</div>

■回り込み

▲ページTOPへ

float: (キーワード）

対象領域を左右を寄せて、周りの要素を回り込ませます。tableタグであればalignの設定と同じ働きを示します。

left
right
none

領域を左に寄せて、周囲を右に回りこませる
領域を右に寄せて、周囲を左に回りこませる
回り込みを起こさない

サンプル

第９条　日本国民は、正義と秩序を基調とする国際平和を誠実に希求し、国権の発動たる戦争と、武力による威嚇又は武力の行使は、国際紛争を解決する手段としては、永久にこれを放棄する。２　前項の目的を達するため、陸海空軍その他の戦力は、これを保持しない。国の交戦権は、これを認めない

<img src="sample.jpg" style="float:left;">第９条　日本国民は、正義と秩序を基調とする国際平和を誠実に希求し・・

第９条　日本国民は、正義と秩序を基調とする国際平和を誠実に希求し、国権の発動たる戦争と、武力による威嚇又は武力の行使は、国際紛争を解決する手段としては、永久にこれを放棄する。２　前項の目的を達するため、陸海空軍その他の戦力は、これを保持しない。国の交戦権は、これを認めない。

<img src="sample.jpg" style="float:right;">第９条　日本国民は、正義と秩序を基調とする国際平和を誠実に希求し・・

float:left
width:30%

float:right
width:30%

float設定無し

このようにfloatを同時に複数箇所に設定すると、divを並べるだけでテーブルのような見え方になります。

<div style="float:left;width:30%;background-color:#ccffff;">float:left<br>width:30%</div>
<div style="float:right;width:30%;background-color:#ffccff">float:right<br>width:30%</div>
<div style="background-color:#ffffcc;">float設定無し</div>

■回り込みの解除

▲ページTOPへ

clear:

floatで設定した回り込みを解除するために使います。floatでright設定ならclearもright、leftならleft、又はbothなら全て解除出来ます。

left
right
both
none

左への回り込みを解除
右への回り込みを解除
左右に関係無く回り込みを解除
解除しない

サンプル

第９条　日本国民は、正義と秩序を基調とする国際平和を誠実に希求し、国権の発動たる戦争と、武力による威嚇又は武力の行使は、国際紛争を解決する手段としては、永久にこれを放棄する。
２　前項の目的を達するため、陸海空軍その他の戦力は、これを保持しない。国の交戦権は、これを認めない。

<img src="sample.jpg" style="float:right;">第９条　日本国民は、正義と秩序を基調とする国際平和を誠実に希求し、国権の発動たる戦争と、武力による威嚇又は武力の行使は、国際紛争を解決する手段としては、永久にこれを放棄する。<br style="clear:right">２　前項の目的を達するため、陸海空軍その他の戦力は、これを保持しない。国の交戦権は、これを認めない。

■重なりの順序

▲ページTOPへ

x-index:

要素が重なり合った時の、重なり合いの順序を指定します。重なり合いは主にpositionにより要素の位置を指定した時に発生します。この指定をせずに重なり合った場合、後から設定した要素が上に表示されます。
入力値は以下のとおり。

整数	０、１、２、－１、－２など。数値が大きいほど前面、ちいさいほど背面。

サンプル

-1

左がz-indexを指定した場合、右が指定しなかった場合。

▲ページTOPへ