HTML/CSS

【簡単コピペOK】display:flex;を使ってヘッダー作成

更新日:

はじめまして、ヤマブキといいます。

このブログでは私自身がプログラミング、Web関係で経験した悩んだことを同じように悩んでいる人の手助けになるような情報を発信していきます。

作成するヘッダー

それでは順番に作っていきましょう

まずはじめに

HTML

<body>
    <header>
      <nav>
          <a href="#">アイテム1</a>
          <a href="#">アイテム2</a>
          <a href="#">アイテム3</a>
          <a href="#">アイテム4</a>
          <a href="#">アイテム5</a>
      </nav>
    </header>
  </body>

CSS

body{
  margin: 0;
}

header{
  width: 100%;
  min-width: 500px;
  height: 75px;
  background-color: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
}

ヘッダーの背景を薄い黒色

headerタグを親要素、navタグを子要素

親要素にjustify-content: center;で子要素のnavタグだけを中央寄せ

次に

HTML

<body>
    <header>
      <nav>
          <a href="#">アイテム1</a>
          <a href="#">アイテム2</a>
          <a href="#">アイテム3</a>
          <a href="#">アイテム4</a>
          <a href="#">アイテム5</a>
      </nav>
    </header>
  </body>

CSS

header nav{
    width: 50%;
    min-width: 500px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

navタグを親要素、aタグを子要素

親要素にjustify-content: space-around;で子要素のaタグを均等に間隔をあけて配置

親要素にalign-items: center;で子要素のaタグを縦方向 に中央揃え

最後に

HTML

<body>
    <header>
      <nav>
          <a href="#">アイテム1</a>
          <a href="#">アイテム2</a>
          <a href="#">アイテム3</a>
          <a href="#">アイテム4</a>
          <a href="#">アイテム5</a>
      </nav>
    </header>
  </body>

CSS

 header a{
    background-color: black;
    text-decoration: none;
    width: 20%;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bolder;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
  }

 header a:hover{
    opacity: 0.5;
  }

aタグにwidthとheightの値をつけボタンのように

aタグにjustify-content: center;とalign-items: center;で文字を上下左右に中央揃え

aタグ(ボタン)をマウスホバー時、opacity( 透明度 )を半分にして見やすくする

完成


レスポンシブ・Flexbox・CSSグリッドを学びたい人にオススメの本

オススメする他ジャンルの本

他の投稿

-HTML/CSS

Copyright© yamab-log , 2021 All Rights Reserved Powered by STINGER.