HTML07_タグではなくスタイルシートでセンタリングする方法

こんばんは! Benです。久々の休日なので、贅沢に8時間以上寝れました。いろいろあったけど、子を持つ親は大変ですね。というわけで今日からは気まぐれなTips集と行きたいです。まずは、センタリングです。

HTMLでかつて中央ぞろえ、つまりセンタリングをするには、まさに<center>というタグで強引にできてました。でも、それはやはりコンテンツとデザインの分離の流れでなくなる方向に。<b>タグとか<u>タグがなくなるのは年配の方にとって違和感があると思いますが、これも時代の流れですね。

20160123a.PNG
というわけで、ブロック要素のDIVを例にしてみました。DIVのstyleでtext-alignは自分の中身のテキストの位置を指定しています。leftだったら、左揃えです。では、自分自身がどのような配置になるかはどこで指定しているのでしょう。

それはmarginという余白です。marginは例えば左寄せで、左の余白が10pxだった場合、maegin-left:10pxですみます。中央揃えは結局、左右方向はautoですよ! ということで、margin:0px auto;です。上下方向の余白はこの場合ゼロ。左右はともに自動なので、均等に揃えた結果、センタリングになります。ちなみに、marginでもpaddingでもそうですが、今回の場合のように、4辺を指定するとき、普通に指定すると、コロンの後、上、右、下、左の順で値を指定して、その間は半角スペースで区切ります。でも、上下や左右で同じ値を使う左右上下対象の時は、片方だけでも設定できます。つまり、上下で1px、左右で3pxのmarginがあるときは、正式には上右下左なので、margin:1px 3px 1px 3px; ですが、繰り返しは省略できるのでmargin:1px 3px;でもOKです。

<div style="padding:0;margin:0px auto;width:50%;background-color:yellow;">
実際に指定するとこんな感じです。今回は画面幅に対する相対表示で、ブロック要素が50%なので、左右の余白はそれぞれ25%ですね。

今後も気休めにちょくちょくTipsをノートしたいと思います。ではまた!

この記事へのコメント


この記事へのトラックバック