1. ホーム
  2. ホームページの作り方
  3. 無料で使えるデモサイト
  4. ロゴとグローバルナビの設置【PC】

ロゴとグローバルナビの設置【PC】

ロゴとグローバルナビの設置【PC】

head内の記述の次は実際に画面に表示されるbody内の記述をおこなっていきます。まずは上部のheader部分を作っていきますのでHTMLとCSSそれぞれの設定をご確認ください。

はじめのうちは何が書いてあるのかサッパリな状態かと思いますが、徐々に内容はわかるようになります。大丈夫です！わからなければまずはコピペ！

こちらの「デモサイト」から実際のページを確認して頂けます。

目次 [閉じる]

共通するCSSデザインを決める

それでは少し長いですが簡単なCSSの設定です。こちらをコピペしてファイル名を「style.css」にして保存してください。

style.css

                	
    
                    	
  1. @charset "utf-8";
    2. 
                    	
  2.  
    3. 
                    	
  3. /* ------ common ------ */
    4. 
                    	
  4. * {
    5. 
                    	
  5.   margin: 0;
    6. 
                    	
  6.   padding: 0;
    7. 
                    	
  7.   word-break: break-all;
    8. 
                    	
  8.   line-break: strict;
    9. 
                    	
  9.   outline: none;
    10. 
                    	
  10.   box-sizing: border-box
    11. 
                    	
  11. }
    12. 
                    	
  12. html {
    13. 
                    	
  13.   font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
    14. 
                    	
  14.   font-size: 62.5%;
    15. 
                    	
  15.   font-weight: 600;
    16. 
                    	
  16.   font-style: normal;
    17. 
                    	
  17.   line-height: 1.6;
    18. 
                    	
  18.   font-feature-settings: "palt";
    19. 
                    	
  19.   -webkit-overflow-scrolling: touch
    20. 
                    	
  20. }
    21. 
                    	
  21. body {
    22. 
                    	
  22.   height: 100%; 
    23. 
                    	
  23.   color: #000;
    24. 
                    	
  24.   font-size: 1.5rem;
    25. 
                    	
  25.   font-style: normal;
    26. 
                    	
  26.   background: #fff;
    27. 
                    	
  27.   overflow-x: hidden;
    28. 
                    	
  28.   overflow-y: scroll;
    29. 
                    	
  29.   -webkit-text-size-adjust: 100%
    30. 
                    	
  30. }
    31. 
                    	
  31. img { max-width: 100% }
    32. 
                    	
  32. ol,
    33. 
                    	
  33. ul,
    34. 
                    	
  34. li {
    35. 
                    	
  35.   list-style: none
    36. 
                    	
  36. }
    37. 
                    	
  37. table {
    38. 
                    	
  38.   border-spacing: 0;
    39. 
                    	
  39.   border-collapse: collapse
    40. 
                    	
  40. }
    41. 
                    	
  41. form label { cursor: pointer }
    42. 
                    	
  42. input,
    43. 
                    	
  43. textarea {
    44. 
                    	
  44.   border-radius: 0;
    45. 
                    	
  45.   -webkit-appearance: none
    46. 
                    	
  46. }
                    	
  47. a {
    48. 
                    	
  48.   color: #000;
    49. 
                    	
  49.   text-decoration: none;
    50. 
                    	
  50.   transition: all 0.3s ease-in-out
    51. 
                    	
  51. }
    52. 
                    	
  52. a:hover {
    53. 
                    	
  53.   color: #000;
    54. 
                    	
  54.   outline: none
    55. 
                    	
  55. }
    56. 
                    	
  56. a:focus { outline: none }
    57. 
                    	
  57. input[type=submit] { transition: all 0.3s ease-in-out }
    58. 
                    	
  58. a img { border: none }
    59. 
                    	
  59. .cf::after {
    60. 
                    	
  60.   content: "";
    61. 
                    	
  61.   display: block;
    62. 
                    	
  62.   clear: both
    63. 
                    	
  63. }
    64. 
                    	
  64. ::-moz-selection {
    65. 
                    	
  65.   color: #fff;
    66. 
                    	
  66.   background: #000
    67. 
                    	
  67. }
    68. 
                    	
  68. ::selection {
    69. 
                    	
  69.   color: #fff;
    70. 
                    	
  70.   background: #000
    71. 
                    	
  71. }
                    	
  72. ::-webkit-input-placeholder { color: #999 }
    73. 
                    	
  73. ::-moz-placeholder {
    74. 
                    	
  74.   color: #999;
    75. 
                    	
  75.   opacity: 1
    76. 
                    	
  76. }
    77. 
                    	
  77. :-ms-input-placeholder { color: #999 }
    78.

この設定はホームページの全体に共通するデザインです。例えば「文字のサイズ」や「文字の種類」、「テーブル」や「リスト」などの指定をおこなっていますのでじっくり見てみてください。

もちろんデザインに正解はないので、このデザインよりももっとアナタ好みの素敵なデザインに変更していってくださいね。あくまでデモサイトはベースの形としてお使いください。

CSSで何ができるかは「よく使うCSSのプロパティ一覧と効果！ホームページをデザインする要素」で一覧にしていますので参考になさってください。

こちらも見てください

headerをHTMLで構築する

次にheader部分のコードを下に記載しますので「head内に必要な情報を記述する」で作ったindex.htmlの「body」の中にコピペしてください。

index.html

                	
    
                    	
  1. <header>
    2. 
                     	
  2.   <div class="inner cf">
    3. 
                     	
  3.     <div class="logo">
    4. 
                     	
  4.       <a href="./">
    5. 
                     	
  5.         <h1>いやしのカレー <span>サンプル</span></h1>
    6. 
                     	
  6.       </a>
    7. 
                     	
  7.     </div>
    8. 
                      	
  8.     <nav>
    9. 
                      	
  9.       <div class="globalNav">
    10. 
                     	
  10.         <ul>
    11. 
                     	
  11.           <li><a href="#news">お知らせ</a></li>
    12. 
                     	
  12.           <li><a href="#menu">メニュー</a></li>
    13. 
                    	
  13.           <li><a href="#shop">お店情報</a></li>
    14. 
                    	
  14.           <li><a href="./contact/">お問い合わせ</a></li>
    15. 
                    	
  15.         </ul>
    16. 
                    	
  16.       </div>
    17. 
                    	
  17.     </nav>
    18. 
                    	
  18.   </div>
    19. 
                    	
  19. </header>
    20.

headタグとheaderタグが紛らわしいかも知れませんがお間違えのないように。

HTMLに記述するコードはCSSに比べてすっきりしてますね。コードを見ても何となくわかってもらえるんじゃないでしょうか。これは「logo」のクラスが付いたdivとnavを横並びにしているという事です。

要素を横並びにする方法はいくつかあるのでお好きな方法でおこなってください。

こちらも見てください

グローバルナビのリンク先もすでに記述しています。今回は2ページ構成なので「お問い合わせ」だけは別ページへのリンク、「お知らせ」「メニュー」「お店情報」に関してはページ内リンクを設定しています。

header全体とロゴをCSSで調整する

headerのCSSをどんどん書いていきましょう。このデザインを先ほどの全体の共通デザインの下に追加します。

style.css

                	
    
                    	
  1. /* ------ header ------ */
    2. 
                    	
  2. header {
    3. 
                    	
  3.   width: 100%;
    4. 
                    	
  4.   height: 80px;
    5. 
                    	
  5.   background: #fff;
    6. 
                    	
  6.   position: fixed;
    7. 
                    	
  7.   top: 0;
    8. 
                    	
  8.   box-shadow: 0 0 5px rgb(0,0,0,0.3);
    9. 
                    	
  9.   z-index: 100
    10. 
                    	
  10. }
    11. 
                    	
  11. header .inner {
    12. 
                    	
  12.   width: 100%;
    13. 
                    	
  13.   font-size: 0;
    14. 
                    	
  14.   margin: 0 auto
    15. 
                    	
  15. }
    16. 
                    	
  16. header .logo {
    17. 
                    	
  17.   vertical-align: middle;
    18. 
                    	
  18.   padding: 0 0 0 20px;
    19. 
                    	
  19.   position: relative;
    20. 
                    	
  20.   display: inline-block;
    21. 
                    	
  21.   z-index: 100
    22. 
                    	
  22. }
    23. 
                    	
  23. header .logo a { display: block }
    24. 
                    	
  24. header .logo h1,
    25. 
                    	
  25. header .logo p {
    26. 
                    	
  26.   font-size: 1.6rem;
    27. 
                    	
  27.   font-weight: 600;
    28. 
                    	
  28.   line-height: 80px;
    29. 
                    	
  29.   letter-spacing: 0.09em;
    30. 
                    	
  30.   transition: all 0.3s;
    31. 
                    	
  31.   display: inline-block
    32. 
                    	
  32. }
    33. 
                    	
  33. header .logo h1 span,
    34. 
                    	
  34. header .logo p span {
    35. 
                    	
  35.   font-size: 2.4rem
    36. 
                    	
  36. }
    37.

「こちらのコードを共通デザインの下に記述してください」と言いましたが、CSSというのは下に書かれたものほど優先順位が高くなります。

例えば共通デザインにリンク（aタグ）のカラーを「赤」に設定していても、一部のリンクには「白」で表示したいって事もあります。そんな時は共通デザインよりも下側に設定を追加する必要があります。

この順序を逆にして共通デザインを下に書いてしまうと、一部のリンクを「白」に設定していても下にある「赤」でデザインが上書きされてしまうので注意してください。

header部分のCSSに関してはそんなに難しくないと思いますが、headerタグに「position:fixed;」を設定して、上部に固定表示するようにしています。

通常はページをスクロールするとこの部分って流れていくんですが、この設定をしているとどこを見ていても常にリンクが表示されているので見たい項目にすぐ移動できます。

竹馬

基本的にはHTMLもCSSもJSもコードは下へ下へと書いていきます。ちょっと手間ですがデザインを加える要素にはすべてクラス名を付けて他のデザインと競合しないようにする方法もあります。

グローバルナビをCSSで調整する

次はグローバルナビの部分をデザインしていきます。nav自体も横並び、その中のliタグも横並びの形です。

style.css

                	
    
                    	
  1. /* ------ nav ------ */
    2. 
                    	
  2. header nav {
    3. 
                    	
  3.   text-align: center;
    4. 
                    	
  4.   vertical-align: top;
    5. 
                    	
  5.   display: inline-block;
    6. 
                    	
  6.   float: right
    7. 
                    	
  7. }
    8. 
                    	
  8. header nav .globalNav ul {
    9. 
                    	
  9.   height: 80px;
    10. 
                    	
  10.   font-size: 0
    11. 
                    	
  11. }
    12. 
                    	
  12. header nav .globalNav li {
    13. 
                    	
  13.   height: 80px;
    14. 
                    	
  14.   font-size: 1.5rem;
    15. 
                    	
  15.   font-weight: 600;
    16. 
                    	
  16.   line-height: 80px;
    17. 
                    	
  17.   letter-spacing: 0.09em;
    18. 
                    	
  18.   text-align: center;
    19. 
                    	
  19.   position: relative;
    20. 
                    	
  20.   display: inline-block
    21. 
                    	
  21. }
    22. 
                    	
  22. header nav .globalNav li::before {
    23. 
                    	
  23.   content: "";
    24. 
                    	
  24.   width: 1px;
    25. 
                    	
  25.   height: 40%;
    26. 
                    	
  26.   margin: auto;
    27. 
                    	
  27.   background: #999;
    28. 
                    	
  28.   position: absolute;
    29. 
                    	
  29.   top: 0;
    30. 
                    	
  30.   bottom: 0;
    31. 
                    	
  31.   left: 0
    32. 
                    	
  32. }
    33. 
                    	
  33. header nav .globalNav li a {
    34. 
                    	
  34.   padding: 0 20px;
    35. 
                    	
  35.   display: block;
    36. 
                    	
  36.   z-index: 1
    37. 
                    	
  37. }
    38. 
                    	
  38. header nav .globalNav li a:hover { color: #e21412 }
    39.

こちらはそれぞれのリンクを「li」タグで表示していますが、疑似要素を使ってliとliの間に区切り線を設けています。

疑似要素というのは「::before」や「::after」を使って文字や装飾を追加する事ができます。かなり便利なので使えるようにしておいて損はないです。

あとはメニューを記述しているaタグにマウスを重ねると文字色が赤色に変化しますが、この設定をしているのが「a:hover」の部分です。リンクに変化を加える事によって見た目にもリンクだとわかりやすくなります。

記述したHTMLとCSSの確認

このページで紹介したコードをまとめて表示しますのでご確認ください。

index.html

                	
    
                    	
  1. <!DOCTYPE html>
    2. 
                        
  2. <html>
    3. 
                        
  3. <head>
    4. 
                        
  4. ～head内の記述省略～
    5. 
                        
  5. </head>
    6. 
                        
  6. <body>
    7. 
                    	
  7.   <header>
    8. 
                     	
  8.     <div class="inner cf">
    9. 
                     	
  9.       <div class="logo">
    10. 
                     	
  10.         <a href="./">
    11. 
                     	
  11.           <h1>いやしのカレー <span>サンプル</span></h1>
    12. 
                     	
  12.         </a>
    13. 
                     	
  13.       </div>
    14. 
                      	
  14.       <nav>
    15. 
                      	
  15.         <div class="globalNav">
    16. 
                     	
  16.           <ul>
    17. 
                     	
  17.             <li><a href="#news">お知らせ</a></li>
    18. 
                     	
  18.             <li><a href="#menu">メニュー</a></li>
    19. 
                    	
  19.             <li><a href="#shop">お店情報</a></li>
    20. 
                    	
  20.             <li><a href="./contact/">お問い合わせ</a></li>
    21. 
                    	
  21.           </ul>
    22. 
                    	
  22.         </div>
    23. 
                    	
  23.       </nav>
    24. 
                    	
  24.     </div>
    25. 
                    	
  25.   </header>
    26. 
                        
  26. </body>
    27. 
                        
  27. </html>
    28.

style.css

                	
    
                    	
  1. @charset "utf-8";
    2. 
                    	
  2.  
    3. 
                    	
  3. /* ------ common ------ */
    4. 
                    	
  4. * {
    5. 
                    	
  5.   margin: 0;
    6. 
                    	
  6.   padding: 0;
    7. 
                    	
  7.   word-break: break-all;
    8. 
                    	
  8.   line-break: strict;
    9. 
                    	
  9.   outline: none;
    10. 
                    	
  10.   box-sizing: border-box
    11. 
                    	
  11. }
    12. 
                    	
  12. html {
    13. 
                    	
  13.   font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
    14. 
                    	
  14.   font-size: 62.5%;
    15. 
                    	
  15.   font-weight: 600;
    16. 
                    	
  16.   font-style: normal;
    17. 
                    	
  17.   line-height: 1.6;
    18. 
                    	
  18.   font-feature-settings: "palt";
    19. 
                    	
  19.   -webkit-overflow-scrolling: touch
    20. 
                    	
  20. }
    21. 
                    	
  21. body {
    22. 
                    	
  22.   height: 100%; 
    23. 
                    	
  23.   color: #000;
    24. 
                    	
  24.   font-size: 1.5rem;
    25. 
                    	
  25.   font-style: normal;
    26. 
                    	
  26.   background: #fff;
    27. 
                    	
  27.   overflow-x: hidden;
    28. 
                    	
  28.   overflow-y: scroll;
    29. 
                    	
  29.   -webkit-text-size-adjust: 100%
    30. 
                    	
  30. }
    31. 
                    	
  31. img { max-width: 100% }
    32. 
                    	
  32. ol,
    33. 
                    	
  33. ul,
    34. 
                    	
  34. li {
    35. 
                    	
  35.   list-style: none
    36. 
                    	
  36. }
    37. 
                    	
  37. table {
    38. 
                    	
  38.   border-spacing: 0;
    39. 
                    	
  39.   border-collapse: collapse
    40. 
                    	
  40. }
    41. 
                    	
  41. form label { cursor: pointer }
    42. 
                    	
  42. input,
    43. 
                    	
  43. textarea {
    44. 
                    	
  44.   border-radius: 0;
    45. 
                    	
  45.   -webkit-appearance: none
    46. 
                    	
  46. }
                    	
  47. a {
    48. 
                    	
  48.   color: #000;
    49. 
                    	
  49.   text-decoration: none;
    50. 
                    	
  50.   transition: all 0.3s ease-in-out
    51. 
                    	
  51. }
    52. 
                    	
  52. a:hover {
    53. 
                    	
  53.   color: #000;
    54. 
                    	
  54.   outline: none
    55. 
                    	
  55. }
    56. 
                    	
  56. a:focus { outline: none }
    57. 
                    	
  57. input[type=submit] { transition: all 0.3s ease-in-out }
    58. 
                    	
  58. a img { border: none }
    59. 
                    	
  59. .cf::after {
    60. 
                    	
  60.   content: "";
    61. 
                    	
  61.   display: block;
    62. 
                    	
  62.   clear: both
    63. 
                    	
  63. }
    64. 
                    	
  64. ::-moz-selection {
    65. 
                    	
  65.   color: #fff;
    66. 
                    	
  66.   background: #000
    67. 
                    	
  67. }
    68. 
                    	
  68. ::selection {
    69. 
                    	
  69.   color: #fff;
    70. 
                    	
  70.   background: #000
    71. 
                    	
  71. }
                    	
  72. ::-webkit-input-placeholder { color: #999 }
    73. 
                    	
  73. ::-moz-placeholder {
    74. 
                    	
  74.   color: #999;
    75. 
                    	
  75.   opacity: 1
    76. 
                    	
  76. }
    77. 
                    	
  77. :-ms-input-placeholder { color: #999 }
    78. 
                        
  78.  
    79. 
                    	
  79. /* ------ header ------ */
    80. 
                    	
  80. header {
    81. 
                    	
  81.   width: 100%;
    82. 
                    	
  82.   height: 80px;
    83. 
                    	
  83.   background: #fff;
    84. 
                    	
  84.   position: fixed;
    85. 
                    	
  85.   top: 0;
    86. 
                    	
  86.   box-shadow: 0 0 5px rgb(0,0,0,0.3);
    87. 
                    	
  87.   z-index: 100
    88. 
                    	
  88. }
    89. 
                    	
  89. header .inner {
    90. 
                    	
  90.   width: 100%;
    91. 
                    	
  91.   font-size: 0;
    92. 
                    	
  92.   margin: 0 auto
    93. 
                    	
  93. }
    94. 
                    	
  94. header .logo {
    95. 
                    	
  95.   vertical-align: middle;
    96. 
                    	
  96.   padding: 0 0 0 20px;
    97. 
                    	
  97.   position: relative;
    98. 
                    	
  98.   display: inline-block;
    99. 
                    	
  99.   z-index: 100
    100. 
                    	
  100. }
    101. 
                    	
  101. header .logo a { display: block }
    102. 
                    	
  102. header .logo h1,
    103. 
                    	
  103. header .logo p {
    104. 
                    	
  104.   font-size: 1.6rem;
    105. 
                    	
  105.   font-weight: 600;
    106. 
                    	
  106.   line-height: 80px;
    107. 
                    	
  107.   letter-spacing: 0.09em;
    108. 
                    	
  108.   transition: all 0.3s;
    109. 
                    	
  109.   display: inline-block
    110. 
                    	
  110. }
    111. 
                    	
  111. header .logo h1 span,
    112. 
                    	
  112. header .logo p span {
    113. 
                    	
  113.   font-size: 2.4rem
    114. 
                    	
  114. }
    115. 
                        
  115.  
    116. 
                    	
  116. /* ------ nav ------ */
    117. 
                    	
  117. header nav {
    118. 
                    	
  118.   text-align: center;
    119. 
                    	
  119.   vertical-align: top;
    120. 
                    	
  120.   display: inline-block;
    121. 
                    	
  121.   float: right
    122. 
                    	
  122. }
    123. 
                    	
  123. header nav .globalNav ul {
    124. 
                    	
  124.   height: 80px;
    125. 
                    	
  125.   font-size: 0
    126. 
                    	
  126. }
    127. 
                    	
  127. header nav .globalNav li {
    128. 
                    	
  128.   height: 80px;
    129. 
                    	
  129.   font-size: 1.5rem;
    130. 
                    	
  130.   font-weight: 600;
    131. 
                    	
  131.   line-height: 80px;
    132. 
                    	
  132.   letter-spacing: 0.09em;
    133. 
                    	
  133.   text-align: center;
    134. 
                    	
  134.   position: relative;
    135. 
                    	
  135.   display: inline-block
    136. 
                    	
  136. }
    137. 
                    	
  137. header nav .globalNav li::before {
    138. 
                    	
  138.   content: "";
    139. 
                    	
  139.   width: 1px;
    140. 
                    	
  140.   height: 40%;
    141. 
                    	
  141.   margin: auto;
    142. 
                    	
  142.   background: #999;
    143. 
                    	
  143.   position: absolute;
    144. 
                    	
  144.   top: 0;
    145. 
                    	
  145.   bottom: 0;
    146. 
                    	
  146.   left: 0
    147. 
                    	
  147. }
    148. 
                    	
  148. header nav .globalNav li a {
    149. 
                    	
  149.   padding: 0 20px;
    150. 
                    	
  150.   display: block;
    151. 
                    	
  151.   z-index: 1
    152. 
                    	
  152. }
    153. 
                    	
  153. header nav .globalNav li a:hover { color: #e21412 }
    154.

それではstyle.cssを下図の階層に配置してみましょう。今度は「css」フォルダを作ってstyle.cssを入れておきます。

デモサイトの階層

このページではheaderのパソコンで表示する部分を作りましたので、次はスマホで見た時のデザインを追加していきます。レスポンシブデザインなのでちょっと複雑ですが、まぁ、ゆっくりいきましょう（笑）。

head内に必要な情報を記述する ハンバーガーメニューの設置【SP】

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記