WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

スクロール位置に応じてナビゲーションボタンにカレント表示をする

JavaScript

ある程度スクロールする必要がある縦長ページでは現在地を示すようにナジゲーションボタンにカレント表示をした方が良いでしょう。
各要素の「.offset().top」の位置を取得し、if文を使い、各要素の開始位置以上スクロールしたら、その要素にaddClassします。


参考サイト
www.e-creators.net


www.nagahama-kannon-house.jp


「offset().top」と「scrollTop()」を理解する

offset().topとは特定のHTML要素が配置されている座標を取得するのに使われるメソッドで、scrollTop()はスクロールした量を取得するメソッド

scrollTop

「scrollTop()」を使用した場合、要素の最上部から縦スクロールした現在位置までのピクセル数を取得します。
{ scrollTop: 0 }であればtopから0ピクセルの位置で停止、{ scrollTop:100}であればtopから100pxの位置で停止します。

$(window).scroll(function() {
console.log($(this).scrollTop());
})
offsetメソッド

document内に配置した要素の位置を座標で取得できるメソッドになります。「top（Y座標）」と「left（X座標）」が取得出来ます

var Pos=$('#box').offset().top;
console.log(Pos);





HTML部分

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フェリカ・テクニカル・アカデミーの生徒募集ページ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>ロゴ</h1>
<nav id="g-nav">
<ul>
<li id="list01" class="current"><a class="scroll" href="#">トップ</a></li>
<li id="list02"><a class="scroll" href="#recommend">おすすめな理由</a></li>
<li id="list03"><a class="scroll" href="#student">生徒の作品</a></li>
<li id="list04"><a class="scroll" href="#access">アクセス</a></li>
<li id="list05"><a class="scroll" href="#apply">お申し込みはこちら</a></li>
</ul>
</nav>
</header>
<div class="content" id="top">
<h2>メインビジュアル</h2>
</div>

<div class="content" id="recommend">
<h2>おすすめな３つ理由</h2>
</div>

<div class="content" id="student">
<h2>生徒の作品</h2>
</div>

<div class="content" id="access">
<h2>アクセス</h2>
</div>

<div class="content" id="apply">
<h2>お申込み</h2>
</div>
<footer></footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>


jQuery部分

$(window).on('load resize',function(){

let pos01 = 0;
let pos02 = Math.round($('#recommend').offset().top);
let pos03 = Math.round($('#student').offset().top);
let pos04 = Math.round($('#access').offset().top);
let pos05 = Math.round($('#apply').offset().top);

$(window).on('load resize scroll',function(){
let posScroll = $(window).scrollTop();//自身のスクロール量

if(pos01 < posScroll && pos02 > posScroll){
$('#list01').addClass('current').siblings('li').removeClass('current');
}else if(pos02 < posScroll && pos03 > posScroll){
$('#list02').addClass('current').siblings('li').removeClass('current');
}else if(pos03 < posScroll && pos04 > posScroll){
$('#list03').addClass('current').siblings('li').removeClass('current');
}else if(pos04 < posScroll && pos05 > posScroll){
$('#list04').addClass('current').siblings('li').removeClass('current');
}else if(pos05 < posScroll){
$('#list05').addClass('current').siblings('li').removeClass('current');
}


});

//スムーススクロール
$('a.scroll[href^="#"]').on('click',function(){
var a= $(this).attr('href');

//正規表現を加える
var target = $(a == "#" || a == "" ? 'html' : a);

// 移動先を数値で取得
var position = $(target).offset().top;
$('body,html').animate({scrollTop:position});
});


});

liginc.co.jp

LP（ランディングページ）の作成

Webサイト制作

ランディングページ（Landing Page）とは本来、訪問者が最初に着地する（land）ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを指します。
LPでもっとも大事なのはいかに訪問者に目標となるアクションを行わせるか、です。


コンバージョン

コンバージョンとは、変換を意味する言葉です。Web マーケティングの分野に置いては、「顧客見込み」から「顧客」への変換を意味し、成約を意味する言葉で最終的な成果として使われます。主に購入・資料請求・お問い合わせ・会員登録などを コンバージョンにする場合が多いです。 コンバージョンを設定することで、Webにおける施策の効果測定が出来るようになります。
コンバージョンが起きた割合のことを コンバージョン率（ CVR）といいます。コンバージョン率は、 コンバージョン数÷ 訪問数で算出することが出来ます。



ゴールの設定

