【positon:absoluteとtransform:translate】子要素を自由自在に配置する方法まとめ

【positon:absoluteとtransform:translate】子要素を自由自在に配置する方法まとめ

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • 子要素をposition:absoluteやtransform:translateを使って、上下中央、左右中央+上など自由自在に配置する方法が知りたい
  • 知らないと確実に損するし、要素の配置に躓く大きな要因になるtransform:translateの使い方が知りたい

という方のお悩みを解決します!

今回、紹介するサンプルコードはぼくがふだん、実際のWebサイト制作案件で使用しているものです。

ここだけの話、このTipsを使わないコーディング案件にはほとんど出会ったことがありません笑

それだけ習得必須の技術となりますのでぜひ覚えていってください!

絶対配置の要素のコーディングに悩んでいる方のお役に立てれば幸いです。

上下中央に配置

absoluteで要素配置サンプル

親要素のど真ん中に配置するスタイリングです。

これ、めちゃくちゃ頻繁に使います!!笑

HTML
<div class="Inner">
  <div class="Card">
    <div class="Card-Badge">タイトル</div>
  </div>
</div>
CSS
.Inner{
  padding-top: 40px;
}
.Card{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 320px;
  height: 200px;
  background: #5bc8ac;
}
.Card-Badge{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  
  width: 120px;
  background: #eee;
  font-weight: bold;
}

左右中央 + 上に配置

absoluteで要素配置サンプル

たまに、見出しのデザインで添付画像のような配置のものがあります。

HTML
<div class="Inner">
  <div class="Card">
    <div class="Card-Badge">タイトル</div>
  </div>
</div>
CSS
.Inner{
  padding-top: 40px;
}
.Card{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 320px;
  height: 200px;
  background: #5bc8ac;
}
.Card-Badge{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,-50%);
  
  width: 120px;
  background: #eee;
  font-weight: bold;
}

左右中央 + 下に配置

absoluteで要素配置サンプル

HTML
<div class="Inner">
  <div class="Card">
    <div class="Card-Badge">タイトル</div>
  </div>
</div>
CSS
.Inner{
  padding-top: 40px;
}
.Card{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 320px;
  height: 200px;
  background: #5bc8ac;
}
.Card-Badge{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%,50%);
  
  width: 120px;
  background: #eee;
  font-weight: bold;
}

上下中央 + 左に配置

absoluteで要素配置サンプル

HTML
<div class="Inner">
  <div class="Card">
    <div class="Card-Badge">タイトル</div>
  </div>
</div>
CSS
.Inner{
  padding-top: 40px;
}
.Card{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 320px;
  height: 200px;
  background: #5bc8ac;
}
.Card-Badge{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%,-50%);
  
  width: 120px;
  background: #eee;
  font-weight: bold;
}

上下中央 + 右に配置

absoluteで要素配置サンプル

HTML
<div class="Inner">
  <div class="Card">
    <div class="Card-Badge">タイトル</div>
  </div>
</div>
CSS
.Inner{
  padding-top: 40px;
}
.Card{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 320px;
  height: 200px;
  background: #5bc8ac;
}
.Card-Badge{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%,-50%);
  
  width: 120px;
  background: #eee;
  font-weight: bold;
}

まとめ

以上、絶対配置の要素をあらゆる場所に揃える方法をまとめてを紹介しました。

実際のWeb制作案件のコーディングに臨むにあたって、今回紹介したTipsを知っているのと知らないのでは天と地の差があります。

じゃんじゃん使って、コーディングを楽にしていきましょう〜!

 

コーディングスキルアップシリーズはこちら!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です