7月7日　授業内容（CSSで計算式を可能にするcalc()ファンクション、無限スクロールの制作）

CSSで計算式を可能にするcalc()ファンクション

yachin29.hatenablog.com

f:id:paris1204:20160707163719p:plain

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
中の箱の可変しても感覚は変わらない
f:id:paris1204:20160707163743p:plain

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSSで計算式を可能にするcalc()ファンクション</title>
<style>
html,body,ul,li{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
margin:0;
padding:0;
line-height:1.0;}

ul,li{list-style:none;}

a{text-decoration:none;}

#container{width:70%;
margin:50px auto;
background:orange;
padding:10px;
overflow:hideen;
height:320px;}

div.box{width: calc(100% / 3 - 20px);/*演算子・の両サイドのスペースは必要*/
background:olive;
margin:10px;
float:left;
height:300px;}



</style>
</head>

<body>
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>

無限スクロールの制作
yachin29.hatenablog.com

今回作るフォルダ内構成
f:id:paris1204:20160707172045p:plain

①以下のサイトよりzipファイルをダウンロードし、以下のjsのみ取り出します。
f:id:paris1204:20160707171406p:plain

②js本体をjsフォルダに入れる。

それぞれのフォルダの構成要素を以下の様に揃える
f:id:paris1204:20160707173820p:plain

※外側の高さは100%にするとズレるきっかけがなくなるので無限スクロールが効かなくなる

※現段階だと以下のjs本体以上でないと効かない
f:id:paris1204:20160707175814p:plain

それぞれ別々のフォルダに入れているため、タグの表示が場所によって変わる。

ページURL:
http://yellow1204.webcrow.jp/Infinity_scroll_SEO/folder01/

f:id:paris1204:20160707175918p:plain

f:id:paris1204:20160707175931p:plain

f:id:paris1204:20160707175943p:plain

f:id:paris1204:20160707180001p:plain

f:id:paris1204:20160707180017p:plain

※folder01内のindex.html(他のフォルダーのファイルの構成も共通)

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アルケミスト</title>
<link rel="stylesheet" href="../css/style.css">


</head>

<body>
<div id="container">
<div class="box">
<h1>アルケミスト</h1>
<div class="sidebar">
<p><img src="../img/archemist.png" alt="アルケミスト"></p>
</div>

<div class="right">
<h2>解説</h2>
<p>スペインの羊飼いの少年サンチャゴは、偶然出会った王様メルキゼデックに導かれ、ピラミッドにあるという宝物を探しに行くことを決意する。
羊を売り十分なお金を持っていたサンチャゴであったが、海を渡った直後、盗賊の少年にお金を騙し取られてしまう。そのため、サンチャゴは1年近くクリスタルショップで働くことになる。
月日が経過し、十分なお金を貯めたサンチャゴは再びスペインに帰って羊飼いに帰るつもりであったが、王様からもらった二つの石「ウリム」と「トムミム」を見て考え直し、再びピラミッドに向かうことを決意する。
キャラバンとともに長い砂漠を越えようとする途中、錬金術師を目指すイギリス人と知り合いになる。彼はオアシスにいる錬金術師に会うためにはるばるやってきたという。
オアシスに着いた一向は、部族間の戦争のため、オアシスでの滞在を余儀なくされる。そこでサンチャゴは、「前兆」を見てその意味を読み取り、オアシスの危機を救う。このことでオアシスの錬金術師から認められたサンチャゴは、錬金術師とともにピラミッドへ向かう。</p>
</div>

<a href="http://yellow1204.webcrow.jp/Infinity_scroll_SEO/folder02/" id="next">NEXT</a>
</div>
</div>

<script src="../js/jquery-2.2.4.min.js"></script>
<script src="../js/jquery.clever-infinite-scroll.js"></script>
<script>
$('#container').cleverInfiniteScroll({
contentsWrapperSelector: '#container',
contentSelector:'.box',
nextSelector:'#next',
});


</script>
</body>
</html>

@charset "UTF-8";
/* CSS Document *//*reset*/
html,body{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
margin:0;
padding:0;
line-height:1.0;}

ul,li{list-style:none;}

a{text-decoration:none;}

img,input{vertical-align:bottom;}/*画像の下の隙間をなくす*/
#container{overflow:hidden;
height:110vh;}


.box{width:960px;
margin:50px auto;
position:relative;
overflow:hidden;
height:80vh;}

.box h1{text-align:center;
color:#333333;}

.sidebar{width:330px;
margin-left:120px;
float:left;}

.right{width:450px;
float:right;}

.right h2{text-align:center;
font-size:20px;
color:#333333;}

.right p{line-height:20px;}

#next{position:absolute;
bottom:0;
left:150px;}