スタートアップ研修記

こんにちは。hirafujiです。

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

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

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

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

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

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

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

例えばこんなHTML文書があります。

※ CSS Garden より引用

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

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

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

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

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

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

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

例えば、以下の様なHTML文書があります。

このHTML文書のa要素を、以下の様に指定してあげると…。

a {
   display: block ;
}

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

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

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

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