auto」が効かない時の理由を解説します。Webサイトを実装する際に必ず使うと思いますが、効かないと焦りますよね。auto」と思っている方に、適切な使い方とその他の中央よせの方法を図を交えてわかりやすくお伝えします。auto」で中央寄せする方法について、実際のコードやデモを用いて説明していきます。auto」の正体を暴いていきます。これはショートハンドという書き方で、省略されて記述されています。省略しない場合は下記の4つに分かれます。auto;この2つです。auto」のままだと使用できません。○px(下の余白)」と記述しましょう。auto」で中央寄せしてみる実際に実装したデモがこちらです。デモコードはこちらです。</div></body>CSSはこちらです。plum;}どの画面幅にしても中央寄せになっていることがわかります。中央寄せしたい.boxの大きさを指定し、その左右の余白を自動(auto)と指定することでどの画面幅でも.boxは中央にくるようになっています。plum;}このように書きかえれば思い通りに実装することができます。auto」を指定しても中央寄せにならない場合、どのような理由が考えられるでしょうか?3つの考えられる理由を順番にみていきましょう。auto」はブロック要素に対して効くもので、インライン要素には効きません。HTML5以降、ブロック要素やインライン要素という分類は廃止されましたが、この記事では便宜的にデフォルトのdisplayがblockになっている要素をブロック要素、デフォルトのdisplayがinlineとなっている要素はインライン要素と呼びます。インライン要素は、テキストやimgタグ、aタグ等が挙げられます。インライン要素にはインライン要素の中央寄せの方法があるので、その方法を記述しましょう。block;上記を指定したい要素またはクラスに記述しましょう。auto」が効きません。ブロック要素のwidthは初期値が親の100%なので、widthの指定がない場合は全面的に要素が広がっている状態になります。この状態だと中央寄せできないですね。この場合は、横幅を指定すれば中央寄せすることができます。300px;このように記述します。floatfloatプロパティは他のプロパティと少し違って、windowや親要素、その他の浮動要素によって位置が決まります。イメージとしては、「浮いている」という感じです。この場合、自動(auto)が効きません。floatプロパティは要素の回り込みを指定するプロパティなので、中央寄せする方法がありません。中央寄せしたい場合はfloatプロパティを使用しない他の実装方法を考えましょう。auto;で中央配置できません。absolute;を指定しているようを中央寄せする方法は別であるので、その方法を使用しましょう。auto」以外で中央寄せする方法を紹介します。center」を使用します。実際に文字の場合と画像の場合を見ていきましょう。center」を指定します。実際のコードをご覧ください。class="center">これは中央寄せです</p></div>下はCSSです。//見やすいように色をつけました}上記のコードをブラウザで表示すると下のようになります。(わかりやすいように背景とpタグに色をつけました)pタグ(白い部分)はブロック要素なので親要素の100%の横幅で広がっています。center」を指定したテキストは中央寄せになっていることがわかります。center」を指定すれば中央寄せすることができます。width="300"></figure></div>CSSはテキストで使用した.centerを使用しました。実際のブラウザ表示は下のようになります。center」を指定するのはimgタグではなく、そのラッパー要素に指定しましょう。画像もテキストと同様に中央寄せにできました。auto」では中央寄せできない、position:absoluteの中央寄せの方法をご紹介します。実際のコード実際に実装した時のコードはこちらです。class="box">.box</div></div>下はCSSです。-50%);}ブラウザではこのように表示されます。positionプロパティで中央寄せするポイントpositionプロパティで中央寄せする際のポイントは2点あります。順番にみていきましょう。fixedなどstatic以外を指定した親要素)。relativeがないと、ページ全体が基準となるので思いもしないところに配置してしまいます。50%」を指定して配置していきます。その際、その状態だと.boxの上辺と左辺が.wrapperの上から50%、左から50%の位置に来てしまい中央にはなりません。その時に使用するのが「transform」です。「transform」は指定した数値の分、要素を移動するプロパティで、今回はx軸方向に.boxの横幅半分、y軸方向に縦幅半分をマイナスするように指定しています。これによって中央寄せすることができました。flex」を使用して中央配置する方法もあります。</div>下はCSSです。//見やすいように色をつけました}ブラウザで表示を確認すると、このようになります。center」を指定すると中央寄せにすることができます。flex」を使用する際に、水平方向に揃えるときのプロパティで初期値は「flex-start」で左側によります。その他、「flex-end」「center」「space-between」「space-around」とありますが、今回は中央配置の「center」を使用します。center;」を追記すると天地中央になります。flex」はとても便利で、中央寄せ・天地中央にするのにCSSを3行追加するだけですみました。横並びにする時だけでなく、中央寄せも簡単にできます。auto」が効かない時の理由を解説しました。flex」やpositionプロパティを使用した方がいい場合もあります。auto」を深く理解し、使える場面を分けていきましょう。contents」について解説します。displayプロパティはよく使用す...【CSS】line-heightをちゃんと理解しよう!図を用いて解説します今回はCSSのプロパティ「line-height」について解説します。今回は、ページ内リンクで遷移先のコンテンツを、画面中央に配置するテクニックを紹介します。株式会社RETVALでHTML/CSS、WordPressのコーディングを担当。