ぱそおーるCSS講座

配置関連のスタイル


配置に関連したスタイルの説明をしていきます。
要素（タグ）に直接記述する場合の記述例を記載しています。
ページ全体に使用する時は<div style="ここの部分を抜き出してください">本文</div>

配置方法を設定する
position : キーワード;

position属性は、top,bottom,left,raight属性（下で解説）と組み合わせて使います。

キーワードは４種類あります。
  1. static : 配置位置を設定しない（デフォルト）
  2. relative : 通常の表示位置を基準にして相対位置で配置位置を決定
  3. absolute : 親要素のボックスを基準にして絶対位置で配置位置を決定
  4. fixed : windowsパソコンでは未対応
記述例
<div style="position : relative;top : 20px;left : 40px;">
relativeでtop20px left40pxを設定



上下左右の配置位置を設定する
top : キーワード、数値指定、%指定; 上端を基準に指定
bottom : キーワード、数値指定、%指定; 下端を基準に指定
left : キーワード、数値指定、%指定; 左端を基準に指定
rihgt : キーワード、数値指定、%指定; 右端を基準に指定

この属性はposition属性と併用して使います。
キーワードは、通常表示のautoしかありません。（デフォルト）

position属性の値をstaticにすると、この属性で指定したものは無効になります。

記述例
<div style="top : 80px;position : relative;">
ここに表示されます


左右の回り込みを設定する
float : キーワード;

position属性のabsoluteの値を併用すると回り込みがされません。

キーワードは３種類あります。
  1. none : 回り込みしません（デフォルト）
  2. left : 画像に設定すると、画像が左に配置され、文字が右に回り込みます。
  3. right : 画像に設定すると、画像が右に配置され、文字が左に回り込みます。
記述例
<img src="sample.gif" style="float : left;">
こんな感じで文字が
右側に回り込みます
結構便利でしょ？

<img src="sample.gif" style="float right;">
今度は左側に文字が回り込みます。
ちょっと空間が出来てしまいましたが
こんな感じ使います。

回り込み解除を設定する
clear : キーワード;

キーワードは４種類あります。
  1. none : 回り込みを解除しない（デフォルト）
  2. left : 左回り込みを解除 float属性のleftを解除
  3. right : 右回り込みを解除 float属性のrightを解除
  4. both : 左右のどちらを解除 float属性の値に関係なく解除

左の画像にfloat : leftを設定しています。
こんな感じで文章を入れていくと常に画像の右側に文字がくる事になります。
これを解除するのがclear属性です。
<div style="clear : both;">ここに次からの文章を入れる</div>
ここから新しい文章が始まります。

重なる順番を設定する
z-index : キーワード、数値指定;

画像や文字を重ねて表示した場合の重なる順序を設定できます。
数値指定は整数を使います。
0が背景で数字が大きくなるほど前面に表示されます。
キーワードはautoしか存在しません（デフォルト）
autoの場合は、HTMLの記述順に表示されます。（最後に記述したものが前面にきます）

<div>タグで作ったボックスを４つ重ねてあります。
カラーパレット赤
カラーパレット青
カラーパレット黄
カラーパレット緑
記述通りの順番で重なっています。

z-indexを指定して重なり順を逆転させます。
カラーパレット赤 z-index : 3;
カラーパレット青 z-index : 2;
カラーパレット黄 z-index : 1;
カラーパレット緑 z-index : 0;

要素の表示形式を設定する
display : キーワード;

キーワードは３種類あります。
  1. none : 要素自体を非表示にします。レイアウトにも影響しません。
  2. inline : 要素をインライン要素に変更します。
  3. block : 要素をブロックレベル要素に変更します。
none
書いてある文字や画像などを非表示にします。
非表示にするだけでなく、ないものとして扱われるので、レイアウトにも影響しません。
blogなどでアフィリエイトを扱っていると、1pxの画像が表示されてしまう事があります。
そういう画像を非表示にする時などには使えます。

inline
本来はブロックレベル要素である<p><div><h1〜h6>などのタグをインライン要素に変更します。当然、ブロックレベル要素のタグに使います。
使う事で、本来は改行が入るブロックレベル要素タグに改行が入らないなどのメリットがあります。

block
インライン要素のものをブロックレベル要素に変更します。
当然、インライン要素のタグに使います。
あまり使うところがなさそですが、このタグがブロックレベルだったらな〜と思える時は使えるかも？

要素の表示/非表示を設定する
visibility : キーワード;

キーワードは２種類あります。
  1. visible : 要素を表示（デフォルト）
  2. hidden : 要素を非表示

visible
特に意味がありません。
属性を設定しても、表示は通常のものと変わりません。

hidden
要素を非表示にします。
display属性のnoneと同じですが、こちらは見えないだけであるものだと認識されます。
書き込んだ文字などの領域は確保されますので、レイアウト的に影響を受けます。
HOMEへ