鈴木さや香（イラストレーター）のサイトです。猫のヘリの日々のスケッチや、パステルのイラスト作品など、シンプルでピリリと個性的な作品集です。ロゴデザインや、ショップを飾るイラスト、季節の花、人物画、オリジナルの模様、キッチンの風景、など様々なシーンを描きます。パッケージデザイン、壁紙、カタログ、黒板など、様々。
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秒時点から最後まで再生
<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' });
「クックパッドを支える仕組み」
静岡市葵区にあるヨガ教室 | mogariyoga
求職者支援訓練 webサイト制作科 9月開講クラス 募集は8月9日まで
東京池袋のフェリカテクニカルアカデミーでは、只今平成30年9月6日より 開講する「Webサイト制作科」の受講生を募集しています。
600時間を超える講座を無料で受講出来、プロになるために必要なスキルを身につける事が出来ます。また、職業訓練受講給付金として給付金を受け取ることが出来ます。（※受給資格がありますので、ご確認下さい。）
詳細に関してはフェリカテクニカルアカデミーに直接お問い合わせ下さい。TEL：03-3981-7201
募集期間：8月9日まで
訓練期間：2018年9月6日 ～ 2019年3月5日
訓練時間：15時55分 ～ 20時50分
フェリカテクニカルアカデミーでは、施設見学会を行っていきます。
施設見学会へのご予約はwebフォームでも受付けております。
ご予約フォームはこちらから
求職者支援訓練とは？
求職者支援制度とは、職業訓練による能力形成を通じ、真剣に就職を目指そうとする方のための制度です。雇用保険を受給できない失業者の方に対し、無料の職業訓練（求職者支援訓練）を実施し、一定の支給要件を満たす場合は、職業訓練の受講を容易にするための給付金を支給するとともに、ハローワークにおいて強力な就職支援を実施することにより、安定した「就職」を実現するための制度です。
求職者支援訓練の受講を希望される方は、まずは求職者支援訓練を受講できる資格があるかご確認ください。不明なことがございましたら、フェリカテクニカルアカデミーに問い合わせいただくか、最寄のハローワークに直接問い合わせしてご確認ください。
Web制作の現場に行けるインターンシップ制度の導入
フェリカでは、Web制作会社を中心にインターンシップ制度を導入しています。学校に通いながら、空き時間に実際の職場へ行き、現場で求められるスキルや会社の雰囲気を肌で感じる機会を設けています。インターン先で就職というケースも実績として非常に多いです。入校した際には是非チャレンジしてください。
どんな授業を行うの？
現場で求められるスキルを身に付ける事がこのクラスの一番の課題です。GitやSASSといった、現場で求められる新しいスキルなども積極的に授業で取り入れていきます。
クライアントワーク
実際のクライアントワークを通し、サイト制作の企画からローンチ後の検証までを自身で体験し、サイト制作に必要なノウハウを養います。また架空サイトでは無い、実際のサイト制作を通して学んだ事をポートフォリオに記載する事で、就職活動の上でもクライアントワークはアピールにもなります。
既存サイトのトレース
既存のサイトをトレースする事で製作者がどういった意図でそのサイトを作ったかが、より明確になります。まずは既存のサイトをトレースする事で、色々なパターンのデザインを覚えて、オリジナルサイトの制作に活かしていきます。
作例
http://yachin29.webcrow.jp/bloom/
http://yoshi1004.webcrow.jp/content/kirin/
