CSSプロパティ

CSSプロパティ

CSSプロパティ

このページではCSSプロパティの中から特に気になるものをピックアップしています。
CSSプロパティ一覧

CSSプロパティのルール

CSSプロパティの中には利用時に細かなルールが定められているものもあります。
これらのルール通りに利用しないと思わぬ不具合が発生するので注意してください。
特に思ったように表示されない時は、CSSの説明サイトでプロパティのルールを調べると解決できる場合があります。

フロートプロパティ

フロートの注意点

floatを利用する際にはいくつか決まり事があります。
中でも注意が必要なのはmargin、padding、borderはfloatと一緒に指定しないと言うのがあります。
これらは一般的によく使うと思いますが、floatを指定した要素には使わないようにしてください。
また、どうしても利用したい場合は、後述のように別の要素に指定すれば対処できます。

floatと一緒に指定できないもの:margin、padding、border

フロートを利用したメニュー

メニューでfloatを利用する場合はいくつか制限があります。
このため思うようにスタイルが指定できない時がありますが、以下のようにすればfloatでも比較的扱いやすくなります。
また、positionを利用した場合はどうしても子要素の数が多くなりますが、floatを利用すれば少なくて済むのが利点です。

  1. メニューのul要素:list-style-type:none;を指定(記号が不要な場合のみ)
  2. メニューのa要素:display:block;を指定、floatと相性の悪いスタイルを指定
  3. メニューのli要素:floatを指定

効果的なフロート解除方法

フロートを解除するためには通常clear:bothを利用しますが、少し使いづらい時があります。
これを簡単に回避するCSSテクニックとして有名な手法がclearfixで、親要素に対して以下のような指定をするだけでフロート解除が可能です。
ちなみに書式は色々あるようですが、以下はその中でも一般的なclearfixの例です。
[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix
clearfixを使ったDIVの段組みテクニック

.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display:inline-block;}
* html .clearfix {height:1%;}
.clearfix {display:block;}

CSSに上記の4行を記述したら、class="clearfix"をHTMLの対象要素に指定する

ポジションプロパティ

ポジションの注意点

positionプロパティはレスポンシブで非常に不利になる場合が多いため、あまり多様しないよう注意してください。
ただし、使い方によっては効果的に使えるので特定要素に限定した使用方法が一般的となります。

ポジションを利用した段組

positionプロパティを利用して段組を作る方法です。

  1. 親要素に指定:position:relative;(子要素の基点にする)
  2. 子要素に指定:position:absolute;(親要素を基点に子要素を表示する)
  3. 子要素の表示位置を指定:top、left、bottom、right:;

ボックスの重なり順序を指定する方法

positionプロパティで複数のボックスを利用すると配置によっては重なる場合があります。
そんな時はz-indexプロパティを利用すれば、重なる順序を指定する事ができます。

  1. 各ボックスに指定:z-index:;
  2. 値(重なる順序):auto(親要素と同じ階層)、0~(値が大きいほど上に表示)

ヘッダに複数画像を表示する方法

ヘッダ部分に複数の画像を表示する方法です。
やり方はpositionを使ってヘッダを基点に各画像を配置し、z-indexで重なり順序を指定するだけです。
ただし、この方法は画像の総数が増えて表示に時間がかかるため、特別な理由がない限りは一枚の画像に加工した方が効果的です。

基点となる要素(containerやheaderなど) {position:relative;}
1枚目の画像の要素 {position:absolute;top、left、bottom、right:;z-index:;}
2枚目の画像の要素 {position:absolute;top、left、bottom、right:;z-index:;}

ディスプレイプロパティ

要素のブロック化

display:blockを使えば要素を強制的にブロック要素に変える事ができます。
これを利用すればa要素をブロック化する事も可能で、使い方次第ではわりと便利です。
ブロックレベル要素とインライン要素

要素 {display:block;}

要素のインライン化

display:inlineを使えば要素を強制的にインライン要素に変える事ができます。
また、インラインだとユーザー側が非表示にした際に、不要なスペースを非表示にする事もできます。

要素 {display:inline;}

要素のテーブル化

display:tableを使えば要素を強制的にテーブル要素に変える事ができます。
インラインもブロックも使いたくないと言う時には便利です。

要素 {display:table;}

要素の非表示方法

display:noneを利用すれば対象の要素を丸ごと非表示にできるので、うまく使うとCSSハックが可能です。
例えばブラウザ別にCSSを分けておき、IEだけ非表示にしたり、その逆も可能です。

要素 {display:none;}

オンラインPC館
トップページテクニックネット → CSSプロパティ