自分だけのマイCSSフレームワークをつくる（ヘッダー編）

Posted on by Yochi

自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今回は、ヘッダーのパーツをつくろうと思います。

オリジナルのフレームワークというよりは、各パーツをそれぞれリストアップしていって、サイトを作るときにそこから拾い上げるといった感じになるかも？と思っています。
最初からそれぞれ用意しておくのは、クラス名の指定などいろいろ考えておかないといけないのが面倒ですし、無駄にもつながりそうですから。

表示のデモを一緒に載せておくと分かりやすいと思うのですが、デモ用のページとかつくってないので載せられないんですよね…
やっぱりこれもつくったほうがいいかな？

サイト名とナビゲーションを横並びにしたヘッダー

html
<header class="header">
  <div class="header-inner">
    <div class="header-title">
      <h1 class="brand"><a href="#">サイト名</a></h1>
      <p class="catch">キャッチコピー</p>
    </div>

    <nav class="header-nav">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">ブログ</a></li>
        <li><a href="#">サイトについて</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </div>
</header>
style.css
/* ヘッダー共通 ： サイト名  */
.header-title .brand {
  margin: 0;
  line-height: 1;
}

.header-title .brand a {
  text-decoration: none;
}

.header-title .catch {
  margin: 12px 0 0 0;
  line-height: 1;
}

/* ヘッダー共通 ： ナビゲーション  */
.header-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-nav a {
  display: block;
  padding: 12px;
  text-decoration: none;
}

.header-nav a:hover {
  opacity: 0.8;
}

@media (min-width: 768px) {
  /* サイト名とナビゲーションを横並びにする */
  .header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .header-nav ul {
    display: flex;
  }
}

フォントサイズやカラーなどの装飾はどうしようか迷ったのですが、サイトをつくる際に設定すると思うので、ここではあえて指定しませんでした。
新たにクラスをつくり、指定して上書きするのは無駄なような気がしますからね。

サイト名とナビゲーションを横並びにせず、縦に並べたヘッダー

html
<header class="header">
  <div class="header-inner">
    <div class="header-title">
      <h1 class="brand"><a href="#">サイト名</a></h1>
      <p class="catch">キャッチコピー</p>
    </div>

    <nav class="header-nav">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">ブログ</a></li>
        <li><a href="#">サイトについて</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </div>
</header>
style.css
/* ヘッダー共通 ： サイト名 */
.header-title .brand {
  margin: 0;
  line-height: 1;
}

.header-title .brand a {
  text-decoration: none;
}

.header-title .catch {
  margin: 12px 0 0 0;
  line-height: 1;
}

/* ヘッダー共通 ： ナビゲーション */
.header-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-nav a {
  display: block;
  padding: 12px;
  text-decoration: none;
}

.header-nav a:hover {
  opacity: 0.8;
}

@media (min-width: 768px) {
  .header-nav ul {
    display: flex;
  }
}

こちらはメディアクエリの中のサイト名とナビゲーションを横並びにするという設定を外すだけでOKですね。

スマホのときナビゲーションを横スクロールさせる

html
<header class="header">
  <div class="header-inner">
    <div class="header-title">
      <h1 class="brand"><a href="#">サイト名</a></h1>
      <p class="catch">キャッチコピー</p>
    </div>

    <nav class="header-nav">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">ブログ</a></li>
        <li><a href="#">サイトについて</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </div>
</header>
style.css
/* ヘッダー共通 ： サイト名 */
.header-title .brand {
  margin: 0;
  line-height: 1;
}

.header-title .brand a {
  text-decoration: none;
}

.header-title .catch {
  margin: 12px 0 0 0;
  line-height: 1;
}

/* ヘッダー共通 ： ナビゲーション */
.header-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-nav a {
  display: block;
  padding: 12px;
  text-decoration: none;
}

.header-nav a:hover {
  opacity: 0.8;
}

/* ナビゲーションを横スクロールさせる */
.header .header-nav{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;  /* 慣性スクロール */
}

.header .header-nav ul {
  display: flex;
  flex-direction: row;
}

.header .header-nav li {
  flex: 0 0 auto;
}

overflow-x: auto;を設定することで横スクロールできるようにしています。

ハンバーガーメニューのボタン

html
<header class="header">
  <div class="header-inner">
    <div class="header-title">
      <h1 class="brand"><a href="#">サイト名</a></h1>
    </div>
    <button type="button" class="nav-btn">
      <span class="bars"></span>
    </button>

    <nav class="header-nav">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">ブログ</a></li>
        <li><a href="#">サイトについて</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </div>
</header>
style.css
/* ヘッダー共通 ： サイト名 */
.header-title .brand {
  margin: 0;
  line-height: 1;
}

.header-title .brand a {
  text-decoration: none;
}

.header-title .catch {
  margin: 12px 0 0 0;
  line-height: 1;
}

/* ヘッダー共通 ： ナビゲーション */
.header-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-nav a {
  display: block;
  padding: 12px;
  text-decoration: none;
}

.header-nav a:hover {
  opacity: 0.8;
}

/* ヘッダー： ボタンのスタイルと表示 */ 
@media (max-width: 767px) {
  .header .header-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .header .nav-btn {
    margin-right: 12px;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
  }
  
  .header .nav-btn:hover {
    opacity: 0.5;
  }
  
  .header .header-nav {
    display: none;
  }
}

@media (min-width: 768px) {
   /* ヘッダー： サイト名とナビゲーションを横並びにする */ 
  .header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .header-nav ul {
    display: flex;
  }
  
  .header .nav-btn {
    display: none;
  }
  
  .header .header-nav {
    display: block !important;
  }
}

/* ハンバーガーメニューの三本線アイコン */ 
.bars {
  display: inline-block;
  width: 18px;
  height: 3px;
  background-color: #333;
  box-shadow: 0px -6px #333, 0 6px #333;
  border-radius: 0.1px;
  margin: 12px 0 9px;
}

あとはjQueryを使って、ナビゲーションを開閉させる設定を追加すればOKかな。

このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です