スマホで見ると崩れる
はみ出しと横スクロール無料
レスポンシブWeb制作:スマホ対応して公開する
viewport、メディアクエリ、相対単位、モバイルファーストを使い、PC・スマートフォン両対応のページを完成・公開する10レッスンの無料コースです。
レッスン
10件
所要時間
約3時間
ランク
初級
最初のレッスンを読む
15分・無料・登録なしで読めます
動く図解・スマホで見ると崩れる
動く図解・スマホで見ると崩れる
目標
PC・スマートフォン両対応のページを完成させて公開できる
できるようになること
viewportの役割を説明できる
メディアクエリを書ける
rem・%などの相対単位を使える
モバイルファーストでCSSを書ける
PCとスマートフォンの両方で表示確認できる
制作したページを公開できる
前提知識・必要な環境
必須
- • CSSレイアウトの修了
環境
ブラウザ完結(インストール不要)
このコースに入っているもの
触れる図解
10本
導入スライド
24枚
手を動かす演習
10問
監修
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
生田 陸人
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
画面の幅に合わせて、スマホでもPCでも読めるようにする。
点検して磨いて、自分らしさを足して、完成させる。
このコースを終えると取れるバッジ
HTML/CSS 第5コース
0 / 10 レッスン
このコースの動く図解
動かしながら、仕組みや変化を目で確かめられます。
前提が不安な方へ
先にこちらを通しておくと、つまずきにくくなります
あわせて学びたい
同時に進めると、理解が早くなる組み合わせです