疑似要素beforeのcolor変更方法
【HTML】
<lispan>class="back_hover1">
<a href="#">educure
【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();
state = true;
} else {
window.scrollTo(0, pos);
state = false;
}
});
});
画像調整(アスペクト比)
// 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% |