Flexで作るサンタクロース

サンタクロースエリアを作成します。以下のサンプルを参考にレイアウトしていきます。サンタクロースエリアの下に、バナーを2つ並べます。事前に、作成しておきましょう。バナーサイズは、横幅600pxで作成しておきます。

サンタクロースのエリアは、クリスマスらしく「ブラック(カラーコード#000)」を配置します。

/*CSSの記述
サンタクロースエリア*/

#santa{
padding:10px 0;
background-color:#000;
color:#fff;
margin-bottom:50px;
}
/*サンタエリアの画像*/
#santa img{
border-radius:30px;
margin-bottom:2em;
}

/*CSSの記述

サンタクロースエリア*/

#santa{

padding:10px 0;

background-color:#000;

color:#fff;

margin-bottom:50px;

}

/*サンタエリアの画像*/

#santa img{

border-radius:30px;

margin-bottom:2em;

}

これで、黒のエリアを確保することができました。

サンタクロースは、プレゼントを持ってきてくれますので、今回は魅力ある動画を配置してみましょう。■ 無料素材提供先pixabay.com

video属性

HTMLに、動画を配置する

<video src="images/videos.mp4" poster="video.jpg" playsinline muted autoplay loop></video>

1	<video src="images/videos.mp4" poster="video.jpg" playsinline muted autoplay loop></video>

【poster属性】動画が表示できない場合や動画を再生する準備が整うまでの間、表示させる画像を用意しておきます。
【playsinline】SafariforiOS 10に対応するための記述です。【muted】音をミュート（消音）する。【autoplay loop】自動再生・ループ

サンタクロースを、２パネルで紹介しましょう。

Santa Claus

説明①
サンタクロースとは、クリスマスの夜にだけ現れる人物です。全身赤い服装に真っ白なヒゲのおじいさんが、トナカイに乗って現れます。サンタクロースは、フィンランドの中部にあるサンタクロースヴィレッジに住んでいると言われています。

説明②
サンタクロースは、クリスマス・イブによい子のもとへプレゼントを持って訪れるといわれ、子どもに夢を与えます。海外ではプレゼントを届けれくれたサンタさんにお礼を置いておく風習があり、イブの夜にクッキーと温めた牛乳とお礼のカードをツリーの横に置いて寝るそうです。

サンタクロースエリアに、画像とその説明をペアで紐付けしていきます。

<div id="santa">
<dl>
<dt>サンタの画像①</dt>
<dd>サンタの説明①</dd>
</dl>

<dl>
<dt>サンタの画像②</dt>
<dd>サンタの説明②</dd>
</dl>
</div>

<dl>

<dt>サンタの画像①</dt>

<dd>サンタの説明①</dd>

</dl>

<dl>

<dt>サンタの画像②</dt>

<dd>サンタの説明②</dd>

</dl>

</div>

ここで、確認していただきたいのがエリア#Santaが、コンテナー領域(親要素)となり、それに対しdl要素が、アイテム(子要素)
となることを、把握しておきましょう。

フッターを作る

ページの最下部に、フッターのスペースを配置します。今回は、縦長サイズのシングルページですので、bodyに#topを記述し、ワンクリックでページの最上部へ戻れる仕様にしておきます。今回は、font-awesomeを利用した矢印を実装します。fa fa-chevron-upを指定することで、「^」の矢印マークが自動的に表示されます。

<!----------フッターエリア -------------->
<footer>
<small>© 2019 Xmas Premium HANAKO TAMADA.</small>
</footer>
<p class="pagetop"><a href="#top"><i class="fa fa-chevron-up"></i></a></p>

</footer>

スムーススクロール
アニメーションを用いると、滑らかに画面が推移するようになります。動作させるための必要なCDNを読み込みましょう。

<!----------- jQueryCDN --------------->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!----------- 矢印ボタンをフォントで実装する場合 --------------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

以下のfunctionをscroll.jsとして書き出し、外部読み込みにします。

$(function(){
        // #で始まるリンクをクリックしたら実行
        $('a[href^="#"]').click(function() {
          // スクロールの速度
          var speed = 400; // ミリ秒で記述
          var href= $(this).attr("href");
          var target = $(href == "#" || href == "" ? 'html' : href);
          var position = target.offset().top;
          $('body,html').animate({scrollTop:position}, speed, 'swing');
          return false;
        });
      });


$(function(){
  var pagetop = $('.pagetop');
    $(window).scroll(function () {
       if ($(this).scrollTop() > 100) {
            pagetop.fadeIn();
       } else {
            pagetop.fadeOut();
            }
       });
       pagetop.click(function () {
           $('body, html').animate({ scrollTop: 0 }, 700);
              return false;
   });
});

$(function(){

// #で始まるリンクをクリックしたら実行

$('a[href^="#"]').click(function() {

// スクロールの速度

var speed = 400; // ミリ秒で記述

var href= $(this).attr("href");

var target = $(href == "#" || href == "" ? 'html' : href);

var position = target.offset().top;

$('body,html').animate({scrollTop:position}, speed, 'swing');

return false;

});

$(function(){

var pagetop = $('.pagetop');

$(window).scroll(function () {

if ($(this).scrollTop() > 100) {

pagetop.fadeIn();

} else {

pagetop.fadeOut();

}

});

pagetop.click(function () {

$('body, html').animate({ scrollTop: 0 }, 700);

return false;

});

記述内の.pagetopをCSSで、スタイリングしていきます。.pagetopは、最初からは必要がないので、ページがある程度読み込まれてから、出現させるようにします。基本的には、閲覧の邪魔にならないよう右下へ配置する場合が多いです。背景色、文字の色などはカスタマイズしてみてください。

/*ページトップ 
----------------------------*/

.pagetop {
	display: none;
	position: fixed;
	bottom: 0;
	right: 0;
}
.pagetop a {
	display: block;
	background-color: #ff0000;
	text-align: center;
	color: #fff;
	font-size: xx-large;
	text-decoration: none;
	padding: 5px 10px;
	opacity: 0.5;
}
.pagetop a:hover {
	display: block;
	background-color: #333;
	text-align: center;
	color: #fff;
	text-decoration: none;
	padding: 5px 10px;
	opacity: 0.5;
}

/*ページトップ

----------------------------*/

.pagetop {

display: none;

position: fixed;

bottom: 0;

right: 0;

}

.pagetop a {

display: block;

background-color: #ff0000;

text-align: center;

color: #fff;

font-size: xx-large;

text-decoration: none;

padding: 5px 10px;

opacity: 0.5;

}

.pagetop a:hover {