
スキルアップ
2021.04.15
社会人におすすめなプログラミングスクールの条件とは?目的別25校と選び方
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
ITコラム
2017.04.06
marginプロパティの値には、数値の他にautoという値があります。
autoという名前の通り、ブラウサが自動的に値を決めますが、auto特有のルールがあります。
今回は、marginプロパティの値の1つであるautoついてまとめたいと思います。
marginプロパティについては、以下のページもご参照下さい。
CSS【 margin 】1 ~ マージンとショートハンド
CSS【 margin 】2 ~ autoとwidthと上下と左右(本ページ)
CSS【 margin 】3 ~ ネガティブマージン
CSS【 margin 】4 ~ マージンの相殺 (margin collapsing)(1)
CSS【 margin 】5 ~ マージンの相殺 (margin collapsing)(2)
1.widthなしの場合はauto=0
2.widthありの場合はauto=自動算出
マージンをautoに指定すると、値が自動算出されて決定しますが、autoが有効に機能するのは左右のマージンのみです。上下のマージンにautoを指定しても、値は0となります。
また、左右のマージンについても、width(要素の横幅)の指定がない場合は自動算出する対象(width)がないため、autoを指定しても値は0となります。
よって、width(要素の横幅)の指定がない場合に「margin:auto(上下左右全部 auto )」と指定すると、margin:0 と同じ結果になります。
上下マージンは、もともとautoが機能せず、auto指定で0になります。
左右マージンは、widthの指定がないので、0になります。
次の表示は、div要素とp要素を親子関係にして、子要素のp要素にはグレーの背景色を指定しています。
そして、このp要素に、width指定なしで margin:auto と指定しました。
margin:auto(width指定なし)
ソースは次の通りです。
(CSS) div#sample { border:solid 1px #ccc; padding:0;} div#sample p { line-height:3em; background:#AAAAAA; margin:auto;} (HTML) <div id="sample"> <p>margin:auto(width指定なし)</p> </div>
div要素(親要素)とp要素(子要素)との間にスペースがないので、マージンは0になっています。
このp要素に、width指定なしで左右のマージンのみautoを指定すると、次のような表示になります。
margin:2em auto(width指定なし)
ソースは次の通りです。
(CSS) div#sample { border:solid 1px #ccc; padding:0;} div#sample p { line-height:3em; background:#AAAAAA; margin:2em auto;} (HTML) <div id="sample"> <p>margin:2em auto(width指定なし)</p> </div>
マージンを指定する要素にwidthの指定がない場合は、左右のマージンのauto値は0となります。
auto指定は、widthの値を元に自動算出するので、計算の対象となるwidthの指定がない場合は自動算出ができません。
同じく、p要素に、下マージンのみにautoを指定すると、次のような表示になります。
margin:1em 1em auto
ソースは次の通りです。
(CSS) div#sample { border:solid 1px #ccc; padding:0;} div#sample p { line-height:3em; background:#AAAAAA; margin:1em 1em auto;} (HTML) <div id="sample"> <p>margin:1em 1em auto</p> </div>
上下のマージンにはautoが効きません。
上や下のマージンにautoを指定しても、値は0になります。
上の例に対して、要素にwidthの指定がある場合は、左右のマージンはauto指定で自動算出されます。
左右のマージンともautoに指定すると、自動算出の結果、横のセンター合わせとなります。
次の表示は、div要素とp要素を親子関係にして、子要素のp要素にwidthを指定し、右のマージンだけautoを指定しています。
margin:1em auto 1em 1em
ソースは次の通りです。
(CSS) div#sample {border:solid 1px #ccc;} div#sample p { background:#AAAAAA; padding:1em; width:50%; margin:1em auto 1em 1em;} (HTML) <div id="sample"> <p>margin:1em auto 1em 1em</p> </div>
右マージンだけautoを指定すると、要素のwidth値やpadding値を差し引いたmarginの値が自動算出されます。表示的には、div要素(親要素)に text-align:left と指定したようなレイアウトです。
逆に、左マージンだけauto指定をした場合も同様に、text-align: right と同じようなレイアウトになります。
margin:1em auto 1em 1em;という指定方法は、CSSのショートハンドです。
ショートハンドについては、CSS【 margin 】1 ~ マージンとショートハンドをご覧下さい。
要素のwidthを指定して、左右のマージンを共にautoに指定すると、横方向のセンター合わせになります。これはCSSのレイアウトでよく使う設定です。
margin:1em auto 1em auto
ソースは次の通りです。
(CSS) div#sample {border:solid 1px #ccc;} div#sample p { background:#AAAAAA; padding:1em; width:50%; margin:1em auto 1em auto;} (HTML) <div id="sample"> <p>margin:1em auto 1em auto</p> </div>
スキルアップ
2021.04.15
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
スキルアップ
2021.04.15
Webディレクターとは、Webサイト制作や、企画、運用の現場においてリーダーの役割を担う職種です。多くの業務をこなすため大変な仕事ではありますが、その分やりがいや魅力もある仕事です。本記事では、Webディレクターの具体的 […]
スキルアップ
2021.04.14
IT業界やエンジニアという職種に対してなんとなくイメージは持っているものの、具体的にどんな仕事をしているのか詳しく知らないという方もいらっしゃるでしょう。本記事では、IT業界とはどんな業界なのかをわかりやすく解説。各業種 […]
スキルアップ
2021.04.02
IT業界未経験からITエンジニアへ転職しようとするとき、強い味方になってくれるのが資格です。IT系の資格試験には数多くの種類があり、取得することでスキルの証明が可能。本記事では、未経験者が就職を有利にするためのおすすめ資 […]
スキルアップ
2021.04.01
「プログラミングができると就活が余裕らしいけど、大学生のうちにプログラミングを学ぶメリットって何?」と考えている方に向けて、本記事では元エンジニアである筆者がこれまでの経験則をもとに、在学中にプログラミングを学習するメリ […]
スキルアップ
2021.04.01
【2021年最新】いざJava SE 11のBronze資格にチャレンジしようと思っても「申込方法が複雑すぎて難しい…」と困っている方も多いのでは?本記事では、2020年に新しくなったOracle認定Javaプログラマ試 […]
INTERNOUS,inc. All rights reserved.