無料

レスポンシブWeb制作:スマホ対応して公開する

viewport、メディアクエリ、相対単位、モバイルファーストを使い、PC・スマートフォン両対応のページを完成・公開する10レッスンの無料コースです。

レッスン

10件

所要時間

約3時間

ランク

初級

最初のレッスンを読む

15分・無料・登録なしで読めます

はみ出しと横スクロール

動く図解・スマホで見ると崩れる

目標

PC・スマートフォン両対応のページを完成させて公開できる

できるようになること

viewportの役割を説明できる

メディアクエリを書ける

rem・%などの相対単位を使える

モバイルファーストでCSSを書ける

PCとスマートフォンの両方で表示確認できる

制作したページを公開できる

前提知識・必要な環境

必須

  • • CSSレイアウトの修了

環境

ブラウザ完結(インストール不要)

このコースに入っているもの

触れる図解

10本

導入スライド

24枚

手を動かす演習

10問

監修

ゆめさくコード編集部

プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。

生田 陸人

ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。

  1. 画面の幅に合わせて、スマホでもPCでも読めるようにする。

  2. 点検して磨いて、自分らしさを足して、完成させる。

HTML/CSS 第5コースのバッジ 未獲得

このコースを終えると取れるバッジ

HTML/CSS 第5コース

0 / 10 レッスン

このコースの動く図解

動かしながら、仕組みや変化を目で確かめられます。

前提が不安な方へ

先にこちらを通しておくと、つまずきにくくなります

あわせて学びたい

同時に進めると、理解が早くなる組み合わせです