要素1つで中央寄せ、2つ以上で横並びにするCSS。要素1つで中央寄せ、2つ以上で横並びにするCSS。シェフ当サイトで使っているWordPressテーマ「4536」では、PC表示時、記事下や記事中のアドセンス(レクタングル大)を2つ横並びで表示できるんですが、1つしか表示しない場合は左寄せになっていました。「まぁ、2つ横並びの方がキレイだし...」と、1つだけ表示したいニーズは特になかったんですが、1つだけ表示した方が視認性が高いことに気づいたので、下記のように修正を加えました。要素が1つだけの時は中央寄せ要素が2つ以上の時は横並び今回はそのCSSを、サンプルを交えてご紹介するので、ぜひ参考にしていただければと思います。インラインブロックで横並び今回のポイントは、floatではなく、inline-block(インラインブロック)で横並びさせることです。インラインブロック要素は、横に並ぶインライン要素と、縦に並ぶブロック要素の性質を併せ持つからです。通常のブロック要素ならmargin:auto;を使って中央寄せしますが、インラインブロック要素ならtext-align:center;で中央寄せできます。要素が1つの時と、2つ以上の時とで、どのようなデザインになるのか、サンプルを見ながら確認してみましょう。要素が1つの時は、このように中央寄せになります。CodePen.要素が2つ以上の時そして、要素が2つ以上の時は、それぞれの要素が中央寄せのまま横並びになります。これがfloatとの大きな違いでしょうか。CodePen.余白を設定してキレイに横並び後は、余白を設定することでキレイに横並びさせることができます。CodePen.追加するCSSでは、コピペ用に重要なコードをご紹介します。親要素に追加するCSS#box-wrapperはサンプルの親要素の名前なので、適宜変更してください。*/}解説インラインブロック要素特有の隙間を埋めるために、letter-spacingにマイナスの値を指定。text-align:centerで子要素を含めてすべて中央寄せにします。子要素に追加するCSS.boxはサンプルの子要素の名前なので、適宜変更してください。親要素に指定したマイナスのletter-spacingの値を元に戻します。inline-blockの説明は割愛。余白の設定アドセンス、もしくは、バナーをキレイに表示させるためには余白が必要ですが、今回の方法では、要素が1つの時には余白が必要ないので、2つ目の要素から余白を設定すればいいでしょう。auto;を指定すればOKです。auto;}まとめ条件分岐でゴニョゴニョしなくても、今回ご紹介したシンプルなCSSを追加するだけで、中央寄せ・横並びが可能です。́)ゞカテゴリー:プログラミング学習シェフこのサイト「Fantastech」を運営している人。WordPressテーマ「4536」の開発中にインプットした情報などを発信中。無料コードエディタ「ATOM」をおすすめする4つの理由2019/2/15もっと見るサイトの文字や画像をコピー禁止にする方法【コピーガード】2018/7/18もっと見るPHPのstr_replaceとpreg_replace(正規表現)の使い方2018/7/4もっと見るCSSで文字数に合わせて吹き出しの横幅を変える簡単な方法2018/5/22もっと見るWindowsのブラウザ別スクロールバー非表示方法【CSS】2018/3/23もっと見るプログラミング初心者の無料の学習方法は?独学できる?2018/3/9もっと見るechoしたパラメータを返り値で扱えるob_start関数の使い方2018/1/20もっと見る初心者向け!プログラミング(PHP)のよくあるエラー原因。上に表示された文字を入力してください。初心者向け!プログラミング(PHP)のよくあるエラー原因。「ページを開けません。サーバが見つかりません」の原因は?PHPのstr_replaceとpreg_replace(正規表現)の使い方WordPressで会話風の画像とテキストをコピペで簡単表示!WordPressのユーザー名・パスワードを確認・変更する方法は?Facebookページのユーザーネームが登録・変更できない原因は?ローカル環境のWordPressサイトを本番環境へ移行する方法WordPressオリジナルテーマを管理画面で更新可能にする方法。Jobsの導入方法や注意点などカスタムデータ属性でCSSフレームワークを作ろうきたぞ、国内初の流体シェイプ国内初となる流体シェイプをデザインに取り入れたWordPressテーマ「4536」を公開しました。