ターゲットとなるユーザーにとってほしい行動を明確にします。商品購入をしてほしいのか、会員登録をしてほしいのか、お問い合わせをしてほしいのかなどです。場合によってはペルソナと呼ばれる、具体的なユーザーの人物像を想定し、その人物に向けて訴求力の高いLPを作る必要があります。


ストーリー性

「顧客見込み」から「顧客」へ変える為にはユーザーにストーリー性を持ったページを作り、ページ内でしっかりと説明をすることが大事です。


AIDAの法則

Attention：注意
まず、ユーザーの注意を引きます。問題解決をしたいユーザーに、なにそれ！と思わせることが重要です。


Interest：興味
興味を持ってくれそうな内容を書きます。詳細な説明を書いていきます。4つのポイント・3つの理由など、数を提示する事もあります。


Desire：欲求
ユーザーにとってのメリットや競合との差別化要因を伝えます。問題の解決ができる理由を示すことも有効です。


Action：行動
ユーザーが迷いなく申し込みや購買などのアクションをとれるよう、最後のひと押しをします。なぜ「今」「ここ」で買うのがいいのかを強調します。

CTA

CTAとは、Call To Action(コール トゥ アクション)の略で、「行動喚起」と訳される。 Webサイトの訪問者を具体的な行動に誘導すること。



f:id:yachin29:20180711031625p:plain



coliss.com



rdlp.jp


lp-web.com

lp-kanji.com


kataokadesignmarketing.net


twitter.com

6月15日作業分データ

Webサイト制作

パーティクルとマウスとか色々

ファイル構成
f:id:yachin29:20210615143921p:plain


index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>svgとparticle</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="particles-js"></div>

<main>
<h1>サイトコンテンツ</h1>
<p class="cursor-on"><a href="menu/">メニューページへ</a></p>
<p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore impedit quasi error, deserunt porro harum, beatae vitae sapiente voluptatum itaque consectetur perferendis earum molestiae exercitationem laudantium ex quaerat eveniet eligendi nemo explicabo alias debitis quis? Inventore facilis repudiandae velit cumque sint quo exercitationem aut nulla corporis culpa. Placeat, odio labore iste ex cupiditate est ullam eius sequi, necessitatibus debitis ea excepturi in ipsum sapiente, reprehenderit quam iusto incidunt? Eaque sunt iusto a aut reprehenderit reiciendis corporis temporibus, facere vel fugiat.</p>
</main>

<div class="cursor"></div>
<div class="follower"></div>




<div id="curtain">
<div class="svg-logo" id="svg-box">

</div><!-- /.svg-logo -->
</div><!-- /#curtain -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/particles.min.js"></script>
<script src="js/script.js"></script>
<script src="js/my-particle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js"></script>
<script src="js/cursor.js"></script>

<script>
$.ajax({
url: 'img/logo.svg',//ここにsvgファイルのパスを入れる
})
.then(
// 1つめは通信成功時の処理
function(data){
	var svg = $(data).find('svg');
  $('#svg-box').append(svg);
},
// 2つめは通信失敗時の処理
function(){
	alert('読み込み失敗');
});
</script>


</body>
</html>


style.css

@charset "utf-8";

html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}



