【月10万稼ぐ】本物のWeb制作3ヶ月独学ロードマップ

【Web制作で使える】スライドするCSSハンバーガーメニュー3選

今回はハンバーガーメニューをクリックするとサイドバーがtransform:skewで傾斜しながら表示されるCSSアニメーションをご紹介いたします。

スライドにtransform:skewを使用した傾斜の効いたアニメーションに加えてtranslateでスライドをプラスした3種類のマテリアルデザインを作りました。

 

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

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

 

マテリアルデザインなのでそのまますぐにでもコピペして使用できるように仕上がっています。

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

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

 

1. サイドバーが傾斜しながらスライドしてくるハンバーガーメニュー

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

コードを見る
<div>
  <div class="hamburger">
    <div class="borders">
      <a href="#sidemenu" class="hamburger-menu">
        <div class="first-border"></div>
        <div class="second-border"></div>
        <div class="third-border"></div>
      </a>
    </div>
  </div>
  <header id="sidemenu" class="sidenavs">
    <a href="#" class="close-btn">&times;</a>
    <div class="sidebar-btn">
      <p><a href="#">About</a></p>
      <p><a href="#">Services</a></p>
      <p><a href="#">Clients</a></p>
      <p><a href="#">Contact</a></p>
    </div>
  </header>
