かめ。ブログ

フロントエンドエンジニアが「Web」「Youtube」「3D」「お金」「お買い物情報」など、興味があることについて深堀っていくブログです。

marginを使った知っておくとお得なテクニック

2021年10月18日

margin: 0 auto;での中央寄せ。margin-left: auto;での右寄せ。

margin: 0 auto;真ん中に寄せることができるテクニックは前から知っていたのですが、margin-left: auto;右に寄せられるテクニック地味に最近知りました。。15年webやってきたのに。。なんだかんだとても便利ですね。

position: absolute;とmargin: auto;


.box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0 16px;
  margin: auto;
  background-color: #39c;
  width: 70%;
  height: 100px;
  color: #fff;
}

position: absolute;と組み合わせて、left, right, top, bottomの値を0にしてmargin: auto;してあげることで上下左右の中央寄せをすることができます

position: absolute;とmargin: auto;の応用


.box-img {
  margin: auto 0;
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 30px;
  width: 100px;
  height: 100px;
  background-color: #333;
}

bottom: 30px;として若干ずらしてあげることで、若干ずらした位置に寄せると言うことが可能

negative margin(marginをマイナスの値にする)


box {
   ground-color: #39c;
  width: 70%;
  height: 100px;
  margin-bottom: -20px;
}

marginをマイナスの値にすると隣接するタグを被すようにマイナスのmarginをつけることができます
たまーにどうしても被るようなレイアウトの場合には使いますが、たくさん使いすぐると混乱を招きがちなのでなるべく使わないようにするのがよいです

まとめ

margin-left: auto;右に寄せられるテクニックを最近知ってびっくりしました。。(昔はできなかったはず)
工夫次第でいろいろなことができるのでcssはパズルみたいで面白いですねっ。
日々使えるcssは増えていっているので、キャッチアップしてテクニックを増やしていきたいですね。

最近いいないいなと思ったcss情報
CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法 | コリス

おすすめの本

Javascriptを勉強する際に読んでおくと良いなと思った本たちです。
特にリーダブルコードは綺麗なコードを書く考え方が身に付きます。いまでもその考え方が根付いています。

よくみられてる記事