headerのコーディング例〜CSS

HTML&CSS

シンプルなヘッダー領域のコーディング例です。古典的な手法からFlexBoxを活用した方法の例です。

スポンサーリンク

古典的な方法

要素を水平方向に中央揃えする方法は簡単に行えます。
例えばdisplay:blockの要素なら、幅を決めてから左右のマージンをautoにします。
ところが垂直方向の中央に整列させる適当なプロパティが存在しないために、色々なテクニックが使用されていました。
もっとも古典的な方法として、親要素の上下のプロパティで調整する方法です。

古典的な方法でヘッダー領域をコーディングした例

HTMLコード

<header>
 <h1>Background Property Lesson</h1>
 <p>This is a template for practice.</p>
</header>

CSSコード

header {
  width: 100%;
  height: auto;
  padding: 200px 0;
  background: #FECB1B url(img/main.jpg) bottom right no-repeat;
  color: #fff;
}

header h1 {
  font-size: 42px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 4px;
}

header p {
  font-size: 14px;
  text-align: center;
}

FlexBoxを活用した方法

FlexBoxでレイアウトすると垂直方向の整列が簡単にできるようになりました。

次の例ではヘッダーにナビゲーションが追加されていますので、単純に整列させるだけではなくflexプロパティが必要です。
「.site-info」領域とナビゲーションの「.main-menu」領域を分離して、「.main-menu」領域をヘッダー下部に押しやる必要があります。

flex-flowプロパティは、 flex-direction 及び flex-wrapのショートハンドです。

今回flex-directionはcolumnとして垂直方向としています。「flex-direction」が「column」場合は高さの拡大が行われます。
そして「.site-info」に「flex-grow: 1」を設定して拡大可能としています。一方「.main-menu」には「flex-grow」の指定はありませんので初期値「flex-grow: 0」となり拡大はされません。その結果「.main-menu」の高さは大きく拡大されて、「.main-menu」は中身依存の形でヘッダー下部に押しやられます。

次に、「.site-info」に対して「display: flex」を設定してその中にいるアイテムを垂直方向のcenterにして垂直方向の中央揃えを行います。

メニューは「flex-direction」を「row」にして横方向にフローさせます。各ボタンの幅は「flex-grow: 1」で拡大しておきます。

flexBoxを使った方法でヘッダー領域をコーディングした例

HTMLコード

<header class="site-header">
  <div class="site-info">
   <h1 class="site-title">Go on a journey</h1>
   <p class="site-description">Go out of the Home and go to the new world.</p>
  </div>
  <nav class="main-menu">
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
   </ul>
  </nav>
</header>

CSSコード

.site-header {
　　　　background:#F6D200 url(../images/main.jpg) no-repeat left bottom / cover;
  height: 400px;
  display: flex;
  flex-flow: column;
}

.site-info {
　　　　flex-grow: 1;
　　　　display: flex;
　　　　flex-flow: column;
　　　　justify-content: center;
}

.site-title {
　　　　font-family: 'Gamja Flower', cursive;
  margin: 0;
  font-size: 2em;
  font-weight: 300;
  text-align: center;
  color: white;
  text-transform: uppercase;
}

.site-description {
　　　　text-align: center;
　　　　color: #fff;
　　　　font-size: 1.2em;
　　　　margin-top: -.8em;
　　　　font-style: italic;
}
.main-menu {
	color: #fff;
	background: #000;
}

.main-menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.main-menu li a {
	text-decoration: none;
	color: #fff;
	font-size: 1.1em;
	font-weight: bold;
	padding: .6em 1em;
	display: block;
	transition: all .5s ease;
}

.main-menu li a:hover {
	background-color: black;
	color: #F6D200;
}

@media screen and (min-width: 810px) {

	.main-menu ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		text-align: center;
	}

	.main-menu ul li {
		flex-grow: 1;
		flex-basis: auto;
		flex-shrink: 0;
	}

}

positionを活用した方法

