0Pricing
HTML for Kids · レッスン

マルチメディア：動画と音声を追加する

Webページに動画や音声ファイルを埋め込みます

「マルチメディア：動画と音声を追加する」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全4レッスンが含まれています。

インラインスタイル：HTMLに簡単なスタイルを追加する

スタイリングの世界へようこそ！今日は、インラインスタイルを使ってWebページ上の要素の見た目を変更する方法を学びます。インラインスタイルは、ページの見た目を簡単かつすばやく改善する方法です。

インラインスタイルとは何ですか？

インラインスタイルを使うと、style属性でCSS（Cascading Style Sheets）をHTML要素に直接適用できます。

例：

<h1 style="color: red;">Hello, World!</h1>

これにより、赤い見出しが表示されます。仕組みを見ていきましょう。

テキストの色を変更する

style属性のcolorプロパティを使って、テキストの色を変更できます。

例：

<p style="color: blue;">This is blue text.</p>

フォントサイズを変更する

テキストのサイズを変更するには、font-sizeプロパティを使います。

例：

<p style="font-size: 20px;">This text is 20 pixels large.</p>

背景色を追加する

background-colorプロパティを使って、要素に背景色を追加できます。

例：

<p style="background-color: yellow;">This text has a yellow background.</p>

複数のスタイルを組み合わせる

複数のスタイルは、セミコロン;で区切って組み合わせることができます。

例：

<p style="color: white; background-color: black; font-size: 18px;">
  This text has multiple styles applied!
</p>

他の要素にスタイルを設定する

インラインスタイルは、見出し、段落、ボタンなど、すべてのHTML要素で使用できます。

例：

<h1 style="color: green;">Styled Heading</h1>
<button style="background-color: lightblue; border: none; 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 paragraph has styled text.
    </p>
    <button style="background-color: coral; color: white; padding: 10px;">
      Click Me!
    </button>
  </body>
</html>

よくできました！

おめでとうございます！インラインスタイルを使って、Webページにシンプルで効果的なスタイルを追加する方法を学びました。インラインスタイルは、すばやく変更を加えるのに便利な方法ですが、スタイリングにはさらに多くの方法があります！次のレッスンでは、Webデザインの可能性を最大限に引き出すために、CSSの基本を学びます。魅力的なWebページを作成する準備をしましょう！

マルチメディア：動画と音声を追加する — イラスト10

よくある質問

「マルチメディア：動画と音声を追加する」レッスンは無料ですか？

はい。「マルチメディア：動画と音声を追加する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全4レッスンが含まれています。

「マルチメディア：動画と音声を追加する」で何を学びますか？

Webページに動画や音声ファイルを埋め込みます ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML for Kidsを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「マルチメディア：動画と音声を追加する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML for Kidsレッスンでコードを書いて実行できますか？

はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 表：データを整理する
  2. フォーム：ユーザー入力を収集する
  3. HTML属性
  4. マルチメディア：動画と音声を追加する
← HTML for Kidsに戻る