CSS display, posisionを試してみる!

こんにちは。hirafujiです。

今回のCSSでは、前回の講義に引き続き実際にCSSを変更して遊んでみました。
以下、今回の講義のポイントです。

【positionで、ブロック要素の表示位置を指定できる!】

positionを用いることで、ブロック要素の表示位置を指定することができます。

positionでは、以下の様な要素を指定することができます。

  • absolute:絶対位置への配置
  • relative:相対位置への配置 etc…

今回の講義では、absoluteを試してみました。
しかし、この説明では難しいですね…。

要するに、absoluteを用いる事で、指定した要素の表示位置を座標で指定することができます。

例えばこんなHTML文書があります。
pic
CSS Garden より引用

この赤枠の部分を、absoluteを用いて以下の様に指定すると、


#preamble{
    position: absolute;
    left : 100px ;
    top: 70px ;
    background: white ; //見やすい様に、背景色を変えてあります。
}

表示が変わりました!なるほどなるほど。
pic

【displayで、指定した要素の表示方法を変更できる!】

displayを用いることで、指定した要素の表示方法を指定することができます。

displayでは、以下の様な要素を指定することができます。

  • block:ブロック要素として表示する。
  • inline:インライン要素として表示する。
  • none:表示しない。 etc…

例えば、以下の様なHTML文書があります。
pic
このHTML文書のa要素を、以下の様に指定してあげると…。


a {
   display: block ;
}

表示が変わったのがわかるでしょうか!
さっきまではインライン要素として表示されていたa要素が、blockライン要素として表示されています。(「段落」として表示されるので、a要素の直後で改行が入っています。)
pic

なんだかとても面白いですね!

残念ながら、しばらくCSSの講義はありませんが、今回の講義では試しきれなかったrelativeやinline-table等も個人的に試してみたいと思います!

(08/07/25 irisawa追記)
お待たせしました。動画上がりました。

コメントをどうぞ

名前: (Required)

eMail: (Required)

Website:

Comment:

Spam Protection by WP-SpamFree