【CSS】marginのauto、こんな使い方って知ってる？

こんちは、先日自分のサーバーの全データをさらしてしまってたstaffです。（整理中に間違えて設定ファイルを消して…。）まぁ別にいいのやけど。
さくらレンタルサーバーではデフォルトで、（例えば）https://taneppa.net/にアクセスした時その階層にindexファイルが無い場合、サーバーにある全てファイル一覧が誰でも見れてしまう設定になってるので気を付けてくださいね。→ここ←みれば解決します。

さてさて本題、今回は知ってる人もいるかもですが、WEB1年生は結構知らない人が多い
（仕事でやっててももしかしたら知らない人いるかも）、ちょっとしたCSSの初歩的（？）雑学を。

marginのCSSプロパティの値でautoって良く使いますよね。

何も指定しなければ、divとかpとかブロック要素は通常左寄りですが、

たとえば、
div.tanebox {
margin-left: auto;
margin-right: auto;
}
ってすると、もちろん中央揃えになります。

ここまでは、皆さん知ってると思います。

ではこれを右寄せにしたい時どうします？
「外（親）のdivに　text-align:right;　かければ良いんじゃない？」って方。×ブッブー×。
text-alignは中のdivなどのブロック要素には通用しないのです。
（やってみてください。左寄のままです。）

じゃぁ　floatでright…？positionのrelativeとかright:0px;とか使って右側に位置指定？

いえ、そんなあとでWEB1年生がよくごちゃごちゃになるようなCSS使わなくてOK。

さっきのセンターぞろえをこう書き換えてみてください。
div.tanebox {
margin-left: auto;
margin-right: 0px;
}
margin右側が0pxで左がauto。
これで右寄せになります。

もうちょっとだけ応用してみると、(※こちらのみIE7以下効かないぽいです。。。)
div.tanebox {
margin-left: auto;
margin-right: 50px;
}
という風にmargin右側に50pxつけて、左をautoってすると。

右側に50px空いて、右寄せになります。

どうでしょうか？コーディングの仕事してる方は知ってるかもですが、
以外と知らなかった人もいるのでは？

最後にCSSに関するもう一つ雑学。
さっきの左右marginの書き方って、上下のmarginも決まっている場合、まとめて書けます。
上下が0pxの場合、

センター揃えは　margin: 0px auto;
右端ぞろえは　　margin: 0px 0px 0px auto;
（0の場合pxは省略してもよいです）

２つだとmargin: 【上下】【左右】;
４つだとmargin: 【上】【右】【下】【左】;

これはみなさん知ってますよね。

じゃ、こうやってまとめて書く方法の名称なんていうか知ってます？ｗ

「　ショートハンド　」といいます。

それでは、今日はこの辺で。ばいちゃ。