</div>
.hamburger-menu div {
  height: 5px;
  background-color: black;
  margin: 5px auto;
}
.hamburger-menu .first-border {
  width: 25px;
  /* メニューアイコンの線の長さを調整 */
}
.hamburger-menu .second-border {
  width: 18px;
  /* メニューアイコンの線の長さを調整 */
}
.hamburger-menu .third-border {
  width: 12px;
  /* メニューアイコンの線の長さを調整 */
}
.hamburger .borders {
  padding-top:5px;
}
.hamburger {
  width:52px;
  height:50px;
  border:2px solid white;
  border-radius:10px;
  /* ボーダーにradiusで丸みをつける */
  transition: .5s;
  /* アニメーションの時間を0.5秒に指定 */
  opacity:1;
  /* 透明度を指定 */
  background:#f1f1f1;
}
.hamburger:hover {
  opacity:0.5;
  /* 透明度を指定 */
}
.hamburger + .sidenavs:target {
  overflow-x: visible;
  /* ボックスからはみ出る箇所をそのまま表示 */
  width: 40%;
  /* サイドメニューの幅 */
  display:block;
  transform:skewX(0deg) translate(0px);
  /* 傾斜率と移動距離を指定 */
}
.sidenavs:target {
  overflow-x: hidden;
  /* ボックスからはみ出る箇所を隠す */
  width: 0;
  transition-duration:1.2s;
  /* アニメーションの時間を0.5秒に指定 */
}
/* ハンバーガーメニュー表示時 */
.sidenavs {
  height: 100%;
  width: 0;
  position: fixed;
  /* 画像の配置を指定 */
  z-index: 1;
  top: 0;
  left: 0;
  background-image:url("https://source.unsplash.com/1000x803");
  /* サイドバーの背景画像を指定 */
  overflow-x: hidden;
  /* 横スクロールを無効にする */
  padding-top: 60px;
  transition: .8s;
  /* アニメーションの時間を0.5秒に指定 */
  transform:skewX(-30deg) translate(-230px);
  /* 傾斜率と移動距離を指定 */
}
/* ハンバーガーメニュー表示時のリンク */
.sidenavs a {
  text-decoration: none;
  font-size: 45px;
  /* 文字サイズを大きめに調整 */
  color: white;
  display: block;
  transition: 0.5s;
  /* アニメーションの時間を0.5秒に指定 */
  font-weight:bold;
}
/* マウスオーバー後のリンク */
.sidebar-btn a {
  transform:skewX(0deg);
  /* X軸の傾斜角度を指定 */
}
.sidebar-btn a:hover {
  color: black;
  transform:skewX(-20deg);
  /* X軸の傾斜角度を指定 */
}
.sidenavs p {
  margin:20px 80px;
  /* サイドバーのボタン位置を調整 */
  width:250px;
}
/* クローズボタン */
.sidenavs .close-btn {
  position: absolute;
  /* 親要素との絶対位置を指定 */
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
ここがポイント!
  1. 長さの異なるボーダーを縦に並べることで「ドネルメニュー(Doner Menu)」を実現
  2. ドネルメニューをクリックするとtransform:skewX, translateが実行されサイドバーが傾斜しながら現れるスタイリッシュなアニメーションを実現
  3. ドネルメニューをhoverするとopacityが実行されて透明化する
  4. サイドバーのwidthを40%に調整
  5. transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
  6. サイドバーのボタンをhoverするとtransform:skewが実行されボタンが斜めに傾くアニメーションとなるように傾斜角度を調整(transformの使い方については【transform完全網羅】hoverで動き出す!transformを網羅できるCSSボタンアニメーション16選)

 

2. サイドバーが斜め上からスライド表示されるハンバーガーメニュー

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

コードを見る
<div>
  <div class="hamburger">
    <div class="borders">
      <a href="#sidemenu" class="hamburger-menu">
        <div class="first-border"></div>
        <div class="second-border"></div>
        <div class="third-border"></div>
      </a>
    </div>
  </div>
  <header id="sidemenu" class="sidenavs">
    <a href="#" class="close-btn">&times;</a>
    <div class="sidebar-btn">
      <p><a href="#">About</a></p>
      <p><a href="#">Services</a></p>
      <p><a href="#">Clients</a></p>
      <p><a href="#">Contact</a></p>
    </div>
  </header>
</div>
.hamburger-menu div {
  height: 5px;
  background-color: black;
  margin: 5px auto;
}
.hamburger-menu .first-border {
  width: 25px;
  /* メニューアイコンの線の長さを調整 */
}
.hamburger-menu .second-border {
  width: 18px;
  /* メニューアイコンの線の長さを調整 */
}
.hamburger-menu .third-border {
  width: 12px;
  /* メニューアイコンの線の長さを調整 */
}
.hamburger .borders {
  padding-top:5px;
}
.hamburger {
  width:52px;
  height:50px;
  border:2px solid white;
  border-radius:10px;
  /* ボーダーにradiusで丸みをつける */
  transition: .5s;
  /* アニメーションの時間を0.5秒に指定 */
  opacity:1;
  /* 透明度を指定 */
  background:#f1f1f1;
}
.hamburger:hover {
  opacity:0.5;
  /* 透明度を指定 */
}
.hamburger + .sidenavs:target {
  overflow-x: visible;
  /* ボックスからはみ出る箇所をそのまま表示 */
  width: 40%;
  /* サイドメニューの幅 */
  display:block;
  transform:skewY(0deg);
  /* 傾斜率を指定 */
}
.sidenavs:target {
  overflow-x: hidden;
  /* ボックスからはみ出る箇所を隠す */
  width: 0;
  transition-duration:1.2s;
  /* アニメーションの時間を0.5秒に指定 */
}
/* ハンバーガーメニュー表示時 */
.sidenavs {
  height: 100%;
  width: 0;
  position: fixed;
  /* 画像の配置を指定 */
  z-index: 1;
  top: 0;
  left: 0;
  background-image:url("https://source.unsplash.com/1000x802");
  /* サイドバーの背景画像を指定 */
  overflow-x: hidden;
  /* 横スクロールを無効にする */
  padding-top: 60px;
  transition: 0.8s;
  /* アニメーションの時間を0.5秒に指定 */
  transform:skewY(30deg);
  /* 傾斜率を指定 */
}
/* ハンバーガーメニュー表示時のリンク */
.sidenavs a {
  text-decoration: none;
  font-size: 45px;
  /* 文字サイズを大きめに調整 */
  color: white;
  display: block;
  transition: 0.5s;
  /* アニメーションの時間を0.5秒に指定 */
  font-weight:bold;
}
/* マウスオーバー後のリンク */
.sidebar-btn a {
  transform:skewX(0deg);
  /* X軸の傾斜角度を指定 */
}
.sidebar-btn a:hover {
  color: black;
  transform:skewX(-20deg);
  /* X軸の傾斜角度を指定 */
}
.sidenavs p {
  margin:20px 80px;
  /* サイドバーのボタン位置を調整 */
  width:250px;
}
/* クローズボタン */
.sidenavs .close-btn {
  position: absolute;
  /* 親要素との絶対位置を指定 */
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
ここがポイント!
  1. 長さの異なるボーダーを縦に並べることで「ドネルメニュー(Doner Menu)」を実現
  2. ドネルメニューをクリックするとtransform:skewYが実行されサイドバーが斜め上から滑らかに現れるアニメーションを実現
  3. ドネルメニューをhoverするとopacityが実行されて透明化する
  4. サイドバーのwidthを40%に調整
  5. transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
  6. サイドバーのボタンをhoverするとtransform:skewが実行されボタンが斜めに傾くアニメーションとなるように傾斜角度を調整(transformの使い方については【transform完全網羅】hoverで動き出す!transformを網羅できるCSSボタンアニメーション16選)

 

3. サイドバーが吹っ飛んでくるハンバーガーメニュー

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

コードを見る
<div>
  <div class="hamburger">
    <div class="borders">
      <a href="#sidemenu" class="hamburger-menu">
        <div class="first-border"></div>
        <div class="second-border"></div>
        <div class="third-border"></div>
      </a>
    </div>
  </div>
  <header id="sidemenu" class="sidenavs">
    <a href="#" class="close-btn">&times;</a>
    <div class="sidebar-btn">
      <p><a href="#">About</a></p>
      <p><a href="#">Services</a></p>
      <p><a href="#">Clients</a></p>
      <p><a href="#">Contact</a></p>
    </div>
  </header>
</div>
.hamburger-menu div {
  height: 5px;
  background-color: black;
  margin: 5px auto;
}
.hamburger-menu .first-border {
  width: 25px;
  /* メニューアイコンの線の長さを調整 */
}
.hamburger-menu .second-border {
  width: 18px;
  /* メニューアイコンの線の長さを調整 */
}
.hamburger-menu .third-border {
  width: 12px;
  /* メニューアイコンの線の長さを調整 */
}
.hamburger .borders {
  padding-top:5px;
}
.hamburger {
  width:52px;
  height:50px;
  border:2px solid white;
  border-radius:10px;
  /* ボーダーにradiusで丸みをつける */
  transition: .5s;
  /* アニメーションの時間を0.5秒に指定 */
  opacity:1;
  /* 透明度を指定 */
  background:#f1f1f1;
}
.hamburger:hover {
  opacity:0.5;
  /* 透明度を指定 */
}
.hamburger + .sidenavs:target {
  overflow-x: visible;
  /* ボックスからはみ出る箇所をそのまま表示 */
  width: 40%;
  /* サイドメニューの幅 */
  display:block;
  transform:skew(0deg,0deg) translate(864px);
  /* 傾斜率と移動距離を指定 */
}
.sidenavs:target {
  overflow-x: hidden;
  /* ボックスからはみ出る箇所を隠す */
  width: 0;
  transition-duration: 1.2s;
  /* アニメーションの時間を0.5秒に指定 */
}
/* ハンバーガーメニュー表示時 */
.sidenavs {
  height: 100%;
  width: 0;
  position: fixed;
  /* 画像の配置を指定 */
  z-index: 1;
  top: 0;
  left: 0;
  background-image:url("https://source.unsplash.com/1000x801");
  /* サイドバーの背景画像を指定 */
  overflow-x: hidden;
  /* 横スクロールを無効にする */
  padding-top: 60px;
  transition: 1.2s;
  /* アニメーションの時間を0.5秒に指定 */
  transform:skew(-60deg,-60deg) translate(-600px);
  /* 傾斜率と移動距離を指定 */
}
/* ハンバーガーメニュー表示時のリンク */
.sidenavs a {
  text-decoration: none;
  font-size: 45px;
  /* 文字サイズを大きめに調整 */
  color: white;
  display: block;
  transition: 0.5s;
  /* アニメーションの時間を0.5秒に指定 */
  font-weight:bold;
}
/* マウスオーバー後のリンク */
.sidebar-btn a {
  transform:skewX(0deg);
  /* X軸の傾斜角度を指定 */
}
.sidebar-btn a:hover {
  color: black;
  transform:skewX(-20deg);
  /* X軸の傾斜角度を指定 */
}
.sidenavs p {
  margin:20px 80px;
  /* サイドバーのボタン位置を調整 */
  width:250px;
}
/* クローズボタン */
.sidenavs .close-btn {
  position: absolute;
  /* 親要素との絶対位置を指定 */
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
ここがポイント!
  1. 長さの異なるボーダーを縦に並べることで「ドネルメニュー(Doner Menu)」を実現
  2. ドネルメニューをクリックするとtransform:skewXY, translateが実行されサイドバーが傾斜&下から斜め上にスライドすることでサイドバーが吹っ飛んでくるような超リアルなアニメーションを実現
  3. ドネルメニューをhoverするとopacityが実行されて透明化する
  4. サイドバーのwidthを40%に調整
  5. transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
  6. サイドバーのボタンをhoverするとtransform:skewが実行されボタンが斜めに傾くアニメーションとなるように傾斜角度を調整(transformの使い方については【transform完全網羅】hoverで動き出す!transformを網羅できるCSSボタンアニメーション16選)

 

【独学なら】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年半ばまでは無料公開する予定ではありますが前倒しすることもあり得ますのでご興味ある方はお早めにどうぞ!