IT・WEB・PC事業を行う9BOX IT・WEB・PC事業を行う9BOX

ヘッダーとは?書き方とデザインサンプル

ヘッダーとは?書き方とデザインサンプル

Webサイトのヘッダーとは?

役割、ホームページで使われるHTMLとCSSを用いたヘッダーの作り方、デザインサンプルをご紹介します。

ヘッダーとは?

ホームページのヘッダーとはページ上部に配置するロゴや画像部分の枠を言います。h1タグやナビゲーションメニューを配置する場所でもあります。

HTML5ではheaderタグ(「<header>」)を使い検索エンジンにもヘッダーであることを伝えることができます。

またHTML4では「<div id="header">」として書きます。

どちらで書けばいい分からない場合「<div id="header">」として書いても形が崩れることもなく検索エンジンもheaderであることを認識してくれます。

魅力や強みを一言で伝えることにより記事を読んでくれるか判断される重要な要素です。

ヘッダーの役割

ヘッダーはユーザが最初に見る重要な部分です。

ヘッダーの役割は大きく分けて4つです。

ヘッダーの役割
  • h1タグでページで何について書かれているか要点をまとめる
  • ロゴ部分でどのような会社または人が行っているか
  • グローバルメニューでサイト全体で行っていることを伝える
  • メールや電話がかけられるよう配置する

この重要な部分で興味を持たせて、メインの記事そして関連記事へと誘導することがヘッダーの役割です。

ヘッダーの書き方

このページのヘッダー部分を元に書き方を説明していきます。

h1タグ部分

  1. <div class="title-caption">
  2.  <div class="caption-content">
  3.   <div class="container">
  4.    <h1 class="title-size">ヘッダーとは?書き方とデザインサンプル ホームページの作り方</h1>
  5.   </div>
  6.  </div>
  7. </div>
title-caption
  • h1タグの枠を中央寄せ
caption-content
  • h1タグの文字を中央寄せ
container
  • 指定した幅で要素を内包
title-size
  • 文字の間隔とサイズの指定
  1. .title-caption{
  2.  position: relative;
  3.  display: table;
  4.  height: 100%;
  5.  width: 100%;
  6.  margin: 0 auto;
  7.  padding:20px;
  8. }
  9. .caption-content{
  10.  display: table-cell;
  11.  vertical-align: middle;
  12.  text-align: center;
  13. }
  14. .title-size{
  15.  letter-spacing: 6px;
  16.  font-weight: 400;
  17.  font-size: 28px;
  18. }
  19. .container{
  20.  padding-right: 15px;
  21.  padding-left: 15px;
  22.  margin-right: auto;
  23.  margin-left: auto;
  24. }
  25. @media screen and (min-width:768px) and ( max-width:1024px) {
  26.  .container{
  27.   width:750px;
  28.  }
  29.  .title-size{
  30.   letter-spacing: 6px;
  31.   font-size: 48px;
  32.  }
  33.  .telbtn{
  34.   display: none;
  35.  }
  36. }
  37. @media screen and (min-width:1024px) {
  38.  .container{
  39.   width:1000px;
  40.  }
  41.  .title-size{
  42.   letter-spacing: 24px;
  43.   font-size: 48px;
  44.  }
  45.  .telbtn{
  46.   display: none;
  47.  }
  48. }

ロゴ部分

  1. <div class="h_logo">
  2.  <a href="https://9box.jp/"><img src="https://9box.jp/images/9boxitweb.png" alt="9BOX"></a>
  3. </div>
h_logo
  • ロゴの上に少し余白をあける
  • ロゴを押したときトップページへリンクする
  • ロゴに画像を表示する
  1. .h_logo{
  2.  padding: 5px 0 0 0;
  3. }
  4. @media screen and (min-width:768px) and ( max-width:1024px) {
  5.  .h_logo{
  6.   width:150px;
  7.   float: left;
  8.  }
  9. }
  10. @media print, screen and ( min-width : 769px ) {
  11.  .h_logo img{
  12.   width:150px;
  13.   float: left;
  14.  }
  15. }

電話をかけるボタン(スマホのみ)

  1. <div class="telbtn">
  2.  <a href="tel:0285354987"><i class="fa fa-phone-square fa-3x fa-green" aria-hidden="true"></i></a>
  3. </div>
