- 公開日
- 更新日
同じ行に「中央寄せ」と「右寄せ（左寄せ）」を両立させるCSS
今日は、実際の案件で使ったCSSテクニックを紹介します。
タイトルを見て何言ってんだと思った方もいるかもしれませんが要は2つの子要素を上の画像のように一つは中央寄せ、もう一つは片側に寄せたいという話です。
目次
「左寄せ」と「右寄せ」なら…
floatの場合
ソース
HTML
|
1 2 3 4 |
<div class="parent"> <div class="left">左寄せ</div> <div class="right">右寄せ</div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 |
.parent { display: flow-root; } .left { float: left; } .right { float: right; } |
表示
左寄せ
右寄せ
flexboxの場合
ソース
HTML
|
1 2 3 4 |
<div class="parent"> <div class="left">左寄せ</div> <div class="right">右寄せ</div> </div> |
CSS
|
1 2 3 4 5 |
.parent { /* ベンダープレフィックスは省略 */ display: flex; justify-content: space-between; } |
表示
左寄せ
右寄せ
よくあるパターンですね。
じゃあ片方を中央寄せしたい時はどうするべきか。
floatにはcenterなんて無いし…
「中央寄せ」と「右寄せ」なら…
どうするかというと2パターン考えられます。
1. 「flexbox」と「position」の併せ技
2. グリッドレイアウト
です。
「flexbox」と「position」の併せ技
ソース
HTML
|
1 2 3 4 |
<div class="parent"> <div class="center">中央寄せ</div> <div class="right">右寄せ</div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 |
.parent { /* ベンダープレフィックスは省略 */ display: flex; justify-content: center; /* 子要素を中央揃え */ position: relative; } .right { position: absolute; right: 0; /* 右寄せ */ } |
表示
中央寄せ
右寄せ
親要素に justify-content: center; を指定して子要素を中央揃えにし、片側に寄せたい子要素を position で位置を指定するだけです。
左寄せにするなら right ではなく left: 0; と指定するだけですね。
グリッドレイアウト
ソース
HTML
|
1 2 3 4 |
<div class="parent"> <div class="center">中央寄せ</div> <div class="right">右寄せ</div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 |
.parent { display: grid; grid-template-columns: 1fr auto 1fr; } .center { grid-column: 2; justify-self: center; } .right { grid-column: 3; } |
表示
中央寄せ
右寄せ
まとめ
グリッドレイアウトの登場以降はグリッドレイアウトで実装した方がスマートに感じます。
今後も実戦で使ってみたCSSを紹介していきます。
それではまた次回。
The following two tabs change content below.
熊田 賢太郎
株式会社クロコロールのコーディングを担当。デジタルハリウッドを卒業後、クロコロールに入社。HTML、CSS、JavaScript、Jquery、PHPの言語を使用。現在は、WordPressエンジニアとして、Webサイト制作、既存サイトのカスタマイズやリニューアル、テーマの制作、サイトのWordPress化、カスタム投稿作成、保守などを担当。
最新記事 by 熊田 賢太郎 (全て見る)
- Google Mapのマーカーを好きな画像に変更する。 - 2024年1月15日
- ブラウザ別に適用させるCSSハック - 2023年12月26日
- RSSフィードが読み込めない！原因は… - 2021年11月10日
