<link>

<span>

<!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>

/* 問題2. h1タグの色を変更してください */
h1 {
  color: #b71616;
}

/* 問題4. h2タグの色を一部変更してください */
h2 span {
  color: #357e35;
}


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    

    <title>My Page</title>
  </head>

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

/* 問題2. h1タグの色を変更してください */

/* 問題4. h2タグの色を一部変更してください */



    // =======================
    // テストコード
    // =======================
    const answer1 = '<link rel="stylesheet" href="style.css" />';
    const answer2 = 'color: #b71616;';
    const answer3 = '<span>今週の</span>';
    const answer4 = 'color: #357e35;';
    const questions = [
        {
            title: 'linkタグを実装しよう',
            tests: [
                {
                    title: '`link`タグを使用し、`*rel*`属性に`*stylesheet*`、`*href*`属性に`*style.css*`を指定してください',
                    hint: '`index.html`に、`*<link rel="stylesheet" href="style.css" />*`と記述してください',
                    test: () => {
                        isContainTextInEditor('<link');
                        isContainTextInEditor('rel="stylesheet"');
                        isContainTextInEditor('href="style.css"');
                    }
                }
            ]
        },
        {
            title: 'h1タグをスタイリングしよう',
            tests: [
                {
                    title: '`h1`セレクタに対し、*color*プロパティを *#b71616* 指定してください',
                    hint: '`h1`セレクタに、`*color: #b71616;*`と記述してください',
                    test: () => isContainTextInEditor('color: #b71616;', 'style.css', 'h1 {', '}')
                }
            ]
        },
        {
            title: 'spanタグを実装しよう',
            tests: [
                {
                    title: '`h2`タグの中の**今週の**を`span`タグで囲んでください',
                    hint: '`index.html`の`h2`タグの**今週の**を、`*<span>今週の</span>*`と`span`タグで囲んでください',
                    test: () => isContainTextInEditor('<span>今週の</span>')
                }
            ]
        },
        {
            title: 'h2 spanをスタイリングしよう',
            tests: [
                {
                    title: '`h2 span`に対し、*color*プロパティを *#357e35* 指定してください',
                    hint: '`h2 span`に、`*color: #357e35;*`と記述してください',
                    test: () => isContainTextInEditor('color: #357e35;', 'style.css', 'h2 span {', '}')
                }
            ]
        }
    ];


見出しの色を変更しよう

<!DOCTYPE html>

<html>

HTMLを始めてみよう

<head>

<title>

<meta>

<meta charset="utf-8" />

メタ情報を設定しよう

<h1>

<h2~h6>

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

text-align

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

font-size

font-weight

font-family

見出しを装飾しよう

letter-spacing

line-height

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

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

<img>

<img>要素で使われる属性は多く存在していますが、その中でも$(1)属性は必須となっており、この属性では埋め込みたい画像へのパスを設定します。
また、$(2)属性は必須ではありませんが、アクセシビリティのために非常に有用で、スクリーンリーダーがこの属性に示された説明を読み上げることで、画像が何を表しているかをユーザーに伝えることができます。

width

height

画像を表示させよう

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

<div>

background-color

ブロックを作成しよう

border

box-shadow

border-radius

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

<ul>

<li>

<ol>

list-style

リストを作成しよう

実際のホームページ作成に使われるHTMLとCSSの応用技術を学んでいきます。
メタ情報の設定からブロックデザインまで、手を動かして実務に役立つ知識を身につけます。

0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

Web制作コース

【まずはここから🔰】ゼロから始めるWeb制作

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

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

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