ヘッダー

header

CSS

レイアウト

2020/04/21

Flexboxでヘッダーナビを作ってみる

こんにちは、中の人です。 今回はFlexboxを用いて、簡単にヘッダーナビを実装する方法をご紹介します。 早速ですが、サンプルになります。 実装サンプル Sample logo menu01 menu02 menu03 ■HTML Sample logo menu01 menu02 menu03 ■CSS .header { align-items: center; background: #f5f5f5; display: flex; padding: 20px; } .header-logo { margin-right: auto; } .nav-menu { align-items: center; display: flex; } .menu-item:not(:last-child) { margin-right: 20px; } 解説 今回のポイントは、ざっくりと2点。 こちらになります。 並列させたい要素の親要素に"display: flex;"を指定する ロゴに"margin-right: auto;"を指定して右側の要素を押し出す flexboxは汎用性が高く、いろいろなレイアウトに応用が効きそうでうね。

心からオススメしたいRecommend

JavaScript

ライブラリ

「Luxy.js」を使って慣性スクロールやパララックス効果を簡単に実装してみる

CSS

擬似要素

テキストリンクの下線を擬似要素を用いて表示させる方法

広告PR