object-fitを使って動画を要素にはめ込む

object-fitプロパティは、置換要素（img要素やvideo要素など）をボックスにどのようにはめ込むかを指定する際に使用します。

• fill

置換要素（img要素やvideo要素など）をボックスサイズに合わせて縦横比を維持しないでリサイズして、全体が見えるようにはめ込む（初期値）

• contain

置換要素（img要素やvideo要素など）をボックスサイズに合わせて縦横比を維持しながらリサイズして、全体が見えるようにはめ込む

• cover

置換要素（img要素やvideo要素など）をボックスサイズに合わせて縦横比を維持しながらリサイズして、トリミングしてはめ込む

• none

置換要素（img要素やvideo要素など）をリサイズしないで、ボックスサイズでトリミングしてはめ込む

• scale-down

置換要素（img要素やvideo要素など）のサイズとボックスサイズの小さい方に合わせて、縦横比を維持しながらリサイズして、全体が見えるようにはめ込む。 言い換えれば、指定するボックスサイズと置換要素の実寸サイズの大小関係に応じて contain または none を指定したときと同じ表示となる

video要素を使う際に気をつけないといけないので、動画を自動再生する場合、OSやブラウザーのバージョンによって仕様がバラバラなので、必ず事前にチェックしましょう。

再生範囲を指定する
videoタグ（及びaudioタグ）では、下記の書き方をすることで再生範囲を指定することが出来ます。

<video src="movie.mp4#t=[starttime][,endtime]"></video>

※Edge・IEは、今のところ未対応
【使用例】
「movie.mp4#t=5,10」5秒時点から10秒時点の範囲を再生
「movie.mp4#t=,8」始点から8秒時点の範囲を再生
「movie.mp4#t=,01:30:00」始点から1時間30分の範囲を再生
「movie.mp4#t=5」5秒時点から最後まで再生

www.plusdesign.co.jp

<div class="wrapper">
<video src="img/Turntable.mp4" autoplay muted loop>
</video>

</div>

スタイルシート

.wrapper {
width: 100%;
height: 100vh;
position: relative;
  overflow: hidden;
}
video {
  object-fit: cover;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

jQueryの「animate」メソッドを使ったアニメーション

animateメソッドとは？
jQueryのanimateメソッドを使うと簡単にアニメーション(値を変化)させることが出来ます。
animateメソッドは値で指定出来る物（margin、color、widthなど）に対し有効です。

$('#box').animate({
    'left': '500px',
    'top': '300px'
});

メソッドチェーンを使い、順番に処理を行う

$('#box').animate({'left': '500px'}).animate({'top': '300px'});

速度を調節する

「slow」「normal」「fast」の文字列を指定するか、直接数値で指定します。

$('#box').animate({
    'left': '500px',
    'top': '300px'
},1000);
});

イージングの設定

イージングの設定をすれば「徐々に速くなる」などアニメーションに変化をつけることができます。
標準では「linear」と「swing」の２種類しかありません。「jQuery Easing Plugin」などを導入することでバリエーションが増えます。

$('#box').animate({
    'left': '500px',
    'top': '300px'
},{
    'duration': 600,
    'easing': 'linear'
});

「クックパッドを支える仕組み」

株式会社クックパッドの総合職・デザイナー向け技術基礎研修で使った資料がネット上で公開されています。

webの基礎知識が非常に解り易くまとまっているので、web初学者は一度目を通す事をお勧めします。

speakerdeck.com

静岡市葵区にあるヨガ教室 | mogariyoga

静岡市葵区にあるヨガ教室、mogariyoga。少人数制でアットホームなヨガ教室です。
アロマやお茶など、リラックスした雰囲気で行える環境です。
はじめてヨガをする方もお気軽にお越しください。

www.mogariyoga.me

erina gallerysite

erina(えりな)はイラストレーター。手描き、ファッションイラストを描く絵描きのホームページです。

