熊本県でWeb、EC、IoTなら株式会社クロコロール

お問い合わせ

MENU

Kuroko Blog

クロコブログ

同じ行に「中央寄せ」と「右寄せ(左寄せ)」を両立させるCSS

こんにちは、クロコのケンです。

今日は、実際の案件で使ったCSSテクニックを紹介します。
タイトルを見て何言ってんだと思った方もいるかもしれませんが要は2つの子要素を上の画像のように一つは中央寄せ、もう一つは片側に寄せたいという話です。

「左寄せ」と「右寄せ」なら…

ソース

HTML

floatの場合

flexboxの場合

表示

左寄せ
右寄せ

よくあるパターンですね。

じゃあ片方を中央寄せしたい時はどうするべきか。
floatにはcenterなんて無いし…

「中央寄せ」と「右寄せ」なら…

どうするかというと「flexbox」と「position」の併せ技です。

ソース

HTML

CSS

表示

中央寄せ
右寄せ

親要素に justify-content: center; を指定して子要素を中央揃えにし、片側に寄せたい子要素を position で位置を指定するだけです。
左寄せにするなら right ではなく left: 0; と指定するだけですね。

まとめ

floatとpositionでもできるかもしれませんがレスポンシブデザインを踏まえるとflexboxの方が融通が効きますし記述もシンプルでいいと思います。
今後も実戦で使ってみたCSSを紹介していきます。

それではまた次回。

The following two tabs change content below.

クロコのケン

株式会社クロコロールで主にコーディングを担当しています。 まだまだ見習いの身です…

サイドお問い合わせ
サイドお問い合わせ
サイドお問い合わせ

人気記事