<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    <title>My Page</title>
  </head>

  <body>
    <h1>My Page</h1>

    <h2><span>今週の</span>学習内容</h2>
    <p>見出しにはレベルがあり、階層ごとに使い分ける必要がある。</p>
  </body>
</html>


h1 {
  color: #b71616;
  /* 問題1. h1をスタイリングしてください */
  text-align: center;
}

h2 {
  /* 問題2. h2をスタイリングしてください */
  text-align: right;
}

h2 span {
  color: #357e35;
}


text-align

h1 {
  color: #b71616;
  /* 問題1. h1をスタイリングしてください */
}

h2 {
  /* 問題2. h2をスタイリングしてください */
}

h2 span {
  color: #357e35;
}



    // =======================
    // テストコード
    // =======================
    const questions = [
        {
            title: 'h1をスタイリングしてください',
            tests: [
                {
                    title: '`h1`に対し、*text-align*プロパティを使って中央寄せにしてください',
                    hint: '`h1`に、`*text-align: center;*`と記述してください',
                    test: () => isContainTextInEditor('text-align: center;', 'style.css', 'h1 {', '}')
                }
            ]
        },
        {
            title: 'h2をスタイリングしてください',
            tests: [
                {
                    title: '`h2`に対し、*text-align*プロパティを使って右揃えにしてください',
                    hint: '`h2`に、`*text-align: right;*`と記述してください',
                    test: () => isContainTextInEditor('text-align: right;', 'style.css', 'h2 {', '}')
                }
            ]
        }
    ];


見出しの位置を変更しよう

<!DOCTYPE>

<html>

HTMLを始めてみよう

<head>

<title>

<meta>

<meta charset="utf-8" />

メタ情報を設定しよう

<h1>

<h2~h6>

見出しと段落を実装しよう

<link>

<span>

見出しの色を変更しよう

font-size

font-weight

font-family

見出しを装飾しよう

letter-spacing

line-height

段落の字間、行間を変更しよう

<img>

width

height

画像を表示させよう

画像にリンクを設定しよう

<div>

background-color

ブロックを作成しよう

border

box-shadow

border-radius

ブロックの周囲を装飾しよう

<ul>

<li>

<ol>

list-style

リストを作成しよう

HP作成でよく使うHTML・CSSを学ぼう


「HP作成でよく使うHTML・CSSを学ぼう」レッスンの総復習クイズです。

.test {
  font-size: 20px;
  line-height: $(1);
}

HP作成でよく使うHTML・CSSを学ぼうの総復習クイズ

HP作成でよく使うHTML・CSSを学ぼう

見出しの位置を変更しよう

まずは必要なスキルを確認しましょう！