【プログラミング独学13日目】絶対配置
こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。13日目に突入しました。
私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。
https://chanmk.tokyo/programming_1/今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。
- プログラミング案件も受注できるようになりたい
- 歯科衛生士エンジニアを目指したい
- コーディングもライティングもできる歯科衛生士
【プログラミング独学13日目】学んだこと
今日もCSSの続きをやりました。ここ数日だめですね・・・プログラミング学習に対してやる気がありません。日中の空き時間は基本的に仕事や他のことをして、夜寝かしつけた後をプログラミング学習時間にしているのですが、そこから見直した方が良いかもしれません。
最近は寝かしつけ後の体力が残っていなかったり、やる気が起きなかったり・・・。今日も寝かしつけで一緒に寝てしまい、22時に起きました。なんとかドットインストールの画面を開いたものの、1レッスンが限界でした。なので今日のアウトプットはかなり短めです。
絶対配置
position : absolute ;これを「絶対配置」と呼び、表示は親要素のpositionがstaticかそれ以外かによって変わってきます。以下のように値を指定したとしましょう。
position : absolute ;
top : 30px ;
left : 10px ;まず親要素のpositionがstaticの場合は、ウィンドウの左上を起点として上から30px、左から10pxずれた位置に表示されます。position : fixed ;のときと似ていますが、position:fixedのように固定表示はされません。単にウィンドウの左上を起点とした位置に表示され、スクロールすると他と同じように流されていきます。
次に親要素のpositionがstatic以外の場合。例えばposition : relative ;のときは、ウィンドウの左上ではなく親要素の領域の左上を起点として上から30px、左から10pxずれた位置に表示されます。
position : relative ;
top : 40px ;
left : 30px;なおこれは「絶対配置」という名の通り、例えば親要素を上のように指定し移動させた場合も、先ほどのabsoluteの表示は変わらず親要素内で上から30px、左から10pxの位置に表示されます。
【プログラミング独学13日目】わからなかったこと・調べてわかったこと
今日学んで疑問が残った部分は以下です。
そもそも「絶対配置」とは
同じように悩んだ方が先生に質問していましたが、回答を読んでもピンときませんでした。それで調べていると、以下のような記述を見つけました。
例えば画像の上に「NEW」ってアイコンを出したり…他の要素と重ねて配置してみたり…そんなときに使えるのがabsoluteです。絶対配置とは、数学の絶対値と同じです。今いる場所にかかわらず、原点からどれだけ離れた距離に配置されているのかを示します。つまり起点からどれだけ離れているかを指定できるようになります。
参考侍エンジニア
「数字の絶対値と同じ」と聞いてすっきりしました。そういう意味の「絶対」ですね。そもそも絶対値という言葉を聞いたのが久々すぎてすぐにはピンときませんでしたが。また通知バッジにようなものを表示したいときに使うと聞いて、absoluteの用途や必要性がイメージできました。