telbtn
  • パソコンの時は表示しない
  • スマートフォンの時表示する
  • ボタンの上に少し余白をあける
  1. .telbtn{
  2.  display: inline-block;
  3.  padding-top: 6px;
  4. }
  5. @media screen and (min-width:768px) and ( max-width:1024px) {
  6.  .telbtn{
  7.   display: none;
  8.  }
  9. }
  10. @media screen and (min-width:1024px) {
  11.  .telbtn{
  12.   display: none;
  13.  }
  14. }
  1. <nav id="gNav">
  2.  <ul class="nav">
  3.   <li>
  4.    <a href="https://9box.jp/web/">Web<i class="fa fa-angle-down"></i></a>
  5.    <ul class="sub-menu">
  6.     <li><a href="https://9box.jp/web/homepage/">ホームページ制作</a></li>
  7.     <li><a href="https://9box.jp/web/seo/">SEO</a></li>
  8.     <li><a href="https://9box.jp/web/listing/">リスティング広告</a></li>
  9.    </ul>
  10.   </li>
  11.   <li>
  12.    <a href="https://9box.jp/it/">IT</i></a>
  13.   </li>
  14.  </ul>
  15.  <div class="mask"></div>
  16. </nav>
gNav
  • 多階層リンク
  • スマートフォンの場合ドロップダウンメニューに切り替え
  1. .navbar{
  2.  position: relative;
  3.  min-height: 55px;
  4.  margin-bottom: 20px;
  5.  border: 1px solid transparent;
  6. }
  7. .navbar-custom{
  8.  background-color: rgba(10, 10, 10, 0.9);
  9.  border: 0;
  10.  border-radius: 0;
  11.  z-index: 1000;
  12.  font-family: "Roboto Condensed", sans-serif;
  13.  text-transform: uppercase;
  14.  letter-spacing: 3px;
  15.  font-size: 13px;
  16.  transition: background, padding 0.4s ease-in-out 0s;
  17. }
  18. .navbar-fixed-top{
  19.  top: 0;
  20.  border-width: 0 0 1px;
  21. }
  22. .navbar-fixed-bottom, .navbar-fixed-top{
  23.  position: fixed;
  24.  right: 0;
  25.  left: 0;
  26.  z-index: 1030;
  27. }
  28. #gNav a:hover{
  29.  color: #999;
  30. }
  31. nav li a{
  32.  font-size: 13px;
  33.  letter-spacing: 0.2em;
  34.  color: rgba(255, 255, 255, 0.7);
  35. }
  36. nav .sub-menu{
  37.  background: #fff;
  38.  background-color: rgba(255, 255, 255, 0.8);
  39. }
  40. @media print, screen and ( min-width : 768px ) {
  41.  .mean-nav .mask{
  42.   background: rgba(0,0,0,.6);
  43.   left: 0;
  44.   z-index: 1;
  45.   position: absolute;
  46.   width: 100%;
  47.   height: 100vh;
  48.   opacity: 1;
  49.   display: none;
  50.  }
  51.  #gNav .nav{
  52.   overflow-y: auto;
  53.   height: 100vh;
  54.   z-index: 2;
  55.  }
  56.  .mean-nav{
  57.   padding: 0;
  58.  }
  59.  .nav .sub-menu li:last-child{
  60.   border-bottom: none;
  61.  }
  62.  nav li .fa{
  63.   display: none;
  64.  }
  65. }
  66. @media print, screen and ( min-width : 769px ) {
  67.  #gNav ul{
  68.   position: relative;
  69.   display: flex;
  70.  }
  71.  #gNav li{
  72.   position: relative;
  73.   margin-right: 3em;
  74.  }
  75.  #gNav li:last-child{
  76.   margin-right: 0;
  77.  }
  78.  #gNav li i{
  79.   font-size: 16px;
  80.   margin-left: 5px;
  81.  }
  82.  #gNav li a{
  83.   position: relative;
  84.   display: block;
  85.   text-align: center;
  86.  }
  87.  #gNav .sub-menu{
  88.  visibility: hidden; 
  89.  opacity: 0; 
  90.  z-index: 1; 
  91.  display: block; 
  92.  position: absolute; 
  93.  top: 50px; 
  94.  left: 50%; 
  95.  margin-left: -100px; 
  96.  width: 200px; 
  97.  -webkit-transition: all .2s ease; 
  98.  transition: all .2s ease; 
  99.  }
  100.  #gNav .sub-menu a{
  101.  padding: 10px; 
  102.  display: block; 
  103.  border-bottom: none; 
  104.  padding: 20px; 
  105.  line-height: 1.2em; 
  106.  }
  107.  #gNav .sub-menu a:hover:after{
  108.  content: none; 
  109.  }
  110.  #gNav .sub-menu li{
  111.  display: block; 
  112.  font-size: 16px; 
  113.  padding: 0; 
  114.  margin: 0; 
  115.  }
  116.  #gNav .sub-menu li:last-child{
  117.  border-bottom: none; 
  118.  }
  119.  #gNav ul > li:hover{
  120.   -webkit-transition: all .5s; 
  121.  transition: all .5s; 
  122.  }
  123.  #gNav ul > li:hover a,#gNav .current-menu-item a,#gNav .current-menu-parent a{
  124.  color: #bfd0ff; 
  125.  }
  126.  #gNav li:hover ul.sub-menu{
  127.  top: 60px; 
  128.  visibility: visible; 
  129.  opacity: 1; 
  130.  z-index: 9999; 
  131.  }
  132.  #gNav li ul li:after{
  133.  content: none; 
  134.  }
  135.  #gNav li:hover ul.sub-menu a{
  136.  color: #111; 
  137.  }
  138.  #gNav .sub-menu li a:hover{
  139.  background: #fff; 
  140.  }
  141. }

