0Pricing
HTML for Kids · レッスン

スタイルを定義する方法

スタイルを定義する方法

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

はじめに

こんにちは。

前のレッスンで部分的に説明しましたが、ここでもう一度確認しましょう。

CSSでは、スタイルを3つの方法で定義できます。

  1. インラインスタイル
  2. <style>タグの間に記述する
  3. 外部CSSファイルを使用する

インラインスタイル

1. インラインスタイル

名前からもわかるように、各要素にstyle属性をインラインで渡して定義するスタイルを指します。

この方法は、各スタイルの再利用性を低下させ、可読性も非常に低くなるため、推奨されません。

以下の例では、letter-spacingスタイルによって、テキストの各文字の間に15pxの間隔が設定されています。

<p style="letter-spacing:15px">
      Inline Style
  </p>

styleタグを使用する

2. <style>タグの間に記述する

styleタグの間に定義できます。この方法も、一部の例外（ファーストビューのコンテンツ領域など）を除いて推奨されません。

例を整理しておくため、ここではstyleタグを使い続けます。ただし、私が説明した例外的なケースを除き、アプリケーションでの使用はお勧めしません。

<html>
<head>
<style>
	.root {
		color:red;
	}
</style>
</head>
<body class>
<div class="root">Test</div>
</body>
</html>

外部CSSファイル

3. 外部CSSファイル

では、外部CSSファイルの使い方を学びましょう。

これは、最も頻繁に使用するスタイル定義の方法です。まず、CSSセレクターだけを含むファイルを作成します。

次に、headタグの間にあるlink要素に、対象のCSSファイルを指定します。

以下の例では、href属性を使ってstyle.cssファイルをlink要素に割り当てています。

<link rel = "stylesheet" href = "styles.css">

この方法は、同じCSSファイルを複数のファイルから読み込んだり、再利用性を高めたりするための最適な解決策です。

以下の例では、externalクラスを選択するスタイル定義を作成しています。

.external{

color:red;

font-size:30px;

letter-spacing:10px;

}

以下の例では、externalクラスを選択するスタイル定義を作成しています。

この記述をtest 1.cssという名前のファイルに保存し、link要素に割り当てましょう。

<html>
<head>
<link rel="stylesheet" 
         href="https://coddy.s3.amazonaws.com/css/test_1.css">
</head>
<body>
    <div class="external">Hello</div>
</body>
</html>

おめでとうございます

おめでとうございます 🎉

このセクションでは、CSSにおけるスタイル定義の種類を学びました。

次のセクションでは、id Selectorについて学びます。

スタイルを定義する方法 — イラスト5

よくある質問

「スタイルを定義する方法」レッスンは無料ですか？

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

「スタイルを定義する方法」で何を学びますか？

スタイルを定義する方法 ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「スタイルを定義する方法」レッスンにはどのくらい時間がかかりますか？

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

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

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

← HTML for Kidsに戻る