member-reference

Life is Tech! Lesson

オリジナル制作サンプル集

リンクをボタンみたいにする

難易度：

タグ：nav

関連レッスン：Chapter 1 レッスン 8

できあがりイメージ

つくりかた

Step1

ナビゲーション要素をHTMLから探す

HTML

<nav>
  <ul>
    <li><a href="#shop">Mom's Bakeryについて</a></li>
    <li><a href="#photo">おすすめのパン</a></li>
    <li><a href="#price">商品メニュー</a></li>
    <li><a href="#access">アクセスマップ</a></li>
  </ul>
</nav>

HTMLのnavタグ内の要素に対しCSSを反映させていきます。

Step2

ナビゲーション要素のCSSセレクタを探す

CSSのセレクタで nav とそれに関連したものを探しましょう。

CSS

/* ナビゲーションの箱 */
nav {
  background-color: #663300;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* リスト全体 */
nav ul {
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: center;
}

/* １つ１つのリスト */
nav li {
  display: inline-block;
  margin-right: 40px;
}

/* リンク */
nav a {
  color: #ffffff;
  text-decoration: none;
}

/* リンクにふれた時 */
nav a: hover {
  color: #ffcc11;
}

nav に関連したセレクタは、
・nav
・nav ul
・nav li
・nav a
・nav a: hover
の5つです。

Step3

ナビゲーションを表示する位置を変更

nav ul の margin-top と margin-bottom の値を指定して、ナビゲーションを表示する位置を変更します。

CSS

/* リスト全体 */
nav ul {
  margin-top: -100px;
  margin-bottom: 40px;
  text-align: center;
}

margin-top の値を-100pxにすると、header の中にナビゲーションを配置することができます。

Step4

不要なCSSを削除する

nav を削除します。

CSS

/* リスト全体 */
nav ul {
  margin-top: -100px;
  margin-bottom: 40px;
  text-align: center;
}

/* １つ１つのリスト */
nav li {
  display: inline-block;
  margin-right: 40px;
}

/* リンク */
nav a {
  color: #ffffff;
  text-decoration: none;
}

/* リンクにふれた時 */
nav a: hover {
  color: #ffcc11;
}

サンプルでは、header の中にナビゲーションを配置しているので、背景色や余白は不要なので削除します。

Step5

ナビゲーションの1つづつの背景に色をつける

nav a に display: inline-block を追加します。
background-color を指定して、背景に色をつけます。

CSS

/* リンク */
nav a {
  color: #000000;
  text-decoration: none;
  display: inline-block;
  padding: 8px;
  width: 200px;
  background-color: #8B0000;
}

サンプルでは背景色を #33ddcc (グリーン) に指定しています。
padding と width を指定して余白を調整します。
必要があれば、背景色に合わせて文字の色も書き換えましょう。

ワンポイント解説

display: inline-block を指定しない場合、width (横幅) の設定ができなくなります。

CSS

nav a {
  color: #000000;
  text-decoration: none;
  padding: 8px;
  width: 200px;
  background-color: #8B0000;
}

Step6

ナビゲーションの位置を調整する

header の height を変更して、ナビゲーションの位置を調整します。

CSS

header {
  background-image: url(img/bg_header.jpg);/* 背景画像 */
  height: 520px;/* 高さ */
  padding-top: 80px;/* 上がわの余白 */
}

サンプルでは height を520px に変更して、padding を 80px にしています。

Step7

ナビゲーションをボタンっぽくする

nav a に border-bottom を追加して、立体感のあるボタンを作ります。
border-radius で角丸を作ります。

CSS

/* リンク */
nav a {
  color: #000000;
  text-decoration: none;
  display: inline-block;
  padding: 8px;
  width: 200px;
  background-color: #33ddcc;
  border-bottom: 6px solid #2AB4A6;
  border-radius: 100vh;
}

border-bottom に背景色より少し濃い色を指定すると、影のように見えて立体感が出ます。
border-radius に 100vh を指定すると、要素の左右を半円にすることができます。

Step8

コードを書くかコピー＆ペーストする

CSS

border-bottom: 6px solid #2AB4A6;
border-radius: 100vh;

コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。

Step9

カーソルが通過したときにボタンの位置を変更する

nav a: hover に transform を追加して、ボタンの位置を変更します。

CSS

/* リンクにふれた時 */
nav a: hover {
  color: #000000;
  transform: translateY(6px);
}

transform に translateY を指定すると縦方向に要素を移動させることができます。
カッコ内には移動させる範囲を指定します。

Step10

実際の見え方を確認

カーソルが通過するとボタンが押されたように変化したら完成です。

Step11

ボタンが押されたようにする

transform でボタンの位置を移動させた時に、border-bottom を消してボタンが押されたように見せます。

CSS

nav li:hover {
  color: #000000;
  transform: translateY(6px);
  border-bottom: none;
}

border-bottom に none を指定すると、ボーダーが表示されなくなります。

Step12

コードを書くかコピー＆ペーストする

CSS

transform: translateY(6px);
border-bottom: none;

コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。

Step13

今の見え方を確認する

立体感のある、角丸のボタンになっていたら次のステップに進みましょう。

ページの先頭へ