スクール会員専用サイトです。

• レスポンシブ

レスポンシブWebデザインのメリット・デメリット

レスポンシブWebデザインとはパソコン、タブレット、スマートフォンなどの画面サイズの異なるデバイスに応じて、それぞれに最適化されたWebレイアウトを行うための制作手法です。

• レスポンシブ

ブラウザの表示確認について

グーグルクロームのデベロッパーツール使い方を動画で解説しています。

• レスポンシブ

グリッドデザインについて

「グリッドデザイン」とはページを構成する要素を規則正しく分割されたグリッドに沿ってレイアウトを組んでいくという手法です。

• レスポンシブ

メディアクエリの練習

メディアクエリの説明を中心にCSSの記述の順序やブレイクポイントについて解説します。練習問題もありますのでぜひお楽しみに！

• レスポンシブ

Viewportについて

viewportとはスマートフォン、タブレットで表示されるときのWebサイトの見え方の指定です。

初級編 01 HTMLの準備

シンプルなHTML・CSSで構成したWebページを作りながらレスポンシブの基本を学びます。

初級編 02 スマートフォン向けCSSの記述

初級編サンプルサイトの作成の続きです。ここからは、スマートフォン向けCSSの記述を記述していきます。

初級編 03 メディアクエリ CSSの記述

初級編サンプルサイトの作成の続きです。ここからは、メディアクエリの設定をしていきます。

応用編 01 HTMLの準備とスマートフォン向け CSSの記述

今回から始まる応用編では、次のようなレスポンシブサイトを制作していきます。

応用編 02 メディアクエリ CSSの記述

今回からコンテンツ・フッターエリアのスタイルを記述していきます。可変レイアウトへの対応として影響する要素は相対値（%）での指定を行っていきます。

応用編 03 メディアクエリ タブレット・PC向けCSSの記述

今回からタブレット・パソコン向けCSSの記述を進めていきます。少し、難易度が高くなりますが、ひとつひとつ、動画を止めて確認していけば大丈夫です。

レスポンシブ練習問題

レスポンシブWebデザインの練習問題です。