.target:before,.target:after {
content: " ";
display: block;
height: 1px;
width: 130px;
margin: 0px auto 0px auto;
background-color: #C4D4D8;
}
.target:before,.target:after {
content: " ";
display: inline-block;
width: 23px;
height: 23px;
background-image: url(../img/dummy.gif);
background-size: contain;
background-repeat: no-repeat;
}
.btn:after {
content: " ";
width: 4px;
height: 4px;
position: absolute;
right: 15px;
top: 50%;
border-top: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
transform: rotate(45deg) translateY(-50%);
transition: 0.2s;
}
.attention p {
padding-left: 1em; /* ブロック全体を 1em 右に */
text-indent: -1em; /* 先頭の1文字のみ 1em 左に */
}
//transitionは、なにかトリガー(addclassやhoverする)がなければ動かない。
.item {
opacity: 0;
transition: background-color 0.3s, opacity 0.3s;
}
.item.active {
opacity: 1;
}
//animationは、単体で動くし、下記のようにaddclassでも動く。
.item {
opacity: 0;
}
.item.active {
animation: css_fade_in 1s ease forwards;
//forwards 終了時、最後のキーフレームのスタイルを保持
//infinite ループ
//ease インとアウトをなめらかに(初期値)
//linear:一定
//ease-in:ゆっくりイン
//ease-out:ゆっくりアウト
//ease-in-out:ゆっくりインしてゆっくりアウト
animation-delay: 0.5s;
}
@keyframes css_fade_in {
0% {
}
100% {
opacity: 1;
}
}
<script>
$(document).ready(function(){
$(window).on('load', function(){
$(window).on('load resize',function(){
ここに実行したいコード
});
</script>
<script>
$(document).ready(function(){
var w = document.documentElement.clientWidth;
var x = 1200;
var box_Height = (w - x) / 2 - 25;
var box_Height = $(".item").outerHeight() - $('.item').outerHeight() + "px";
var box_Height = $(".item").outerHeight() + "px";
var box_Height = $(".item").outerHeight() + 15;
$(".item").css("height", box_Height + "px");
$(".item").css({"cursor" : "pointer", "text-align" : "right"});
$(".item_01 , .item_02 , .item_03").css("cursor", "pointer");
$(".item").css("height", boxHeight + "px");
$(".item").css({";cssText": "display: none !important"});
$(".item").click(function(){
$(".item").toggleClass("active");
$(".item").addClass("active");
$(".item").removeClass("active");
});
});
</script>
<script>
$(window).on('load resize',function(){
var w = window.innerWidth;
var x = 768;
if (w >= x){ //768px以上
$(".item").css("background-color", "#EEEEEE");
}
else { //768pxより下
$(".item").css("background-color", "#E74C3C");
}
});
</script>
<script>
$(window).on('load resize',function(){
if( window.innerWidth >= 768 ){ //768px以上
$(".item").css("background-color", "#EEEEEE");
}
if( window.innerWidth < 768 ){ //768pxより下
$(".item").css("background-color", "#E74C3C");
}
});
</script>
//aタグが#だけの時リンク無効化
<script>
$("nav a[href=#]:not(.toggle_btn)").addClass("disable_link");
if($("a").hasClass("disable_link")){
$(".disable_link").parent().addClass("no_link");
}
$("nav a.disable_link").click(function(){
return false;
});
</script>
<script>
$(window).on('load resize',function(){
var timer = false;
var w = window.innerWidth;
var x = 768;
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
if (w >= x){ //768px以上
$(".item").css("background-color", "#EEEEEE");
}
else { //768pxより下
$(".item").css("background-color", "#E74C3C");
}
}, 200);
});
</script>
<script>
$(window).on('load resize', function(){
setInterval(function(){
var w = window.innerWidth;
var x = 768;
if (w >= x){ //768px以上
$(".item").css("background-color", "#EEEEEE");
}
if (w < x){ //768pxより下
$(".item").css("background-color", "#E74C3C");
}
}, 200);
});
</script>
イラレで傾いた画像を書き出すとき、ジャギーが出る。(特にアセットの書き出しの場合)
その際は、「ファイル」→「書き出し」→「書き出し形式 OR Web用に保存」で解決する。
IE11のみでpngが表示されない場合→png画像が、編集可能なpngになっている可能性があり。
書き出しpngにすると表示される。