#curtain{
width: 100%;
height: 100vh;
background-color: #d4d6d6;
position: fixed;
top: 0;
}
.svg-logo{
width: 400px;
position: absolute;
left: -300px;
right: 0;
top: 100px;
margin: auto;
}
#XMLID_2_>path{
fill:#d4d6d6;/* 塗りの色 */
stroke: #000;/* 線の色 */
stroke-width: 1px;/* 線幅 */
stroke-dasharray: 200px;
stroke-dashoffset: 200px;
animation: svg 2s 0.5s linear forwards;
}
@keyframes svg{
0%{stroke-dashoffset: 200px;}
80%{stroke-dashoffset: 0;fill:#d4d6d6;}
100%{stroke-dashoffset: 0;fill:#000;}
}

/* パーティクル部分 */
canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ 
#particles-js{
position:fixed;
top: 0;
z-index: -10;
width: 100%;
height: 100vh;
background-color: #d2d2d2; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }

body{
padding-top: 100px;
cursor: none;
}
a{
cursor: none;
}
main{
width: 60%;
height: 300vh;
margin: 0 auto;
padding: 80px 40px;
background-color: rgba(255, 255, 255, 0.609);
}
h1{
text-align: center;
font-size: 50px;
padding: 30px 0 20px;
}
main>p{
line-height: 2;
}


/* カーソルの指定 */
.cursor,.follower{
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.cursor{
width: 8px;
height: 8px;
background-color: black;
z-index: 101;
}
.follower{
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: url(../img/cursor.svg) no-repeat center center/contain;
z-index: 100;
transition: 0.1s;
text-align: center;
}
.follower.is-active{
width: 60px;
height: 60px;
background:rgba(248, 233, 93, 0.534) url(none) no-repeat center center/contain;
}

.cursor-on{
width: 200px;
height: 50px;
text-align: center;
}
.cursor-on>a{
line-height: 50px;
color: #333;
font-size: 20px;
}
.cursor-on>a:hover{
text-decoration: underline;
}


script.js

@charset "utf-8";

html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}



#curtain{
width: 100%;
height: 100vh;
background-color: #d4d6d6;
position: fixed;
top: 0;
}
.svg-logo{
width: 400px;
position: absolute;
left: -300px;
right: 0;
top: 100px;
margin: auto;
}
#XMLID_2_>path{
fill:#d4d6d6;/* 塗りの色 */
stroke: #000;/* 線の色 */
stroke-width: 1px;/* 線幅 */
stroke-dasharray: 200px;
stroke-dashoffset: 200px;
animation: svg 2s 0.5s linear forwards;
}
@keyframes svg{
0%{stroke-dashoffset: 200px;}
80%{stroke-dashoffset: 0;fill:#d4d6d6;}
100%{stroke-dashoffset: 0;fill:#000;}
}

/* パーティクル部分 */
canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ 
#particles-js{
position:fixed;
top: 0;
z-index: -10;
width: 100%;
height: 100vh;
background-color: #d2d2d2; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }

body{
padding-top: 100px;
cursor: none;
}
a{
cursor: none;
}
main{
width: 60%;
height: 300vh;
margin: 0 auto;
padding: 80px 40px;
background-color: rgba(255, 255, 255, 0.609);
}
h1{
text-align: center;
font-size: 50px;
padding: 30px 0 20px;
}
main>p{
line-height: 2;
}


/* カーソルの指定 */
.cursor,.follower{
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.cursor{
width: 8px;
height: 8px;
background-color: black;
z-index: 101;
}
.follower{
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: url(../img/cursor.svg) no-repeat center center/contain;
z-index: 100;
transition: 0.1s;
text-align: center;
}
.follower.is-active{
width: 60px;
height: 60px;
background:rgba(248, 233, 93, 0.534) url(none) no-repeat center center/contain;
}

.cursor-on{
width: 200px;
height: 50px;
text-align: center;
}
.cursor-on>a{
line-height: 50px;
color: #333;
font-size: 20px;
}
.cursor-on>a:hover{
text-decoration: underline;
}


cursor.js

var
cursor = $('.cursor'),
follower = $('.follower'),
cWidth = 6, //カーソルの大きさ
fWidth = 30, //フォロワーの大きさ
delay = 5, //数字を大きくするとフォロワーがより遅れて来る
mouseX = 0, //マウスのX座標
mouseY = 0, //マウスのY座標
posX = 0, //フォロワーのX座標
posY = 0; //フォロワーのX座標

//カーソルの遅延アニメーション
//ほんの少ーーーしだけ遅延させる 0.001秒
TweenMax.to({}, .001, {
  repeat: -1,
  onRepeat: function() {
    posX += (mouseX - posX) / delay;
    posY += (mouseY - posY) / delay;

    TweenMax.set(follower, {
        css: {    
          left: posX - (fWidth / 2),
          top: posY - (fWidth / 2)
        }
    });
    
    TweenMax.set(cursor, {
        css: {    
          left: mouseX - (cWidth / 2),
          top: mouseY - (cWidth / 2)
        }
    });
  }
});

//マウス座標を取得
$(document).on('mousemove', function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
});

//ボタンにホバーした時
$('.cursor-on').on({
  "mouseenter": function() {
    cursor.addClass('is-active');
    follower.addClass('is-active');
  },
  "mouseleave": function() {
    cursor.removeClass('is-active');
    follower.removeClass('is-active');
  }
});


my-particle.js

particlesJS("particles-js", {"particles":{"number":{"value":6,"density":{"enable":true,"value_area":800}},"color":{"value":"#cf55c8"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000"},"polygon":{"nb_sides":6},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.3,"random":true,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":160,"random":true,"anim":{"enable":true,"speed":10,"size_min":40,"sync":false}},"line_linked":{"enable":false,"distance":200,"color":"#ffffff","opacity":1,"width":2},"move":{"enable":true,"speed":8,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":false,"mode":"grab"},"onclick":{"enable":false,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;

jQueryでのcookieの指定

Webサイト制作

Cookie（クッキー）とは？

Cookie（クッキー）とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組み、またはそのデータです。ID、パスワード、メールアドレス、訪問回数などが ユーザー情報として保存されます。これによって再訪問したときに ユーザーを特定し、情報を入力する手間が省けます。ショッピングサイトに訪問したとき、すでにログイン状態になっている、以前カートに入れた商品がそのまま残っているのは、Cookie機能がはたらいているからです。


似たような機能でSessionという機能がありますが、Cookieはクライアント側にデータを保存するのに対して、Sessionはサーバー側に保存されてるため機密性の高いデータを扱う場合はSessionを使った方が良いでしょう。



github.com



$(function(){
//jquery.cookie.jsの設定
if($.cookie('access')){
//既にアクセス済みの場合はカーテンを非表示
$('.svg-wrapper').css({'display':'none'});
}else{
//初アクセスの場合はカーテンをfadeOutさせる
$('.svg-wrapper').delay(5000).fadeOut(400);
}
//ファイルがロードされたら
$(window).on('load',function(){
$.cookie('access',$('body').addClass('access'));
});
});

ajaxでsvgコードを外部ファイル化

<body>
<div id="box">
<!--ここ外部svgデータが挿入-->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$.ajax({
url: 'logo.svg',//ここにsvgファイルのパスを入れる
})
.then(
// 1つめは通信成功時の処理
function(data){
	var svg = $(data).find('svg');
  $('#box').append(svg);
},
// 2つめは通信失敗時の処理
function(){
	alert('読み込み失敗');
});
</script>
</body>

background-clipを使ってcssを使って文字で画像を切り抜く

HTML5+CSS3

以前、Photoshopでクリッピングマスクを使い、文字で画像を切り抜く加工を行いましたが、css3の「background-clip」と「text-fill-color」を使う事で同じような表現が出来るようになります。

background-clip

background-clipプロパティは、背景の適用範囲を指定する際に使用します。テキスト部分に背景画像を適応させたい場合、

background-clip: text;

と指定します。
※注意　2017月12月現在、-webkit-のベンダープレフィックスが記述が必要です。



さらに「text-fill-color」を transparentに指定する事で文字色を透過にする事が出来ます。transparentの代わりに「color: rgba(0,0,0,0);」でもOKです。

text-fill-color: transparent;





https://codepen.io/Jintos/full/crlxk/codepen.io


creativity-class.xyz




https://codepen.io/Jintos/full/crlxk/codepen.io

スマートフォンの時だけ電話番号のリンクを有効にする

Webサイト制作

スマートフォンやタブレットでウェブサイトを見ている時にボタンをタップすると通話発信ができるようにするためには電話番号用のtelリンクを設定する必要がありますが、一部のスマートフォンではtelリンクを設定していない、電話番号で無いただの文字列もリンク扱いになってしまいます。

PCで確認
http://felica29.starfree.jp/tel/


スマホで確認
f:id:yachin29:20200622155615p:plain




なので、まずmetaタグで

<meta name="format-detection" content="telephone=no">

と記述し、


実際の電話番号へのリンク部分に

<a href=”tel:0312345678”>お電話はこちら</a>

というリンク設定をします。



ただこのリンクはスマートフォンの時のみに有効にしたいため、PC時などは無効にする必要があります。以前はjQueryを使って行なっていましたが、最近はcssの「pointer-events」を使って、cssのみで行う事が出来ます。

pointer-events

pointer-eventsはマウスイベント（hover , click など）の発生を制御します。
HTMLの要素に適用できる設定値は、auto , none のみです。それ以外はsvgの要素に適用できます。


今回はこの「pointer-events」を使ってPCの時はnoneに、spの時はautoに設定します。

/*pcの時*/
a[href^="tel:"] {
    pointer-events:none;
}
@media screen and (max-width:767px){}
/*spの時*/
a[href^="tel:"] {
    pointer-events:auto;
}
}

「href^=""」ビット排他的論理和演算子

これで、指定した"値"が属性の値と前方一致する要素を選択する、というものらしいです。
つまり、$([href^="#"])とすることで、href属性が "#" で始まる要素を取得することができます。
元々はjQueryで使っていた演算子ですが、最近はcssでも使用する事が出来ます。