インラインスタイル
HTML内で要素の見た目を直接変更します
「インラインスタイル」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全4レッスンが含まれています。
背景色の追加
background-colorプロパティを使うと、要素を目立たせることができます。
例：
<p style="background-color: yellow;">This text has a yellow background.</p>
インラインスタイル：HTMLにシンプルなスタイルを追加する
インラインスタイルのレッスンへようこそ！今日は、style属性を使ってHTML内で要素を直接スタイル設定する方法を学びます。
インラインスタイルとは？
インラインスタイルを使うと、style属性によってCSSをHTMLタグに直接追加できます。これは、ページにスタイルを設定する最も簡単な方法です。
例：
<p style="color: red;">This is red text!</p>
color: red;によって、テキストの色が赤に変わります。
フォントサイズの変更
font-sizeプロパティを使って、テキストのサイズを変更します。
例：
<p style="font-size: 24px;">This text is 24 pixels large.</p>
複数のスタイルの組み合わせ
インラインスタイルでは、複数のCSSプロパティを組み合わせることができます。各プロパティはセミコロン;で区切ります。
例：
<p style="color: white; background-color: black; font-size: 18px;">
This text has multiple styles!
</p>
他の要素のスタイル設定
インラインスタイルは、見出し、ボタン、画像など、すべてのHTML要素で使用できます。
例：
<h1 style="color: green;">Styled Heading</h1>
<button style="background-color: coral; color: white; padding: 10px;">
Styled Button
</button>
自分で試してみましょう
インラインスタイルを使ってWebページを作成しましょう。まずは次の例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>Inline Styles Example</title>
</head>
<body>
<h1 style="color: purple;">Welcome to My Styled Page</h1>
<p style="color: gray; font-size: 16px;">
This is an example of inline styling.
</p>
<button style="background-color: lightblue; padding: 10px; border: none;">
Click Me!
</button>
</body>
</html>
よくできました！
おめでとうございます！インラインスタイルを使って、HTML要素にシンプルで効果的なスタイルを追加する方法を学びました。インラインスタイルは、すばやく変更を加えるのに便利ですが、Webページが大きくなるにつれて、より高度なスタイリング技法が必要になります。次のレッスンでは、CSSの基本を学びます。プロフェッショナルなWebページをデザインする準備をしましょう！
style属性の使用
インラインスタイルとは？
インラインスタイルを使うと、style属性によってCSSをHTMLタグに直接追加できます。これは、ページにスタイルを設定する最も簡単な方法です。
例：
<p style="color: red;">This is red text!</p>
color: red;によって、テキストの色が赤に変わります。
<p style="color: red;">This is red text.</p>
よくある質問
「インラインスタイル」レッスンは無料ですか？
はい。「インラインスタイル」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全4レッスンが含まれています。
「インラインスタイル」で何を学びますか？
HTML内で要素の見た目を直接変更します ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML for Kidsを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「インラインスタイル」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML for Kidsレッスンでコードを書いて実行できますか？
はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。