VIDEO
動画編集、音声、収録、書き出し、見せ方の基本。
STACK LEARN
クリエイティブを、作りながら学ぶ
Web制作、動画編集、デザイン、アニメーションなど、制作に役立つ知識を連載形式で分かりやすく解説します。
ABOUT LEARN
このサイトで、ひとつ学んで帰る
STACK LEARNは、Web制作、動画編集、デザイン、アニメーションなどを、作例と手順で学べる実践記事です。
気になるテーマから読み進め、サンプルデータも活用しながら、ひとつずつ制作の知識を身につけられます。
FIRST LESSON
公開中の記事
実際のSTACK公式サイト制作を題材に、HTMLで動画を表示する基本から解説します。
CREATIVE / DESIGN / THINKING
クリエイティブ基礎 第1回｜作品づくりを迷わないための、テーマとコンセプト
テーマとコンセプトの違いを知り、4つの質問からアイデアを具体的な表現へつなげる方法を解説します。
READ ARTICLE →
WEB / HTML / CSS / VIDEO
第5回｜Webサイトで使うHero背景動画の作り方と軽量化
Hero背景動画に適した素材、H.264での書き出し、ビットレート調整、poster画像、公開前確認までを解説します。
READ ARTICLE →
WEB / HTML / CSS / VIDEO
第4回｜Hero背景動画をスマートフォンに対応させる方法
メディアクエリを使い、Heroの高さ、文字サイズ、改行、余白、動画の表示位置をスマートフォン向けに調整します。
READ ARTICLE →
WEB / HTML / CSS / VIDEO
第3回｜背景動画の上にタイトルを重ねて表示する方法
positionとz-indexを使い、Hero背景動画の上にタイトル、説明文、リンクボタンを重ねて表示する方法を解説します。
READ ARTICLE →
WEB / HTML / CSS / VIDEO
第2回｜CSSで動画を画面いっぱいに表示する方法
100vhとobject-fit: coverを使い、動画の縦横比を保ちながら画面いっぱいのHero背景として表示する方法を解説します。
READ ARTICLE →
WEB / HTML / VIDEO
第1回｜HTMLのvideoタグで動画を表示する方法
videoタグとsourceタグを使ってMP4動画を配置し、自動再生、繰り返し再生、スマートフォンでのページ内再生を設定する方法を解説します。
READ ARTICLE →
CATEGORIES
学べる分野
WEB
HTML、CSS、WordPress、Webコンテンツ設計。
DESIGN
レイアウト、文字、配色、図解、情報整理。
COURSE
オンライン講座の企画、教材、収録、公開。