http://erinarie.starfree.jp/

求職者支援訓練 webサイト制作科 9月開講クラス 募集は8月9日まで

www.felica.info

東京池袋のフェリカテクニカルアカデミーでは、只今平成30年9月6日より 開講する「Webサイト制作科」の受講生を募集しています。
600時間を超える講座を無料で受講出来、プロになるために必要なスキルを身につける事が出来ます。また、職業訓練受講給付金として給付金を受け取ることが出来ます。（※受給資格がありますので、ご確認下さい。）
詳細に関してはフェリカテクニカルアカデミーに直接お問い合わせ下さい。TEL：03-3981-7201

募集期間：8月9日まで

訓練期間：2018年9月6日 ～ 2019年3月5日

訓練時間：15時55分 ～ 20時50分

フェリカテクニカルアカデミーでは、施設見学会を行っていきます。
施設見学会へのご予約はwebフォームでも受付けております。

ご予約フォームはこちらから

www.felica.info

求職者支援訓練とは？

求職者支援制度とは、職業訓練による能力形成を通じ、真剣に就職を目指そうとする方のための制度です。雇用保険を受給できない失業者の方に対し、無料の職業訓練（求職者支援訓練）を実施し、一定の支給要件を満たす場合は、職業訓練の受講を容易にするための給付金を支給するとともに、ハローワークにおいて強力な就職支援を実施することにより、安定した「就職」を実現するための制度です。

求職者支援訓練の受講を希望される方は、まずは求職者支援訓練を受講できる資格があるかご確認ください。不明なことがございましたら、フェリカテクニカルアカデミーに問い合わせいただくか、最寄のハローワークに直接問い合わせしてご確認ください。

Web制作の現場に行けるインターンシップ制度の導入

フェリカでは、Web制作会社を中心にインターンシップ制度を導入しています。学校に通いながら、空き時間に実際の職場へ行き、現場で求められるスキルや会社の雰囲気を肌で感じる機会を設けています。インターン先で就職というケースも実績として非常に多いです。入校した際には是非チャレンジしてください。

どんな授業を行うの？

現場で求められるスキルを身に付ける事がこのクラスの一番の課題です。GitやSASSといった、現場で求められる新しいスキルなども積極的に授業で取り入れていきます。

クライアントワーク

実際のクライアントワークを通し、サイト制作の企画からローンチ後の検証までを自身で体験し、サイト制作に必要なノウハウを養います。また架空サイトでは無い、実際のサイト制作を通して学んだ事をポートフォリオに記載する事で、就職活動の上でもクライアントワークはアピールにもなります。

過去の受講生の作品

www.felica.info

既存サイトのトレース

既存のサイトをトレースする事で製作者がどういった意図でそのサイトを作ったかが、より明確になります。まずは既存のサイトをトレースする事で、色々なパターンのデザインを覚えて、オリジナルサイトの制作に活かしていきます。

作例
http://yachin29.webcrow.jp/bloom/

http://yoshi1004.webcrow.jp/content/kirin/

生徒の作例
http://yoshi1004.webcrow.jp/content/kaguya/

スマホサイト制作

最近では、Google検索を使用しているほとんどのユーザーは、モバイル端末から検索を行うようになっています。Googleだけでなく、多くのサイトでPCよりもスマートフォン利用者の方が多い現在、今まで以上にスマホサイトが重要になってきます。
授業ではGoogleが推奨する「レスポンシブデザイン」や「動的な配信」でのサイト制作を学ぶ事が出来ます。
また、モバイルファーストインデックス （MFI）といった、最近の考え方やアルゴリズムも学び、よりスマートフォンに適したUI・UX設計を行っていきます。

アプリ開発

クラウドベースのスマホアプリ開発プラットフォームを使用し、HTML5・CSS3とJavaScriptを用いて、iOSとAndroidの両方に対応したハイブリッドアプリの開発を行います。実際にアプリストアに並べる為に必要なワークフローを体感してもらいます。

