エンジニアの備忘録

学んだ事をアウトプットしていきます

【CSS : jQuery】メモシート

疑似要素beforeのcolor変更方法

【HTML】
<lispan>class="back_hover1">
<a href="#">educure
<i class="fas fa-arrow-right before_colorChange1"></i></a></li>

 

CSS
.fa-arrow-right:before {
      content: "\f061";
      margin-left: 0.5rem;

      color: #2dbba1; //エメラルドグリーン

  }
  .fa-arrow-right2:before {
    content: "\f061";
    margin-left: 0.5rem;
    transition: 0.2s;
    color: #ffffff; //白色
}

 

// hover →アイコンcolor変更(疑似要素なので、新しいクラスで上書き)
  $(function(){
    $(".back_hover1").hover(function() {
        $('.before_colorChange1').toggleClass('fa-arrow-right2');
});  

.back_hover1 ← カーソルが重なると

.before_colorChange1 ←このクラスの疑似要素(エメラルドグリーン)を

fa-arrow-right2 ← この疑似要素(白色)に上書き

 

ハンバーガーメニューのCSS

 
.humburger-menu {
  /*スクロールするようにする*/
  overflow: scroll;
  /*ハンバーガーをその場に固定*/
  position: fixed;
  /*上端との距離*/
  top: 0;
  /*高さ画面いっぱい*/
  height: 100%;
  /*滑らかスクロール*/
  -webkit-overflow-scrolling: touch;
}

 ハンバーガーメニューを開け閉じするJavaScript

 
function slideIn(){
  // 見やすくするためにするために変数を作成
  var menu = $('.humburger-menu'), // 開け閉じする要素
    menuBtn = $('.hamburger_button'), // メニューボタン
    body = $(document.body),
    menuWidth = menu.outerWidth();

  // メニューボタンをクリックした時の動き
  menuBtn.on('click', function(){
    // body に open クラスをつけたりはずしたりする( open クラスは空)
    body.toggleClass('open');
    if(body.hasClass('open')){
      // open クラスが body についていたらメニューをスライドインする
      body.animate({'right' : menuWidth }, 200);
      menu.animate({'right' : 0 }, 200);
    } else {
      // open クラスが body についていなかったらスライドアウトする
      menu.animate({'right' : -menuWidth }, 200);
      body.animate({'right' : 0 }, 200);
    }
  });
};

 

スクロールバー表示・非表示

$(function(){
  var state = false;
  var pos;
  $("#nav_bar").click(function(){
    if (state == false) {
      pos = $(window).scrollTop();
      $("body").addClass("fixed").css({"top": -pos});
        state = true;
      } else {
      $("body").removeClass("fixed").css({"top": 0});
        window.scrollTo(0, pos);
        state = false;
  }
});
});
//css
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}

画像調整(アスペクト比

// CSS
background-size: cover;
  background-position: center center;
  padding-top: 56.25%;
  width: 100%;
// HTML
style="background-image: url(画像URL)"

16:9  → 9÷16=0.5625 =padding-top:56.25%

アスペクト比 パーセント変換後
4:3 75%
16:9 56.25%
3:2 66.66%
8:5(黄金比 62.5%