スタイルシートの一覧です。必要な時に、必要なものを。辞書代わりに使ってくださいませ(^_-)-☆

ようこそ!スタイルシートの森へ♪

■要素の配置方法を指定する

position:

要素の配置方法の指定です。これは、画像や文字などの配置を強制的に移動したい場合などに使います。ホームページを作っているとわかると思いますが、微妙に位置がずれて、「どうしてもこの位置に置きたい!」って場合に使うと便利です。また、ブロックレベル要素の中には、上下に余白ができてしまい、うまくレイアウトがいかないものがあるので、そういうときにも威力を発揮します。

また、リンクメニューなどに使えば、このページのメニューのように、マウスカーソルが文字の上にくると、文字が移動するような仕掛けをすることができます。

値には以下のものが入ります。

  • static・・・配置方法を特に指定しない(デフォルト)
  • relative・・・通常表示される位置からの相対的な位置(ほとんどこれがメインです)
  • absolute・・・親要素に対して絶対的に配置
  • fixed・・・親要素に対して絶対的に配置(ブラウザが対応してないため、現状では使用不可)

記述例、(classを使って、任意の範囲を指定して、その範囲全体を移動する場合の例)

こうすることで、現在の位置から、上から100px 、左から100px のところに移動するということです。

また、マイナス(-)の値を入れると、逆に移動します。
要するに、top:-100px; とすると指定したものが上に移動します。

こうすると、h1の文字が10px 上に移動します。ただ、これを多用すると把握しきれなくなったりするので気をつけましょう(笑)

リンクに対して設定するには以下のように書き込みます。