WEBサイト制作の勉強

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

jQueryでのcookieの指定

Cookie(クッキー)とは?

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


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



github.com

<script>
  $(function(){
 if($.cookie("access")){
 //既に訪問済みの場合
    
    } else {
 //未訪問の場合
     
    };
     $(window).load(function(){
		$.cookie("access",$('body').addClass('access'));
  });
  });
 </script>

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 674.4 347.4" style="enable-background:new 0 0 674.4 347.4;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#005CFF;stroke-width:10;stroke-miterlimit:10;}
	.st1{fill:none;stroke:#FBDA00;stroke-width:10;stroke-miterlimit:10;}
	.st2{fill:none;stroke:#00BC00;stroke-width:10;stroke-miterlimit:10;}
	.st3{fill:none;stroke:#000000;stroke-width:10;stroke-miterlimit:10;}
	.st4{fill:none;stroke:#FF0000;stroke-width:10;stroke-miterlimit:10;}
</style>
<circle id="XMLID_1_" class="st0" cx="108.7" cy="108.7" r="103.7"/>
<circle id="XMLID_5_" class="st1" cx="216.7" cy="238.7" r="103.7"/>
<circle id="XMLID_6_" class="st2" cx="468.7" cy="238.7" r="103.7"/>
<circle id="XMLID_3_" class="st3" cx="336.7" cy="108.7" r="103.7"/>
<circle id="XMLID_4_" class="st4" cx="565.7" cy="108.7" r="103.7"/>
</svg>

SVGを使ったアニメーション

carlphilippebrenner.com

tympanus.net

gardenstudio.com.br

jakearchibald.com

SVGとは?

SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。
ベクター画像は画像をビットマップ形式ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。
SVGではアニメーション機能などもサポートしており、Flashで行えるような簡単なインタラクティブコンテンツの作成が可能となっている。
SVGファイルはAdobe社のIllustratorに代表される画像編集アプリケーションで扱うことができるほか、HTMLとの連携を意識して、Webブラウザでも対応が進められている。
ちなみに、SVGXMLベースで策定された言語のため、テキスト形式のファイルで画像を表現するという珍しい形態を取っている。

SVGに対応しているブラウザー


blog.codecamp.jp




今回の授業ではSVGを単独で使用するだけでなく、HTMLファイルの中に記述し、css3アニメーションを併用します。
こうする事でブラウザー上で色々な表現方法が可能になります。
※ただしIEOperaは、全てのSVG要素でCSSアニメーションを受け入れないという問題があります。


変化させる方法は主に以下の3つがあります。

CSSプロパティ(transitionやanimation)を使う→簡単だけどIE未対応
setTimeout()を使う→IEも動くけど面倒
JavaScriptライブラリを使う→簡単&IEでも動くけどサイズが膨大
それぞれ、長所・短所があるので、状況に応じて使い分けると良いかと思います(ちなみにjQuerySVGの要素を扱えないので使えません)。


SVGのパスは、以下のようなプロパティを使って、スタイルを指定出来ます。

stroke:線の色
stroke-width:線の太さ
fill:塗りつぶしの色
stroke-dasharray:破線の間隔
stroke-dashoffset:破線の開始位置


今回は破線のプロパティである、stroke-dasharraystroke-dashoffsetを使い、線を引くアニメーションを作成します。





また、今回新たに出てきた「animation-fill-mode」プロパティもしっかり覚えましょう。
none(初期値)

キーフレームで指定されたスタイルは、アニメーションの前後には適用されません。

forwards

アニメーションの実行後にキーフレームの最後の指定が適用されます。

backwards

アニメーションの実行後、即座にキーフレームの最初のスタイル指定を適用します。

both

forwards と backwards の両方が適用されます。アニメーション実行前には backwards が、実行後には forwards があると考えると分かりやすいと思います。



<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>丸を別々に動かす</title>
<style>
#box {
  width:800px;
  margin:50px auto;
}
.st0{
  fill:none;
  stroke:#E72C28;
  stroke-width:10;
  stroke-miterlimit:10;
  stroke-dasharray:1000px;/*破線の間隔*/
  stroke-dashoffset:1000px;
  animation:circle-line0 1s linear forwards;
}
@keyframes circle-line0 {
  0%{stroke-dashoffset:1000px;}
  100%{stroke-dashoffset:0;}
}
.st1{
  fill:none;
  stroke:#3669B3;
  stroke-width:10;
  stroke-miterlimit:10;
  stroke-dasharray:1000px;/*破線の間隔*/
  stroke-dashoffset:1000px;
  animation:circle-line1 1s 0.7s  linear forwards;
}
@keyframes circle-line1 {
  0%{stroke-dashoffset:1000px;}
  100%{stroke-dashoffset:0;}
}
.st2{
  fill:none;
  stroke:#7DBE31;
  stroke-width:10;
  stroke-miterlimit:10;
  stroke-dasharray:1000px;/*破線の間隔*/
  stroke-dashoffset:1000px;
  animation:circle-line2 1s 1.4s linear forwards;
}
@keyframes circle-line2 {
  0%{stroke-dashoffset:1000px;}
  100%{stroke-dashoffset:0;}
}
</style>
</head>

<body>
<div id="box">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 459.8 200" style="enable-background:new 0 0 459.8 200;" xml:space="preserve">

<circle id="XMLID_1_" class="st0" cx="100" cy="100" r="95"/>
<circle id="XMLID_3_" class="st1" cx="228" cy="100" r="95"/>
<circle id="XMLID_4_" class="st2" cx="359.8" cy="100" r="95"/>
</svg>
</div>
</body>
</html>

nth-child()とnth-of-type()を使い分ける

これまでの授業でもCSS3の疑似クラス「:nth-child(odd)」「:nth-child(even)」や「:nth-child(3)」は使って来ましたが、()の内に数式を入れる事で非常に便利になります。

「:nth-child(2n+1)」= 「:nth-child(odd)」(奇数のみ指定)

計算式
 n=0: 2*0+1= 1 = nth-child(1)
 n=1: 2*1+1= 3 = nth-child(3)
 n=2: 2*2+1= 5 = nth-child(5)


「:nth-child(2n)」= 「:nth-child(even)」(偶数のみ指定)

「:nth-child(3n)」= (3の倍数のみ)

「:nth-child(3n+2)」= (2番目から3つずつ)

「:nth-child(n+3)」= (3番目から全部)

「:nth-child(-n+3)」= (3番目まで全部)

nth-child()とnth-of-type()の違い

「nth-child」と「nth-of-type」の違いと使いわけをしっかりと理解しましょう。

E:nth-child(n)

親要素のn番目の子要素であるE要素ということになります。「nth-child」の使い方は授業でも度々やっているので、問題ないと思います。

E:nth-of-type(n)

問題は「nth-of-type」の方です。親要素内で同じE要素内でn番目のものということになります。
言葉にすると判り難い部分もあるので、実際にコーディングしてみましょう。

アコーディオンパネルの作成

f:id:yachin29:20190603123125p:plain


今回は、パネル部分が展開されると他のパネル部分は閉じるようにしたいので、
「開いているパネル部分以外のパネル部分は閉じる」という命令が必要です。

$('ul').not($(this).next('ul'))

という記述で、複数あるulの中で、「クリックされたthisのnextのul以外のul」という指定が出来るようになります。


<div class="container">
<h1>アコーディオンパネル</h1>

<h2 class="panel">パネル1<span class="plus-icon"></span></h2>
<ul class="list show">
<li>パネル1-1</li>
<li>パネル1-2</li>
<li>パネル1-3</li>
</ul>

<h2 class="panel">パネル2<span class="plus-icon"></span></h2>
<ul class="list">
<li>パネル1-1</li>
<li>パネル1-2</li>
<li>パネル1-3</li>
</ul>

<h2 class="panel">パネル3<span class="plus-icon"></span></h2>
<ul class="list">
<li>パネル1-1</li>
<li>パネル1-2</li>
<li>パネル1-3</li>
</ul>
</div>

第3回試験データ

  1. レスポンシブ化(ブレイクポイント:640px)
  2. SP時にメニューをハンバーガーメニュー(ドロワーメニュー)にする
  3. スムーススクロールでアニメーションしながらトップに戻る
  4. h1にgoogle fontsを適用させる
  5. GoogoleMap(南池袋公園)をサイト内に表示させる(レスポンシブ化)
  6. 適切な余白を入れること
  7. ニュースの数をPC時は6個全部、SP時は最新3つだけ表示させる
  8. .boxをhoverしたときにcssでスタイルに変化をつける


作例
f:id:yachin29:20190904135048p:plain

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Cafe de Felica</title>
<link href="https://fonts.googleapis.com/css?family=Niconne&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">

</head>

<body>
<header>
<div class="inner">
<h1>Cafe de Felica</h1>
<nav class="gnav">
<ul>
<li class="flex-item"><a href="#">Home</a></li>
<li class="flex-item"><a href="#">Concept</a></li>
<li class="flex-item"><a href="#">Menu</a></li>
<li class="flex-item"><a href="#">Access</a></li>
<li class="flex-item"><a href="#">Reservation</a></li>

</ul>
</nav>
</div>
</header>
<div id="content">
<div id="content-top">
<div id="main">
<img src="img/main.jpg" alt="">
</div>
<h2 class="main-head"><span>Cafe de Felica</span>は、<br class="sp-on">食とアートと音楽が交差する空間を創造します。</h2>
<p class="main-txt">シェフ・矢島が提供するのは、スペイン料理に「東京」の<br class="sp-on">エッセンスを取り入れたモダンスパニッシュ。<br>
店内は、新進気鋭のアーティストとコラボレーションしたアートギャラリー。<br>
心地よいチルアウトミュージックが流れる空間でくつろぎのひとときをお過ごしください。</p>
</div>
<div class="wrapper">
<div class="box">
<a href="#">
<h3>Concept</h3>
<p class="box-photo">
<img src="img/box1.jpg" alt="">
</p>
<p class="box-txt">テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</a>
</div>

<div class="box">
<a href="#">
<h3>Menu</h3>
<p class="box-photo">
<img src="img/box2.jpg" alt="">
</p>
<p class="box-txt">テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</a>
</div>

<div class="box">
<a href="#">
<h3>Access</h3>
<p class="box-photo">
<img src="img/box3.jpg" alt="">
</p>
<p class="box-txt">テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</a>
</div>

<div class="box">
<a href="#">
<h3>Reservation</h3>
<p class="box-photo">
<img src="img/box2.jpg" alt="">
</p>
<p class="box-txt">テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</a>
</div>

</div>

<div class="wrapper">
<div class="info">
<h3>News</h3>
<dl>
<dt>2019/09/04</dt><dd>ニュース1</dd>
<dt>2019/08/28</dt><dd>ニュース2</dd>
<dt>2019/08/26</dt><dd>ニュース3</dd>
<dt>2019/08/20</dt><dd>ニュース4</dd>
<dt>2019/08/18</dt><dd>ニュース5</dd>
<dt>2019/08/16</dt><dd>ニュース6</dd>
</dl>
</div>

<div class="map">
<h3>Map</h3>
<iframe id="g-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.9298234492335!2d139.71220465109164!3d35.72794438008621!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1567528019927!5m2!1sja!2sjp" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</div>

</div>
</div>

<footer>
<p><small>&copy; 2018 Cafe de Felica</small></p>
</footer>
</body>
</html>

cssプラグインを使ってハンバーガーメニューを作る

f:id:yachin29:20170417125330p:plain

前回の授業では擬似要素(before・after)を使ってハンバーガーメニューの3本線を作りましたが、スニペットを使う事で簡単に作る事が出来ます。



jonsuh.com



アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。


<p class="hamburger " id="btn">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</p>