手を動かして学ぶ『レスポンシブコーディング』をYouTubeでアップしました。
プロゲートをクリアしたあとに、もう少し実践的な勉強をしたい人向けの講座となります。
実践に近い形にするため、仕事で使うエディタやデザインソフトを使って講座は進めていきます。
（全て無料のツールです！）
今回の講座で作成するサイトはこのようなものになります。
※スマホで見るとスマホ表示になります。
前回作った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 |
| ズームイン |
|
|
| ズームアウト |
|
|
| 画面サイズに合わせる | ⌘ 0 | Ctrl + 0 |
| 100％ | ⌘ 1 | Ctrl + 1 |
| 200％ | ⌘ 2 | Ctrl + 2 |
| アートボードガイドを表示/隠す | ⌘ + ; | Ctrl + ; |
| オブジェクト間の距離を測る | （オブジェクトを選択した状態で） Option |
（オブジェクトを選択した状態で） Alt |
