共通メニューとは?書き方とデザインサンプル

メニューとは?書き方とデザインサンプル
メニュー

Webサイトのメニューとは?役割、ホームページで使われるHTMLとCSSを用いたメニューの作り方、デザインサンプルをご紹介します。

メニューとは?

ホームページのメニューとはナビゲーションメニューやサイドバーなどがあり、関連ページへ遷移させる重要な要素です。

メニューの数は多ければよいという訳ではなく、関連するページを記載することが重要です。

共通メニューの役割

メニューの役割は関連記事へ繋ぐことが役割となります。

メニューのリンクを押すということは、ホームページを見に来たユーザが興味をもってくれたからメニューを押すことになり関連するページへ繋ぐことで成約率に影響する重要な役割を持っています。

メニューの書き方

このページのメニュー部分を元に書き方を説明していきます。

サイドバー

  1. <div id="sidemenu">
  2.  <div class="sidebar_widget">
  3.   <div class="textwidget">
  4.    <h3>WEB</h3>
  5.    <ul>
  6.     <li><a href="http://~">リンク名</a></li>
  7.    </ul>
  8.   </div>
  9.  </div>
  10. </div>
#sidemenu
  • サイドメニューの領域を確保
  1. #sidemenu{
  2.  position:relative;
  3. }
  4. @media screen and (min-width:768px) and ( max-width:1024px){
  5.  #sidemenu{
  6.   width: 30%;
  7.   float:right;
  8.  }
  9. }
  10. @media screen and (min-width:1024px){
  11.  #sidemenu{
  12.   width: 30%;
  13.   float:right;
  14.  }
  15. }
.sidebar_widget
  • 枠の装飾
  1. .sidebar_widget{
  2.  margin-bottom: 30px;
  3.  margin-top: 10px;
  4.  overflow: hidden;
  5.  box-shadow: 0 0 6px rgba(0,0,0,.7);
  6. }
.sidebar_widget ul li
  • リンクの文字の大きさや色、配置場所の設定
  1. .sidebar_widget ul li{
  2.  display: block;
  3.  font-family: 'Roboto',sans-serif;
  4.  font-size: 15px;
  5.  transition: all .4s ease 0;
  6.  padding-bottom: 10px;
  7.  padding-top: 0;
  8.  border-bottom: 1px dashed #ccc;
  9.  margin: 10px;
  10. }
  11. .sidebar_widget ul li a{
  12.  color: #6a6a6a;
  13.  padding-left: 30px;
  14.  background: url(https://9box.jp/images/icon_yjr.png) left center no-repeat;
  15. }
.textwidget
  • 行の高さや文字の配置装飾の設定
  1. .textwidget{
  2.  line-height: 26px;
  3. }
  4. .textwidget h3{
  5.  text-align: center;
  6.  font-size: 22px;
  7.  border: none;
  8. }
  9. .textwidget ul{
  10.  padding-left: 10px;
  11. }

ナビゲーションメニュー

ナビゲーションメニューにつきましてはヘッダーに追加する為ヘッダのナビゲーションメニューをご覧ください。

デザインサンプル

パソコンで見た時のメニュー

パソコンで見た時のメニュー

スマートフォンで見た時のメニュー

スマートフォンで見た時のメニュー
PAGE TOP