【初心者向け】レスポンシブデザイン入門スライドまとめ

デザイン

Webデザインの手法の1つである「レスポンシブデザイン」。今回はそんなレスポンシブデザインを初めて知った方や、初心者の方を対象とした入門教材を紹介したいと思います。初心者の方でも、分りやすいようにスライドと動画を用いた入門教材を選んでいきたいと思います。

更新日時:

レスポンシブデザイン入門資料まとめ

それでは早速入門編から始めてみましょう!

入門編:レスポンシブデザインとは?

入門編では、2つのスライダーを用意しました。まずは、レスポンシブデザインの概要と特徴をサラっと学習していきましょう。 1:「レスポンシブwebデザインのサイトを作る前に」

こちらのスライドでは、レスポンシブサイトの概要と問題点が記載されいます。サイト設計の心構えとして読んでおくと良いかもしれません。 2:「レスポンシブ基礎〜webサイトをレスポンシブにする方法とそのメリット〜」

こちらのスライドでは、レスポンシブデザインの概要とメリット・デメリットなどがスライドで紹介されています。

応用編:レスポンシブデザインの基礎を学ぶ

応用編では、入門よりページ数の多いものスライドを用意しました。レスポンシブサイトの3大要素である、「フルードグリッド」、「フルードイメージ」、「メディアクエリ」はしっかり抑えておきましょう。 1:「CSSフレームワークとCMS RWDテンプレでレスポンシブwebデザインサイトを構築しよう」

こちらのスライドでは、レスポンシブデザインの概要とフレームワークの説明、Bootstrapの使い方などが説明されています。 2:「レスポンシブwebデザインの基礎と、コーディング実習」

ここでは、3大要素の説明、ブレークポイントの決め方、viewpointの説明がされています。レスポンシブデザインの特徴や概念の詳細な部分まで、分りやすく丁寧に説明されています。

ここでは、3大要素の説明、ブレークポイントの決め方、viewpointの説明がされています。レスポンシブデザインの特徴や概念の詳細な部分まで、分りやすく丁寧に説明されています。

実践編では、入門編と応用編の学習を生かしながら実際に手を動かしてレスポンシブデザインを理解してみましょう。

1:レスポンシブwebデザインの概要&まとめ

まずは、さきほど勉強した内容の復習として、こちらを確認してみましょう。レスポンシブデザインの特徴、歴史、メリット、デメリットが簡潔にまとめられています。 2:動画でレスポンシブデザインを学習してみよう

動画学習サイト「ドットインストール」のレスポンシブデザイン編です。実際に手を動かしながら動画を見る事でより理解が深まります。3分動画なので、時間がないときも、ポイントを抑えながら効率的に学習出来るのがありがたいです。 3:チュートリアルを見ながらウェブサイトを作る。

こちらのチュートリアルでは、サンプルデモを交えながら、初心者でも分かりやすい説明や方法で、レスポンシブデザインを作る事が出来ます。今まで学んだ知識を生かして最後にウェブページを作ってみましょう。

終わりに

いかがだったでしょうか?今回は、web制作において便利なレスポンシブデザインの基礎に役立つ教材資料を見てきました。フレームワークなどの登場によっておしゃれなレスポンシブサイトを手軽に作れるようになりました。さまざまなツールを利用することで、初心者でもwebデザイン制作のハードルを下げる事が出来るので、是非利用してオリジナルのwebページを作ってみましょう!

関連タグ

関連する記事

アクセスランキング

《最大6つの質問で診断完了!》
Facebook Messenger
経由で
あなたにマッチした転職を診断します。

今スグ診断(無料)

《最大6つの質問で診断完了!》
Facebook Messenger
経由で
あなたにマッチした転職を診断します。

今スグ診断(無料)