平易な言葉でスタイルを指定する
実現したい見た目を説明します。
「平易な言葉でスタイルを指定する」はCoddyKit上の無料Vibe Codingレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVibe Coding学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vibe Codingコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Styling Without Code
Now your page has a skeleton, but it looks plain. Styling adds colors, spacing, and a nice feel.
The magic of vibe coding is that you describe the look in plain words. You say "calm and green", and the AI picks the colors and fonts for you.
Describe a Mood
Instead of naming exact hex codes, describe the feeling you want. Words like "fresh", "modern", "playful", or "professional" guide the AI.
A mood gives the AI room to choose matching colors and fonts that work well together.
Style the PlantPal landing page to feel fresh and friendly.
Use soft green tones, rounded corners, and a clean modern font.Pick a Color Theme
If you have a color in mind, just name it. "Green", "navy blue", or "warm orange" all work.
You can also ask for a main color plus an accent color for buttons. The AI keeps the rest neutral so your page stays readable.
Use a green and white color theme.
Make the buttons a slightly darker green so they stand out.
Keep the text dark gray for easy reading.Style the Hero
The hero is the first thing people see, so it deserves attention. Ask for a large, bold headline and plenty of breathing room around it.
You can request a soft background color or a gentle gradient to make the top of the page inviting.
Make the hero section stand out.
Use a large bold headline, generous spacing, and a soft light-green background behind it.Make Buttons Inviting
Your call-to-action button should be easy to spot and pleasant to click. Ask the AI to give it a clear color and a little hover effect.
A button that gently changes when the mouse moves over it feels alive and modern.
Style the "Get Started" button.
Make it green with white text, rounded corners, and a slightly darker shade when I hover over it.Spacing and Breathing Room
Crowded pages feel stressful. Good spacing makes a page feel calm and easy to read.
You can ask the AI for more padding around sections and space between lines of text. "Give it room to breathe" is a phrase the AI understands well.
Add more space between the sections and around the text.
Give the page room to breathe so it does not feel crowded.Fonts and Readability
Fonts shape the personality of a page. A clean sans-serif font feels modern; a serif font feels classic.
You do not need font names. Just say "easy to read" or "modern", and ask for headings a bit larger than body text.
Use a clean, modern, easy-to-read font.
Make the headings noticeably larger and bolder than the normal text.One Change at a Time
When styling, change one thing per message. This makes it easy to see what each change does.
If you ask for ten changes at once and dislike the result, it is hard to know which part to undo. Small steps keep you in control.
Keep It Consistent
A good landing page uses the same colors and spacing everywhere. Mismatched styles look unfinished.
You can ask the AI to apply your theme across the whole page so every section matches the hero.
Apply the same green theme and spacing to every section.
Make sure all buttons and headings look consistent across the page.Undoing a Style You Dislike
Not every result will please you, and that is fine. Just tell the AI what feels wrong and what you would prefer instead.
You can say "too dark" or "the button is too small". The AI adjusts without losing the rest of your work.
The background is too dark and hard to read.
Make it lighter and keep the green accents on the buttons only.A Page With Personality
With a few plain-language requests, your plain skeleton now has a clear style: a theme color, comfortable spacing, readable fonts, and an inviting button.
Remember, you described feelings and let the AI handle the technical color and font choices.
Give the whole PlantPal page a fresh, calm, modern style.
Green and white theme, roomy spacing, readable font, and a friendly rounded button.Quick Check
Let's review styling by plain language.
Recap: Plain-Language Styling
You learned to style by describing a mood and theme instead of writing code. You styled the hero, made an inviting button, added breathing room, and kept everything consistent.
You also saw how to undo a look you dislike. Next, you will fill the page with real sections and content.
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は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「平易な言葉でスタイルを指定する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVibe Codingレッスンでコードを書いて実行できますか？
はい。すべてのVibe Codingレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ページの骨組みを作る
- 平易な言葉でスタイルを指定する
- セクションとコンテンツを追加する
- プレビューして調整する