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

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

floatの場合

ソース

HTML

    
左寄せ
    
右寄せ

CSS

.parent {
    display: flow-root;
}
.left {
    float: left;
}
.right {
    float: right;
}

表示

flexboxの場合

ソース

HTML

    
左寄せ
    
右寄せ

CSS

.parent {
    /* ベンダープレフィックスは省略 */
    display: flex;
    justify-content: space-between;
}

表示

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

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

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

どうするかというと2パターン考えられます。
1. 「flexbox」と「position」の併せ技
2. グリッドレイアウト
です。

「flexbox」と「position」の併せ技

ソース

HTML

    
中央寄せ
    
右寄せ

CSS

.parent {
    /* ベンダープレフィックスは省略 */
    display: flex;
    justify-content: center; /* 子要素を中央揃え */
    position: relative;
}
.right {
    position: absolute;
    right: 0; /* 右寄せ */
}

表示

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

グリッドレイアウト

ソース

HTML

    
中央寄せ
    
右寄せ

CSS

.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日