デイトラの模写作品完成しました!!!

CSS
スポンサーリンク

報告!!


本日は今週1週間取り掛かっていたデイトラの模写サイトが完成しました!!

401 Unauthorized

著作権対策のため、basic認証をかけています。ID、Password共に”test”です。

こちらがリンクになります。↓

デイトラ模写作品

著作権対策のため、basic認証をかけています。ID、Password共に”test”です。

今回の備忘録は初めての模写の中で理解が深まったpositionプロパティについてメモしていきたいと思います。

今回の備忘録はこんな方におすすめ!

  • position: absolute; って勉強したけどよくわからない。
  • positionプロパティってどういうときに使用するの?
  • 使用するときの注意点

positionプロパティとは?

positionプロパティとは、指定した要素の配置方法を決められるプロパティです。
その中でもとることができる値はいくつかありますが、今回はabsoluteについて説明していきます。

position: absolute;絶対配置を指定する値です。

絶対配置とは数学の絶対値と同じように原点からどれだけ離れた距離に配置されているのかを示します。つまり起点からどれだけ離れているかを指定できるようになります。

デフォルトの起点はそのページ全体の左上です。

どういう時に使用するかと言うと今回の模写では画像の上に文字を配置するのに活躍してくれています。

位置の指定方法

position: absolute;は設定しただけでは具体的な位置の指定は出来ません。

位置の指定は、top、bottom、left、rightで行ないます。
それぞれ上下上下からどれだけ離れているかを設定します。
例えば、上から50pxの場所に設定したいときは

position: absolute;
top: 50px;

のようにコーディングします。
bottomやleftも同様に指定することで好きな位置に配置出来ます。

absoluteの起点指定をする方法

親要素にrelativeかfixedを設定する

absoluteを指定する要素の親要素にrelativeかfixedをつけることで、親要素を起点に配置することができます。

absolute指定は便利ですが、そのままではページ全体を起点にしているため画面のサイズによってはとんでもない位置に配置されてしまう可能性があります。

しかし、起点を決めておけば大丈夫なので、absolute指定をする際は親要素にrelativeかfixedを設定しましょう。

子要素を親要素の真ん中に配置する方法

ある要素を親要素の真ん中に配置したいという場合ありますよね…
そんなときはこんな風にコードを書きましょう。

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
 }

このコードは決り文句みたいなものなので、よければコピペして使っていただければ幸いです。

position: absolute;を使う際の注意点

これまでだととても便利そうですが、position: absolute;を使うときには注意するべき点があります。

起点を理解して使用しよう

起点という概念を理解せずに使うと、要素があらぬ所に配置されてしまったり、WEBサイトの崩れの原因になってしまったりしてしまいます。

そのため
・この要素は親にrelativeが設定されているからここが起点になるな!
・この要素は親にrelativeが設定されていないけど先祖要素にrelativeが指定されているからここが起点になるぞ!

のように、必ず起点を意識しながら使うようにしましょう!

まとめ

今回の記事いかがでしたか?
position: absolute;は最初はちょっと理解するのが難しいですが、なれるととても便利なcssですので是非自分でも使ってみて理解するのがおすすめです。

ではまた!

コメント

タイトルとURLをコピーしました