html全体のソースコード

  1. <div id="header">
  2.  <div class="home-section bg-dark-30">
  3.   <div class="title-caption">
  4.    <div class="caption-content">
  5.     <div class="container">
  6.      <h1 class="title-size">ヘッダーとは?書き方とデザインサンプル ホームページの作り方</h1>
  7.     </div>
  8.    </div>
  9.   </div>
  10.   <div class="navbar navbar-custom navbar-fixed-top navbar-transparent" role="navigation">
  11.    <div class="container">
  12.     <div id="h_top">
  13.      <div class="h_logo">
  14.       <a href="https://9box.jp/"><img src="https://9box.jp/images/9boxitweb.png" alt="9BOX"></a>
  15.      </div>
  16.      <div class="telbtn">
  17.       <a href="tel:0285354987"><i class="fa fa-phone-square fa-3x fa-green" aria-hidden="true"></i></a>
  18.      </div>
  19.      <div class="h_nav">
  20.       <nav id="gNav">
  21.        <ul class="nav">
  22.         <li>
  23.          <a href="https://9box.jp/web/">Web<i class="fa fa-angle-down"></i></a>
  24.          <ul class="sub-menu">
  25.           <li><a href="https://9box.jp/web/homepage/">ホームページ制作</a></li>
  26.           <li><a href="https://9box.jp/web/seo/">SEO</a></li>
  27.           <li><a href="https://9box.jp/web/listing/">リスティング広告</a></li>
  28.          </ul>
  29.         </li>
  30.         <li>
  31.          <a href="https://9box.jp/it/">IT</i></a>
  32.         </li>
  33.        </ul>
  34.        <div class="mask"></div>
  35.       </nav>
  36.      </div>
  37.     </div>
  38.    </div>
  39.   </div>
  40.  </div>
  41. </div>

