SKIP TO CONTENT
INTERMEDIATE
1.5 hours4 chapters

Responsive Design

Make your website look good on every device, whether it is a big desktop computer, a tablet, or a small smartphone. We will take it one gentle step at a time.

Vibe Coding Academy Avatar
Progress: 0%In progress

What You'll Learn

電話、タブレット、パソコンの画面の大きさがそれぞれ違う理由
ページがどんな画面にも合わせて"伸び縮み"できる仕組み
文字やボタンを、読みやすく押しやすい大きさにする方法
本物の電話で自分の作品を確かめる方法

Description

レスポンシブデザインを、ご自分のペースで学びましょう。大人の学習者のために作られた、わかりやすく親しみやすい説明をご用意しました。ひとつひとつの考え方を小さく心地よいステップに分け、日常の例えを使い、わかりにくい専門用語は使いません。急ぐ必要も、暗記する必要もありません。

このチュートリアルの間ずっと、Vibe Coding Academy のアバターがあなたのそばを歩きます。やさしい例、シンプルな練習、実生活で役立つヒントとともに、小さな成功をひとつずつ重ねて自信を育てるお手伝いをします。

最後には、ウェブサイトが大きな画面でも小さな画面でもちょうどよく見える仕組みがわかり、複雑な準備なしに、ご自分で確かめる方法も身につきます。

What's Inside

Four short chapters, about 1.5 hours in total. Take a break whenever you like; the page will remember where you are.

  • 1.あたたかいご挨拶と、"レスポンシブ"の本当の意味
  • 2.画面の大きさがこんなにいろいろある理由
  • 3.どんな画面にも収まるように、柔軟にする工夫
  • 4.ご自分の電話でページを試してみること
Vibe Coding Academy Avatar
"Take your time, and remember: you cannot break anything by trying. I'll be with you the whole way."