RAZONA日誌

razonaに入社して正社員になるまでの間、日誌をつけることになりました。

razona入社14日目

目次

 

はいさーい!ブロック要素でもないのに体が横に広がっていきます。ノスケです。

今日も、学んだことを書いていきます。

 

positionを覚えよう

今日も課題の続きをしていると、

壁にぶつかってしまいました。

要素に要素を重ねるというデザインでした。

調べてみると・・・

 

それを可能にするのがpositionらしいです。

要素の位置を自由自在に操れるらしい。

以前、後ろの席のkuroさんが

私が一番好きなプロパティはposition

と言っていたのを思い出しました。

当時は、何を言ってるのかさっぱり分かりませんでしたが、

今思うと、こんな便利なプロパティなら好きになる気持ちも、

わかる気がします。僕もウェブ脳になってしまったのでしょうか。

 

positionの値

 

static 

特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。

 

relative

相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。

 

absolute

絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。

 

fixed

絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。

※htmlクイックリファレンスより引用

 

 

relativeは、色々なところで使えそうな気がします。

実際にposition relativeを使って、無事デザインすることができました。

一件落着です。

 

 

cssでスケスケに!?

課題を進めていくと、

白い四角の図形が透けていて、後ろの壁紙が見えるようなデザインがありました。

(説明が下手くそですみません。)

そんなことできるのか!?

 

僕「この透けているデザインはどうやるんですか?」

上司K「これは、cssでちゃんと作れるぞ」

 

調べてみると、2通りのやり方がありました。

 

opacityとrgbaと言うプロパティを使うものでした。

少し時間がないので、説明は省きます。

今回はrgbaでなんとかなりました。

 

最後に

今日は、色々使いどころのありそうな

positionを覚えたので、大満足です。

課題も少しづつではありますが、

進んできています。

それではまた!