css全体のソースコード

  1. #header{
  2.  position: relative;
  3. }
  4. .home-section{
  5.  background-color: #000;
  6.  background-repeat: no-repeat;
  7.  background-position: center center;
  8.  width: 100%;
  9.  height: 100%;
  10.  background-image: url(https://9box.jp/images/itweb.jpg);
  11.  vertical-align: middle;
  12.  background-repeat: no-repeat;
  13.  background-position: 50% 50%;
  14.  background-size: cover;
  15. }
  16. .bg-dark-30:before{
  17.  position: absolute;
  18.  background: rgba(2, 2, 2, 0.4);
  19.  content: " ";
  20.  height: 100%;
  21.  width: 100%;
  22.  left: 0;
  23.  top: 0;
  24. }
  25. .title-caption{
  26.  position: relative;
  27.  display: table;
  28.  height: 100%;
  29.  width: 100%;
  30.  margin: 0 auto;
  31.  padding:20px;
  32. }
  33. .caption-content{
  34.  display: table-cell;
  35.  vertical-align: middle;
  36.  text-align: center;
  37. }
  38. .font-alt{
  39.  font-size: 14px;
  40.  letter-spacing: 2px;
  41. }
  42. .title-size{
  43.  letter-spacing: 6px;
  44.  font-weight: 400;
  45.  font-size: 28px;
  46. }
  47. .navbar{
  48.  position: relative;
  49.  min-height: 55px;
  50.  margin-bottom: 20px;
  51.  border: 1px solid transparent;
  52. }
  53. .navbar-custom{
  54.  background-color: rgba(10, 10, 10, 0.9);
  55.  border: 0;
  56.  border-radius: 0;
  57.  z-index: 1000;
  58.  font-family: "Roboto Condensed", sans-serif;
  59.  text-transform: uppercase;
  60.  letter-spacing: 3px;
  61.  font-size: 13px;
  62.  transition: background, padding 0.4s ease-in-out 0s;
  63. }
  64. .navbar-fixed-top{
  65.  top: 0;
  66.  border-width: 0 0 1px;
  67. }
  68. .navbar-fixed-bottom, .navbar-fixed-top{
  69.  position: fixed;
  70.  right: 0;
  71.  left: 0;
  72.  z-index: 1030;
  73. }
  74. .telbtn{
  75.  display: inline-block;
  76.  padding-top: 6px;
  77. }
  78. .fa-green:before{
  79.  color: #78ff15;
  80. }
  81. #gNav a:hover{
  82.  color: #999;
  83. }
  84. nav li a{
  85.  font-size: 13px;
  86.  letter-spacing: 0.2em;
  87.  color: rgba(255, 255, 255, 0.7);
  88. }
  89. nav .sub-menu{
  90.  background: #fff;
  91.  background-color: rgba(255, 255, 255, 0.8);
  92. }
  93. .h_logo{
  94.  padding: 5px 0 0 0;
  95. }
  96. @media screen and (min-width:768px) and ( max-width:1024px) {
  97.  .container{
  98.   width:750px;
  99.  }
  100.  .title-size{
  101.   letter-spacing: 6px;
  102.   font-size: 48px;
  103.  }
  104.  .telbtn{
  105.   display: none;
  106.  }
  107.  .h_logo{
  108.   width:150px;
  109.   float: left;
  110.  }
  111.  .telbtn{
  112.   display: none;
  113.  }
  114. }
  115. @media screen and (min-width:1024px) {
  116.  .container{
  117.   width:1000px;
  118.  }
  119.  .title-size{
  120.   letter-spacing: 24px;
  121.   font-size: 48px;
  122.  }
  123.  .telbtn{
  124.   display: none;
  125.  }
  126. }
  127. @media print, screen and ( min-width : 768px ) {
  128.  .mean-nav .mask{
  129.   background: rgba(0,0,0,.6);
  130.   left: 0;
  131.   z-index: 1;
  132.   position: absolute;
  133.   width: 100%;
  134.   height: 100vh;
  135.   opacity: 1;
  136.   display: none;
  137.  }
  138.  #gNav .nav{
  139.   overflow-y: auto;
  140.   height: 100vh;
  141.   z-index: 2;
  142.  }
  143.  .mean-nav{
  144.   padding: 0;
  145.  }
  146.  .nav .sub-menu li:last-child{
  147.   border-bottom: none;
  148.  }
  149.  nav li .fa{
  150.   display: none;
  151.  }
  152. }
  153. @media print, screen and ( min-width : 769px ) {
  154.  #gNav ul{
  155.   position: relative;
  156.   display: flex;
  157.  }
  158.  #gNav li{
  159.   position: relative;
  160.   margin-right: 3em;
  161.  }
  162.  #gNav li:last-child{
  163.   margin-right: 0;
  164.  }
  165.  #gNav li i{
  166.   font-size: 16px;
  167.   margin-left: 5px;
  168.  }
  169.  #gNav li a{
  170.   position: relative;
  171.   display: block;
  172.   text-align: center;
  173.  }
  174.  #gNav .sub-menu{
  175.  visibility: hidden; 
  176.  opacity: 0; 
  177.  z-index: 1; 
  178.  display: block; 
  179.  position: absolute; 
  180.  top: 50px; 
  181.  left: 50%; 
  182.  margin-left: -100px; 
  183.  width: 200px; 
  184.  -webkit-transition: all .2s ease; 
  185.  transition: all .2s ease; 
  186.  }
  187.  #gNav .sub-menu a{
  188.  padding: 10px; 
  189.  display: block; 
  190.  border-bottom: none; 
  191.  padding: 20px; 
  192.  line-height: 1.2em; 
  193.  }
  194.  #gNav .sub-menu a:hover:after{
  195.  content: none; 
  196.  }
  197.  #gNav .sub-menu li{
  198.  display: block; 
  199.  font-size: 16px; 
  200.  padding: 0; 
  201.  margin: 0; 
  202.  }
  203.  #gNav .sub-menu li:last-child{
  204.  border-bottom: none; 
  205.  }
  206.  #gNav ul > li:hover{
  207.   -webkit-transition: all .5s; 
  208.  transition: all .5s; 
  209.  }
  210.  #gNav ul > li:hover a,#gNav .current-menu-item a,#gNav .current-menu-parent a{
  211.  color: #bfd0ff; 
  212.  }
  213.  #gNav li:hover ul.sub-menu{
  214.  top: 60px; 
  215.  visibility: visible; 
  216.  opacity: 1; 
  217.  z-index: 9999; 
  218.  }
  219.  #gNav li ul li:after{
  220.  content: none; 
  221.  }
  222.  #gNav li:hover ul.sub-menu a{
  223.  color: #111; 
  224.  }
  225.  #gNav .sub-menu li a:hover{
  226.  background: #fff; 
  227.  }
  228.  .h_logo img{
  229.   width:150px;
  230.   float: left;
  231.  }
  232. }

デザインサンプル

パソコンで見た時のヘッダー

パソコンで見た時のヘッダー

スマートフォンで見た時のヘッダー

スマートフォンで見た時のヘッダー

お問合せ

お気軽にお問合せ下さい。

  • 電話番号 0285-35-4987
  • メール info@9box.jp