【営業不要】Web制作で月30万を安定的に稼ぐ近道 >>

【コピペOK】横並びのCSSナビゲーションバー3選|transform:scale×hover

今回は横並びのナビゲーションバー3選【transform scale× hoverで動くCSSアニメーションデザイン】をご紹介いたします。

シンプルかつ洗練されたデザイン。hoverアニメーションでNavbarが拡大縮小する。Web制作で使える。コピペOK。HTML, CSSだけです。

 

この記事の信頼性(筆者はこんな人)

  • 現役Webデザイナーが執筆
  • 継続して月収80万円超のフリーランス
  • 完全未経験から独学でWeb制作スキルを習得
  • Twitterフォロワー数1,700人超(→@twinzvlog_yk
  • Web制作の無料メンター経験多数
  • 認定ランサー(ランサーズ最高ランク)

 

動きを見ていただければ使いたくなること間違いなしです!

コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。

 

1. 【横に拡大縮小アニメーション】横並びナビゲーションデザイン

動きは下の画像のような感じになります

コードを見る
  <div class="navigation">
    <!-- 階層に分けてナビゲーションの骨組みを作成 -->
    <ul>
      <li class="button">
        <p><a href="#">Home</a></p>
      </li>
      <li class="button">
        <p><a href="#">About</a></p>
      </li>
      <li class="button">
        <p><a href="#">Portfolio</a></p>
      </li>
      <li class="button">
        <p><a href="#">blog</a></p>
      </li>
    </ul>
  </div>
.navigation ul {
  /* flexboxで要素を横並び+真ん中に指定 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10%;
}
.button{
  display: block;
  padding: 10px 100px;
}
.button p {
  font-weight: 300;
  /* カーソルを離した際のアニメーションの速度調整 */
  transition:.5s all;
  transform: scaleX(1.8);
}
.button a {
  color:#333333;
  /* リンク指定した要素のスタイルを削除 */
  text-decoration:none;
}
.button:hover > p {
  /* サイズ調整 */
  transform: scaleX(1);
    /* hover時の速度調整 */
  transition: .3s;
  text-shadow: 1px 1px 1px #f1f1f1;
  font-weight: bold;
}
ここがポイント!
  1. ul, liでナビゲーションバーの骨組みを作成
  2. flexboxで横並び+ど真ん中に配置
  3. .button:hover > pに transform: scale(拡大)を指定することによりhoverしたボタンのみサイズが拡大・縮小する
  4. transitionで要素をマウスオーバー(hover)した際のアニメーションを指定しシンプルなナビゲーションバーデザインを実現

 

2. 【縦に拡大縮小アニメーション】横並びナビゲーションデザイン

動きは下の画像のような感じになります

コードを見る
  <div class="navigation">
    <!-- 階層に分けてナビゲーションの骨組みを作成 -->
    <ul>
      <li class="button">
        <p><a href="#">Home</a></p>
      </li>
      <li class="button">
        <p><a href="#">About</a></p>
      </li>
      <li class="button">
        <p><a href="#">Portfolio</a></p>
      </li>
      <li class="button">
        <p><a href="#">blog</a></p>
      </li>
    </ul>
  </div>
.navigation ul {
  /* flexboxで要素を横並び+真ん中に指定 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10%;
}
.button{
  display: block;
  padding: 10px 100px;
}
.button p {
  font-weight: 300;
  /* カーソルを離した際のアニメーションの速度調整 */
  transition:.5s all;
  transform: scaleY(1.8);
}
.button a {
  color:#333333;
  /* リンク指定した要素のスタイルを削除 */
  text-decoration:none;
}
.button:hover > p {
  /* サイズ調整 */
  transform: scaleY(1);
    /* hover時の速度調整 */
  transition: .3s;
  text-shadow: 1px 1px 1px #f1f1f1;
  font-weight: bold;
}
ここがポイント!
  1. ul, liでナビゲーションバーの骨組みを作成
  2. flexboxで横並び+ど真ん中に配置
  3. .button:hover > pに transform: scale(拡大)を指定することによりhoverしたボタンのみサイズが拡大・縮小する
  4. transitionで要素をマウスオーバー(hover)した際のアニメーションを指定しシンプルなナビゲーションバーデザインを実現

 

3. 【3D拡大縮小アニメーション】横並びナビゲーションデザイン

動きは下の画像のような感じになります

コードを見る
  <div class="navigation">
    <!-- 階層に分けてナビゲーションの骨組みを作成 -->
    <ul>
      <li class="button">
        <p><a href="#">Home</a></p>
      </li>
      <li class="button">
        <p><a href="#">About</a></p>
      </li>
      <li class="button">
        <p><a href="#">Portfolio</a></p>
      </li>
      <li class="button">
        <p><a href="#">blog</a></p>
      </li>
    </ul>
  </div>
.navigation ul {
  /* flexboxで要素を横並び+真ん中に指定 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10%;
}
.button{
  display: block;
  padding: 10px 100px;
}
.button p {
  font-weight: 300;
  /* カーソルを離した際のアニメーションの速度調整 */
  transition:.5s all;
  transform: scaleX(1.5) scaleY(1.5);
}
.button a {
  color:#333333;
  /* リンク指定した要素のスタイルを削除 */
  text-decoration:none;
}
.button:hover > p {
  /* サイズ調整 */
  transform: scaleX(1) scaleY(1);
    /* hover時の速度調整 */
  transition: .3s;
  text-shadow: 1px 1px 1px #f1f1f1;
  font-weight: bold;
}
ここがポイント!
  1. ul, liでナビゲーションバーの骨組みを作成
  2. flexboxで横並び+ど真ん中に配置
  3. .button:hover > pに transform: scale(拡大)を指定することによりhoverしたボタンのみサイズが拡大・縮小する
  4. transitionで要素をマウスオーバー(hover)した際のアニメーションを指定しシンプルなナビゲーションバーデザインを実現

 

【独学なら】Udemy講座で『稼げるWeb制作スキル』を完全マスター|オンライン講座

  • Web制作スキルを絶対に完全マスターしたい・・
  • 独学でできるだけ安い方法で習得したい・・
  • 初心者でも独学でWebデザイナー・Webエンジニアになれるかな・・

こんな疑問や不安をお持ちの方は今回紹介するUdemy講座に目を通しておいて損はありません。

「Udemyって何?」という方もいらっしゃるかと思いますので簡単にUdemyを使うメリットを説明いたします。

 

【Udemyを使うべき5つの理由】

  1. 新規受講生割引
    Udemy新規登録で6時間限定のセール発生。ほぼ全講座が90%割引
  2. 30日間の返金保証
    理由問わず30日間の返金保証。気に入らないなら即返金
  3. 動画の速度調整
    0.5, 0.75, 1, 1.25, 1.5, 1.75, 2倍で速度を調整可能。学習時間の短縮
  4. 講座購入後の学習期限なし
    Udemyアカウントを持っている限り、購入後はいつまでも講座を受講できる
  5. 毎月不定期に発生する大特価セール
    通常価格の90%OFFが基本。セール中を狙って購入するのが鉄則

 

筆者自身、Web制作の必須スキルのほとんどをUdemy講座で身につけました。

ありがたいことに、Udemyで応用力のあるスキルを身につけたことで実際の案件対応ではほとんど困ることはありませんでした。

またTwitterのDMで相談を受けることが多いのですが、Webデザイン初学者にはUdemy講座で学習するように薦めています。

理由としては安易にスクールや高額商材に手を出すよりも確実にスキルを習得できるからです。

「安かろう悪かろう」

確かに普通ならそうかもしれません。

しかしUdemyは元値20,000円以上する講座がほとんどです。

その高額な講座でも、Udemyを初めて利用する方なら最大95%OFFで受講できます。

 

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
値段
(4.0)
学習しやすさ
(5.0)
わかりやすさ
(5.0)
学習効率
(4.0)
費用対効果
(5.0)
初心者向け
(5.0)
オススメ度
(5.0)
総合評価
(5.0)
この講座のポイント

レッスン時間
約42時間

 

値段
24,000円(セール中90%OFF)

 

Udemy公式サイト
未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコースの詳細ページ

 

この講座の特徴

本講座は以下の4講座をひとつに凝縮した内容となっています。ちなみにこの4講座はどれも定価9,600円なので合計すると38,400円!それを24,000円で受講できるので15,000円もオトク。

しかもセール中に購入すればその上さらに90%OFF。これ以上コスパの良いWebデザイン教材は見たことがありません。

 

注意

この講座ではAdobeからPhotoshopのインストールが必須になります。前もって準備しておきましょう。

 Adobeのプランは14日間の返金保証あり

 

こちらは購入必須の講座です。

ふたご

 

 講座の詳細ページ >>

 

 

まとめ

HTMLとCSSを使うと今回紹介したようなことも簡単にできてしまうんです。

 

『CSSアニメーションやエフェクトだけではなくWebサイトをゼロから作って稼いでいきたい』

『3ヶ月くらいで最低でも月10万円は稼ぎたい』

『営業とかやったことないけどWeb制作だけで稼いでいきたい』

 

こんな方のためにWeb制作で月80万超稼ぐ筆者が自身の経験を踏まえて【失敗しない】Webデザイナー(Web制作)独学ロードマップを執筆しました。

 

少額の投資で3ヶ月後には月10〜30万稼げるよう設計してあります。
(学習教材やAdobeなど最低限のコストはかかります)

 

ロードマップの構成
  1. Web制作に特化した『確実に身に付く』学習方法
  2. Web制作会社が喰いつく理想的なポートフォリオの作成手順
  3. 返信率10%以上!Web制作会社へのメール営業

 

有料公開も考えましたが「Webデザイナー(Web制作)はまだまだ稼げることを証明したい!」という思いが強く、期間限定で無料公開をすることにしました。

 

2021年半ばまでは無料公開する予定ではありますが前倒しすることもあり得ますのでご興味ある方はお早めにどうぞ!