すでに custom_role 権限グループは存在します。 「Google Sites」はワイヤーフレーム制作ツールとして使える？実際に触ってみた感想 // CodePool

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

CSS

レイアウト

2020/04/21

こんにちは、中の人です。
今回はFlexboxを用いて、簡単にヘッダーナビを実装する方法をご紹介します。
早速ですが、サンプルになります。

実装サンプル

■HTML


	
	

■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点。
こちらになります。

  1. 並列させたい要素の親要素に”display: flex;”を指定する
  2. ロゴに”margin-right: auto;”を指定して右側の要素を押し出す

flexboxは汎用性が高く、いろいろなレイアウトに応用が効きそうでうね。

心からオススメしたいRecommend

JavaScript

ライブラリ

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

2020/05/11

デザイン

便利ツール

「Google Sites」はワイヤーフレーム制作ツールとして使える？実際に触ってみた感想

2020/05/13

広告PR