レスポンシブにする
スマートフォンでもデスクトップでも見栄えよく表示します。
「レスポンシブにする」はCoddyKit上の無料Vibe Codingレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVibe Coding学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vibe Codingコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
One Design, Every Screen
Your users are on phones, tablets, and laptops. A design that looks stunning on your big monitor can be a cramped, broken mess on a phone. Responsive design means it adapts to any screen size gracefully.
The good news: you can make it responsive entirely by prompt. This lesson shows you how to ask for it — and how to spot and fix layout problems on small screens.
Think Mobile-First
The modern best practice is mobile-first: design for the small screen first, then expand for larger ones. Phones force you to prioritize what truly matters.
Tell the AI to start mobile-first and it'll build layouts that scale up cleanly instead of cramming a desktop design onto a phone.
"Build this landing page mobile-first. Design it to look great on
a phone first — single column, large tap targets — then expand to
a multi-column layout on tablets and desktops."Breakpoints: Where Layouts Change
A breakpoint is a screen width where your layout shifts — for example, a 3-column grid collapses to 1 column on phones. Common breakpoints are roughly phone (under 640px), tablet (768px), and desktop (1024px+).
You can name these in plain English; the AI maps them to the right Tailwind sizes.
"Make the feature grid responsive: 3 columns on desktop,
2 columns on tablet, and 1 column on mobile. Stack them with
comfortable spacing on small screens."How Tailwind Marks Breakpoints
In the code, Tailwind uses prefixes like md: and lg: to apply styles at certain widths. grid-cols-1 md:grid-cols-2 lg:grid-cols-3 means: 1 column by default, 2 on medium screens, 3 on large.
You won't write much of this by hand, but recognizing it helps you give precise feedback.
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- cards stack on mobile, spread out on desktop -->
</div>The Collapsing Navbar
Navigation is the classic responsive challenge. A row of links that fits on desktop won't fit on a phone. The standard solution: collapse them into a hamburger menu on small screens.
Ask for it explicitly and the AI handles the toggle behavior too.
"Make the navbar responsive: show the full row of links on desktop,
but on mobile collapse them into a hamburger menu that opens a
slide-down panel when tapped."Simulating a Breakpoint Decision
Choosing a layout is really just checking the screen width and picking a column count. Here's a tiny JavaScript model of that logic — run it to see how different widths map to different layouts.
function columnsFor(width) {
if (width < 640) return 1; // phone
if (width < 1024) return 2; // tablet
return 3; // desktop
}
[375, 800, 1440].forEach(function (w) {
console.log(w + 'px screen -> ' + columnsFor(w) + ' column(s)');
});Fluid Sizes, Not Fixed
Fixed widths like width: 600px break on small screens. Responsive designs use relative units — percentages, max-width, and flexible grids — so elements shrink and grow with the screen.
If something overflows off the edge on mobile, it's usually a fixed width. Just ask the AI to make it fluid.
"Some elements overflow off the right edge on mobile. Replace any
fixed pixel widths with fluid, percentage-based or max-width sizing
so nothing spills past the screen edge."Touch-Friendly Targets
Fingers are bigger than mouse cursors. Buttons and links that work on desktop can be too small and too close together on a phone. The rule of thumb: tap targets at least ~44px tall with enough spacing.
Ask the AI to make interactive elements touch-friendly for a mobile-grade experience.
"On mobile, make all buttons and links touch-friendly: at least
44px tall, with enough spacing between them so they're easy to tap
without hitting the wrong one."Preview at Different Sizes
Tools like v0, Lovable, and Bolt let you preview your UI at phone, tablet, and desktop widths. Always check all three before you're happy.
In a browser, you can also open DevTools (F12) and use the device toolbar to test sizes. Seeing the breakpoints in action is the fastest way to catch problems.
Quick test checklist:
- Does anything overflow horizontally on a phone?
- Do columns collapse sensibly?
- Is the navbar a hamburger on mobile?
- Are buttons big enough to tap?
- Is text readable without zooming?Fixing Responsive Bugs by Prompt
When you spot a problem on a screen size, describe it precisely: which screen, which element, what's wrong. Specific bug reports get specific fixes.
Treat the AI like a developer you're handing a QA note to.
"On mobile (under 640px), the hero headline is cut off and the
two buttons sit side by side and overflow. Fix it: shrink the
headline to fit, and stack the buttons vertically full-width."Practice: Make a Page Adapt
Take a page you've built and run it through the responsive loop: prompt for mobile-first, set breakpoints for the grid, collapse the navbar, then preview at all three sizes and fix anything that breaks. Responsiveness is a habit — bake it into every UI prompt from now on.
"Make my whole dashboard fully responsive: sidebar collapses to a
bottom tab bar on mobile, stat cards go from 4 columns to 1, charts
scale to fit, and all controls are touch-friendly. Then show me the
mobile, tablet, and desktop previews."Quick Check
What does a breakpoint do in a responsive design?
Recap: Great on Every Device
You learned to make designs adapt to any screen by prompt: go mobile-first, set breakpoints for grids and navbars, use fluid sizes instead of fixed widths, and make tap targets touch-friendly. Always preview at phone, tablet, and desktop, and report responsive bugs precisely.
That completes Designing UIs by Prompt — you can now describe, generate, style, theme, and make responsive any interface using nothing but words and tools like v0 and Lovable. Go build something beautiful.
AI チューターと学ぶ JavaScript — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 25
- レッスン
- 100
よくある質問
「レスポンシブにする」レッスンは無料ですか？
はい。「レスポンシブにする」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vibe Codingコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vibe Codingコースには全4レッスンが含まれています。
「レスポンシブにする」で何を学びますか？
スマートフォンでもデスクトップでも見栄えよく表示します。 ブラウザで直接実行するハンズオンコードでVibe Codingを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vibe Codingを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVibe Codingは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「レスポンシブにする」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVibe Codingレッスンでコードを書いて実行できますか？
はい。すべてのVibe Codingレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- UIを言葉で説明する
- コンポーネントを生成する
- スタイリングとテーマ設定
- レスポンシブにする