bxsliderとハンバーガーメニューの実装

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>bxsliderの導入</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
$(document).ready(function(){
  $('.bxslider').bxSlider();
});

$(function(){
 $('#gnav').hide();//まず隠す
 $(window).on('load resize', function(){
    if($(window).innerWidth() < 768 ){
      //スマホの時
     $('#gnav').hide();
    }else{
      //スマホ以外の時
      $('#gnav').show();
      $('#btn').removeClass('anime');
    }
 });
 $('#btn').on('click',function(){
    $(this).toggleClass('anime');
    $('#gnav').slideToggle(200);
   });
 });
</script>
</head>
<body>
<header>
<h1>タイトル</h1>
<p id="btn"><span></span></p>
<nav id="gnav">
<ul>
<li><a href="#">ボタン１</a></li>
<li><a href="#">ボタン２</a></li>
<li><a href="#">ボタン３</a></li>
<li><a href="#">ボタン４</a></li>
</ul>
</nav>
</header>
<ul class="bxslider">
<li><img src="img/slide_01.jpg" alt=""></li>
<li><img src="img/slide_02.jpg" alt=""></li>
<li><img src="img/slide_03.jpg" alt=""></li>
</ul>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */

html,body,h1,p,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
}
img {
  vertical-align:bottom;
}

/*PCレイアウト*/
h1 {
  text-align:center;
  padding:20px;
  font-size:40px;
}
#gnav {
  width:100%;
  background:#2749E4;
  margin-bottom:40px;
}
#gnav ul {
  display:flex;
  max-width:960px;
  margin:0 auto;
}
#gnav ul li {
  width:25%;
  height:50px;
  border-right:1px solid #FFF;
  box-sizing:border-box;
}
#gnav ul li a {
  display:block;
  text-align:center;
  background:#576FBC;
  line-height:50px;
  color:#FFF;
}
#gnav ul li:last-child {
    border-right:none;
}
#gnav ul li a:hover {
  background:#1D4196;
}
#btn {
  display:none;
}
@media screen and (max-width:767px){
 header {
   width:100%;
   height:70px;
 }
 h1 {
   text-align:left;
   font-size:30px;
 }
#btn {
  display:block;
  width:50px;
  height:50px;
  border-radius:4px;
  border:2px solid #2E74EF;
  position:absolute;
  right:20px;
  top:8px;
}
#btn>span {
  display:block;
  width:30px;
  height:2px;
  background:#2E74EF;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  transition:0.1s linear;
}
#btn>span:before {
  display:block;
  content:"";
  width:30px;
  height:2px;
  background:#2E74EF;
  position:absolute;
  top:-20px;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  transition:0.2s  linear;
}
#btn>span:after {
  display:block;
  content:"";
  width:30px;
  height:2px;
  background:#2E74EF;
  position:absolute;
  top:0;
  right:0;
  bottom:-20px;
  left:0;
  margin:auto;
  transition:0.2s linear;
}
#btn.anime>span {
  background:transparent;
}
#btn.anime>span:before {
  transform:rotate(45deg);
  top:0;
}
#btn.anime>span:after {
  transform:rotate(135deg);
  bottom:0;
}
#gnav {
  position:relative;
  z-index:9999;
  width:100%;
  height:calc(100vh - 70px);
}
#gnav ul {
  display:block;
  max-width:960px;
  margin:0 auto;
}
#gnav ul li {
  width:100%;
  height:50px;
  border-right:none;
  border-bottom:1px solid #FFF;
  box-sizing:border-box;
}
#gnav ul li a {
  display:block;
  text-align:center;
  background:#576FBC;
  line-height:49px;
  color:#FFF;
}
#gnav ul li:last-child {
    border-bottom:none;
}
#gnav ul li a:hover {
  background:#1D4196;
}
}