¥0
30日間返金保証
このコースの特徴
レスポンシブデザインに対応できていますか？
基礎はわかったけど
レスポンシブ化が難しい
モバイルファースト?
方法がわからない
頑張ってCSSを書いても
表示が崩れる…
サクッと短時間で、レスポンシブデザイン・コーディング基礎を習得可能
～作りながら理解する、ウンザリしないレスポンシブデザイン入門～
Webサイト制作では標準仕様になりつつあるレスポンシブデザイン。
基本のHTML、CSSは分かったからレスポンシブデザインに挑戦……と思っても、実際作ってみると上手くいかない部分が出てきてイヤになってしまうことが多いのではないでしょうか？
本講座では、オリジナルの教材で以下のWebページを作ります。
レスポンシブデザインやモバイルファーストの考え方から、画像の書き出し、コーディングまでを図解たっぷりに解説。 デザインを中心に行いたい方も、一度レスポンシブコーディングをしてみると「端末に合わせて、どうデザインの変更していけば良いか」が掴めますよ。
Skillhubなら、短時間で実践的な基礎スキルを習得可能！
多くの未経験者をフリーランスWeb制作者としてデビューさせてきた、Skillhubの講座は無駄なくミニマムな内容。その中でも初心者の方向けに、ほんとうに必要な知識だけを厳選しているからこそ、短期間での基礎習得が可能です。
短期間で「使える」技術を身につけるカリキュラム
レスポンシブとかモバイルファーストって何?から解説します
Web業界以外の方からすれば、馴染みのない「レスポンシブ」や「モバイルファースト」という言葉。説明からしてWeb用語が多くて分かりにくい…なんてこともあります。
本講座では最初に、レスポンシブデザインやモバイルファーストとは何かを解説。その後、実際に制作も行います。解説と実践がセットになっていることで、要点をしっかり体感できますよ。
図解たっぷり! 1つのページを作りながらレスポンシブを理解
スマホやタブレットは、機種によって画面のサイズが違います。ユーザーがどんな端末からアクセスしてもレイアウトが崩れず、問題なく見えようにするための、知識とコツを図解たっぷりで解説。
解説と同時進行で、実際に1つのレスポンシブデザインのページを作っていきます。CSSプロパティの使い所や、組み合わせを習得しつつ、柔軟なレイアウトを構成できる血方も身につきます。
自己解決力・修正力が身につき、臨機応変に対応可能
レスポンシブデザインのコーディングでは、適用されているスタイル指定を把握し、修正する力がとても重要です。
本講座ではコーディングの際、ブラウザの検証ツールも使っていきます。検証ツールの見方に慣れることで、レイアウトが崩れてしまってもすぐに原因発見・修正ができるようになります。
「解説がないとお手上げ」なんてことは、もう卒業しましょう！
本講座を終えると、できるようになること
- レスポンシブデザインとは何かがわかる
- モバイルファーストの意味がわかる
- CSSメディアクエリが使えるようになる
- 柔軟なコーディングができるようになる
- 検証ツールを使って、自分だけで問題発見・修正ができるようになる
学習内容
コースコンテンツ
セクション: 4本コースの内容について
レスポンシブデザインとは？モバイルファーストとの違いも解説
レスポンシブコーディングに使う、ビューポートとメディアクエリ
レスポンシブデザインに役立つCSS Flexboxレイアウト基礎
実習デザインとコーディング要件
Illustratorのデザインデータから、必要な画像を書き出す
レスポンシブデザインのコーディングを始めよう
レスポンシブコーディング向け、CSSファイルのベースを作ろう
ヘッダーとフッターのコーディング
ファーストビューのレスポンシブコーディング
イベント紹介セクションのレスポンシブコーディング
紹介・お知らせセクションのレスポンシブコーディング
最終確認と細かい部分の調整
講座終了課題
CSS変数（カスタムプロパティ）について知ろう
CSS変数の活用例
ダークモード対応のためのCSS
Zooloppaをダークモード対応にしてみる
受講生のレビュー
解説を読んだり、お手本のコードをうつすだけではなく、考え方から学んで実際に作ることで応用力も身につきます。