かつて使われたpositionを活用したテクニックで垂直方向の整列を行います。
「position:absolute」を使い「top」と「left」の値を50％にすることで縦横の中央揃えを行う方法です。
ただし、この場合の基準点が要素の左上となっているため、正確に中央にきません。
そこで「transform:translate()」を使って微調整を行うわけです。

微調整の方法はネガティブマージンを使う方法もありますが、ネガティブマージンの値を対象の要素の幅と高さの半分だけ指定するため、その数値を算出するのが面倒です。（画像なら簡単ですが）
一方、「transform:translate()」は値を50％と指定すれば良いので簡単です。

さて、ここで垂直方向に整列させたのは良いのですが、見栄えとしてH1が少し下に下がっているように見えます。
ここは微調整で若干上に移動させます。「transform:translate(-50%,-40%)」のY軸方向の値を-40〜-50%の値で変更します。
この値は自分の感覚で決めます。

その他の部分では近代的な方法を使ってヘッダー領域をコーディングしていますので参考になるかもしれません。
なお、「clip-path」プロパティは、ベンダープレフィックスが無いと正しく表示されませんので注意してください。

positionを使った方法でヘッダー領域をコーディングした例

HTMLコード

<header class="header">
  <div class="logo-box">
   <img src="img/logo-1x.png" alt="Logo" class="logo">
  </div>
  <div class="text-box">     
    <h1 class="heading-primary">
　　　　　　　　　　<span class="heading-primary-main">GO ON A JOURNEY</span>
　　　　　　　　　　<span class="heading-primary-sub">Go out of the Home and go to the new world.</span>
    </h1>
  </div>
</header>

CSSコード

.header {
  height: 95vh;
  background: linear-gradient(to right bottom, rgba(0, 225, 255, 0.80),rgba(38, 0, 255, 0.80)), url(../img/hero.jpg) center top/ cover;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  position: relative;
}

.logo-box {
  position: absolute;
  top: 40px;
  left: 40px;
}

.logo {
  height: 35px;
}

.text-box{
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-40%);
  -webkit-transform:translate(-50%,-40%);
  -moz-transform:translate(-50%,-40%);
  -ms-transform:translate(-50%,-40%);
  -o-transform:translate(-50%,-40%);
}

.heading-primary {
  color:#fff;
  text-transform: uppercase;
  text-align: center;
}

.heading-primary-main {
  display:block;
  font-size: 60px;
  font-weight: 400;
  letter-spacing: 15px;
}

.heading-primary-sub {
  display:block;
  font-size:20px;
  font-weight: 700;
  letter-spacing: 7px;
}

positionとFlexを併用した方法

こちらの例は、「position」で整列するのではなく、FlexBoxで整列させています。
ただし、ロゴは「position」で配置しています。
FlexBoxでレイアウトする場合、flexコンテナの子要素にあたるflexアイテムの中でに「position:absolute」が設定された要素があるとその要素はflexアイテムに参加せず、無視された状態になります。今回の例ではロゴは「position」で配置していますので無視され、それ以外の要素が整列することになります。

なお、この場合の垂直方向の見栄えの微調整は「.text-box」のネガティブマージンで決めています。

HTMLコードと表示結果は上と同じです。

CSSコード

.header {
  height: 95vh;
  background: linear-gradient(to right bottom, rgba(0, 225, 255, 0.80),rgba(38, 0, 255, 0.80)), url(../img/hero.jpg) center top/ cover;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  position: relative;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo-box {
  position: absolute;
  top: 40px;
  left: 40px;
}

.logo {
  height: 35px;
}
.text-box {
  margin-top: -10vh;
}
.heading-primary {
  color:#fff;
  text-transform: uppercase;
  text-align: center;
}

.heading-primary-main {
  display:block;
  font-size: 60px;
  font-weight: 400;
  letter-spacing: 15px;
}

.heading-primary-sub {
  display:block;
  font-size:20px;
  font-weight: 700;
  letter-spacing: 7px;

}
スポンサーリンク
タイトルとURLをコピーしました