【YouTube講座 #02】手を動かして学ぶ、レスポンシブコーディング

手を動かして学ぶ『レスポンシブコーディング』をYouTubeでアップしました。
プロゲートをクリアしたあとに、もう少し実践的な勉強をしたい人向けの講座となります。

実践に近い形にするため、仕事で使うエディタやデザインソフトを使って講座は進めていきます。
(全て無料のツールです!)

今回の講座で作成するサイトはこのようなものになります。
※スマホで見るとスマホ表示になります。

#02 レスポンシブチュートリアル完成サイト

前回作ったPC用ページをスマホ化していくという流れの講座となります。
この動画講座では、主に以下の3点を学ぶことが出来ます。

この講座の特徴

  • 画面の横幅でレイアウトを変える『メディアクエリ』の使い方
  • スマホレイアウトのメニューに使っている『CSSアニメーション』の使い方
  • 実際に仕事で使うツールを使って学ぶので、より実践に近い制作が学べる

YouTube講座

レスポンシブチュートリアルの作業ファイル

講座で使うファイルになります。
作業ファイルダウンロードはこちら

講座で使う無料ツール

作業用ブラウザ。
Google Chromeのダウンロードはこちら

HTMLやCSSなどコードを書くエディタ。
Visual Studio Codeのダウンロードはこちら

デザインソフト。
Adobe XDのダウンロードはこちら

キーボードの記号配置

講座で使う記号がわからない場合は、こちらの図を参考にしてください。

ショートカット

各ソフトや、PCの操作でのショートカットはこちら。

基本的なPCのショートカット

メニュー ショートカットキー(macOS) ショートカットキー(Windows)
コピー ⌘C Ctrl + C
切り取り ⌘X Ctrl + X
貼り付け ⌘V Ctrl + V
取り消し ⌘Z Ctrl + Z
すべて選択 ⌘A Ctrl + A
削除 Delete

Chromeブラウザのショートカット

メニュー ショートカットキー(macOS) ショートカットキー(Windows)
新規タブを開く ⌘T Ctrl + T
タブを閉じる ⌘W Ctrl + W
デベロッパーツール ⇧⌘I Shift + Ctrl + I

Visual Studio Codeのショートカット

メニュー ショートカットキー(macOS) ショートカットキー(Windows)
ファイル保存 ⌘S Ctrl + S

Adobe XDのショートカット

すべてのショートカットはこちら

メニュー ショートカットキー(macOS) ショートカットキー(Windows)
書き出し ⌘E Ctrl + E
ズームイン
  • ⌘+
  • Option-スクロールホイール
  • Option-スワイプ(Magic Mouse)
  • ピンチアウト(トラックパッド)
  • Ctrl + +
  • Ctrl キーを押しながらスクロールホイール
  • ピンチアウト(トラックパッド)
ズームアウト
  • ⌘-
  • Option-スクロールホイール
  • Option-スワイプ(Magic Mouse)
  • ピンチイン(トラックパッド)
  • Ctrl + –
  • Ctrl キーを押しながらスクロールホイール
  • ピンチイン(トラックパッド)
画面サイズに合わせる ⌘ 0 Ctrl + 0
100% ⌘ 1 Ctrl + 1
200% ⌘ 2 Ctrl + 2
アートボードガイドを表示/隠す ⌘ + ; Ctrl + ;
オブジェクト間の距離を測る (オブジェクトを選択した状態で)
Option
(オブジェクトを選択した状態で)
Alt
  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。