ホームに戻る
HTML コース
Webページの構造を作るHTMLを基礎から学びましょう
初
初級
無料で学習可能
初級HTML基礎
問題1: 初めてのHTMLページ
基本的なHTML文書の構造を完成させましょう！
以下のタスクを完成させてください：
📝 タスク1: ____にDOCTYPEを入れてHTML5文書であることを宣言
📝 タスク2: ____にlangを入れて文書の言語を指定
📝 タスク3: ____にcharsetを入れて文字エンコーディングを指定
📝 タスク4: ____にtitleを入れてページタイトルを定義
📝 タスク5: ____にh1を入れて見出しを作成
注意：すべての____を適切なHTMLタグや属性で置き換えてください。
初級HTML基礎
問題2: 見出しタグの使い方
見出しタグで階層構造を作成しましょう！
以下のタスクを完成させてください：
📝 タスク1: ____にh1を入れてメインタイトルを作成
📝 タスク2: ____にh2を入れてセクションタイトルを作成
📝 タスク3: ____にh3を入れてサブセクションタイトルを作成
注意：すべての____を適切なHTMLタグで置き換えてください。
初級HTML基礎
問題3: 段落と改行
段落と改行の使い方を学びましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にpを入れて最初の段落を作成
📝 タスク2: 2番目の____にpを入れて2番目の段落を作成
📝 タスク3: 3番目の____にbrを入れて「これは別の段落です。」と「改行が含まれています。」の間に改行を追加
注意：すべての____を適切なHTMLタグで置き換えてください。
初級HTML基礎
問題4: テキストの強調と装飾
テキストの強調と装飾の使い方を学びましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にstrongを入れて「重要なお知らせ」を強調
📝 タスク2: 2番目の____にemを入れて「注目してください」を強調
📝 タスク3: 3番目の____にmarkを入れて「期間限定」をハイライト
注意：すべての____を適切なHTMLタグで置き換えてください。
初級HTML基礎
問題5: 基本的なリスト
リストの作り方を学びましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にulを入れて順序なしリストを作成
📝 タスク2: 各項目の____にliを入れてリスト項目を作成
📝 タスク3: 最後の____にolを入れて順序付きリストを作成
注意：すべての____を適切なHTMLタグで置き換えてください。
初級HTML基礎
問題6: リンクの基本
リンクの基本的な使い方を学びましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にaを入れてリンクタグを作成
📝 タスク2: 2番目の____にhrefを入れてリンク先を指定
📝 タスク3: 3番目と4番目の____も同様にaとhrefを入れる
注意：すべての____を適切なHTMLタグや属性で置き換えてください。
初級HTML基礎
問題7: 画像の表示
画像の表示方法を学びましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にimgを入れて画像タグを作成
📝 タスク2: 2番目の____にsrcを入れて画像のURLを指定
📝 タスク3: 3番目の____にaltを入れて代替テキストを指定
📝 タスク4: 2つ目の画像も同様に、4番目にimg、5番目にsrc、6番目にaltを入れる
注意：すべての____を適切なHTMLタグや属性で置き換えてください。
初級HTML基礎
問題8: 画像リンク
画像をクリックできるリンクにする方法を学びましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にaを入れてリンクタグを作成
📝 タスク2: 2番目の____にhrefを入れてリンク先を指定
📝 タスク3: 3番目の____にimgを入れて画像タグを作成
📝 タスク4: 4番目の____にsrcを入れて画像URLを指定
📝 タスク5: 5番目の____にaltを入れて代替テキストを指定
注意：すべての____を適切なHTMLタグや属性で置き換えてください。
初級HTML基礎
問題9: リンクの属性
リンクを新しいタブで開く方法を学びましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にhrefを入れてリンク先を指定
📝 タスク2: 2番目の____にtargetを入れて新しいタブで開く設定
📝 タスク3: 3番目の____にrelを入れてセキュリティ設定
注意：すべての____を適切な属性名で置き換えてください。
初級HTML基礎
問題10: div要素の使い方
divを使ってコンテンツをグループ化する方法を学びましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にdivを入れてコンテナ要素を作成
📝 タスク2: 2番目の____にclassを入れてクラス属性を指定
📝 タスク3: 3番目の____にh2を入れて見出しを作成
📝 タスク4: 4番目の____にpを入れて段落を作成
注意：すべての____を適切なHTMLタグや属性で置き換えてください。
初級HTML基礎
問題11: span要素の使い方
spanを使ってテキストの一部をマークアップする方法を学びましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にspanを入れてインライン要素を作成
📝 タスク2: 2番目の____にclassを入れてクラス属性を指定（highlight）
📝 タスク3: 3番目の____にspanを入れてインライン要素を作成
📝 タスク4: 4番目の____にclassを入れてクラス属性を指定（sale）
注意：すべての____を適切なHTMLタグや属性で置き換えてください。
初級HTML基礎
問題12: クラスとID属性
クラスとID属性の使い方を学びましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にidを入れてID属性を指定（header）
📝 タスク2: 2番目の____にclassを入れてクラス属性を指定（main-section）
📝 タスク3: 3番目の____にclassを入れてクラス属性を指定（title）
📝 タスク4: 4番目の____にidを入れてID属性を指定（content）
📝 タスク5: 5番目の____にclassを入れてクラス属性を指定（article）
📝 タスク6: 6番目の____にclassを入れてクラス属性を指定（text）
注意：すべての____を適切な属性名で置き換えてください。
初級HTML基礎
問題13: 引用とコード表示
引用とコードの表示方法を学びましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にblockquoteを入れて引用ブロックを作成
📝 タスク2: 2番目の____にciteを入れて引用元を表示
📝 タスク3: 3番目の____にcodeを入れてインラインコードを表示
📝 タスク4: 4番目の____にpreを入れて整形済みテキストブロックを作成
📝 タスク5: 5番目の____にcodeを入れてコードブロックを作成
注意：すべての____を適切なHTMLタグで置き換えてください。
初級HTML基礎
問題14: 日時と略語
日時と略語の意味的なマークアップを学びましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にtimeを入れて日時要素を作成
📝 タスク2: 2番目の____にdatetimeを入れて日時属性を指定
📝 タスク3: 3番目の____にabbrを入れて略語要素を作成
📝 タスク4: 4番目の____にtitleを入れて略語の完全形を指定
注意：すべての____を適切なHTMLタグや属性で置き換えてください。
初級HTML基礎
問題15: 定義リストと連絡先情報
定義リストと連絡先情報の意味的なマークアップを学びましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にdlを入れて定義リストを作成
📝 タスク2: 2番目と4番目の____にdtを入れて用語を定義
📝 タスク3: 3番目と5番目の____にddを入れて説明を追加
📝 タスク4: 最後の____にaddressを入れて連絡先情報を作成
注意：すべての____を適切なHTMLタグで置き換えてください。
初級HTML基礎
問題16: 基本的なフォーム
フォームの基本構造を学びましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にformを入れてフォームを作成
📝 タスク2: 2番目の____にinputを入れて入力フィールドを作成
📝 タスク3: 3番目の____にtypeを入れて入力タイプを指定（text）
📝 タスク4: 4番目の____にnameを入れて名前属性を指定（username）
📝 タスク5: 5番目の____にplaceholderを入れてプレースホルダーを指定
📝 タスク6: 6番目の____にbuttonを入れて送信ボタンを作成
📝 タスク7: 7番目の____にtypeを入れてボタンタイプを指定（submit）
注意：すべての____を適切なHTMLタグや属性で置き換えてください。
初級HTML基礎
問題17: 様々な入力タイプ
様々な入力タイプを使ってフォームを作成しましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にemailを入れてメールアドレス入力欄を作成
📝 タスク2: 2番目の____にpasswordを入れてパスワード入力欄を作成
📝 タスク3: 3番目の____にnumberを入れて数値入力欄を作成
初級HTML基礎
問題18: ラベルとフォームコントロール
ラベル要素を使ってアクセシブルなフォームを作成しましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にlabelを入れてラベル要素を作成
📝 タスク2: 2番目の____にid="username"を入れてfor属性と対応させる
📝 タスク3: 3番目と4番目の____にlabelを入れてチェックボックスを囲む
初級HTML基礎
問題19: 選択肢の提供
選択UI要素の使い方を学びましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にselectを入れてドロップダウンリストを開始
📝 タスク2: 2番目と3番目の____にoptionを入れて選択肢を作成
📝 タスク3: 4番目の____にselectを入れてドロップダウンリストを終了
📝 タスク4: 5番目と6番目の____にradioを入れてラジオボタンを作成
初級HTML基礎
問題20: 基本的なテーブル
テーブルの基本構造を学びましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にtableを入れてテーブルを作成
📝 タスク2: 2番目の____にcaptionを入れてタイトルを追加
📝 タスク3: 3番目の____にtheadを入れてヘッダー部分を作成
📝 タスク4: 4番目の____にtbodyを入れてボディ部分を作成
📝 タスク5: 5番目の____にtdを入れて「田中」のデータセルを作成
📝 タスク6: 6番目の____にtdを入れて「営業部」のデータセルを作成
初級HTML基礎
問題21: フォームの無効化と読み取り専用
フォーム要素の無効化（disabled）と読み取り専用（readonly）属性を学びましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にdisabledを入れて、テキスト入力を無効化
📝 タスク2: 2番目の____にreadonlyを入れて、メール入力を読み取り専用に
📝 タスク3: 3番目の____にdisabledを入れて、ボタンを無効化
📝 タスク4: 4番目の____にdisabledを入れて、セレクトボックスを無効化
📝 タスク5: 5番目の____にreadonlyを入れて、テキストエリアを読み取り専用に
📝 タスク6: 6番目の____にdisabledを入れて、チェックボックスを無効化
中
中級
無料で学習可能
中級セマンティックHTML
問題22: header要素
header要素を使ってページヘッダーを作成しましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にheaderを入れてヘッダー要素を開始
📝 タスク2: 2番目の____にnavを入れてナビゲーション要素を開始
📝 タスク3: 3番目の____にnavを入れてナビゲーション要素を終了
📝 タスク4: 4番目の____にheaderを入れてヘッダー要素を終了
中級セマンティックHTML
問題23: アクセシブルなナビゲーション
nav要素を使ってアクセシブルなナビゲーションを作成しましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にnavを入れてナビゲーション要素を開始
📝 タスク2: 2番目の____にnavを入れてナビゲーション要素を終了
中級セマンティックHTML
問題24: コンテンツ構造
main、section、article要素を使ってコンテンツを構造化しましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にmainを入れてメインコンテンツ領域を開始
📝 タスク2: 2番目の____にsectionを入れてセクションを開始
📝 タスク3: 3番目の____にarticleを入れて最初の記事を開始
📝 タスク4: 4番目の____にarticleを入れて最初の記事を終了
📝 タスク5: 5番目の____にarticleを入れて2番目の記事を開始
📝 タスク6: 6番目の____にarticleを入れて2番目の記事を終了
📝 タスク7: 7番目の____にsectionを入れてセクションを終了
📝 タスク8: 8番目の____にmainを入れてメインコンテンツ領域を終了
中級セマンティックHTML
問題25: aside要素
aside要素を使って補足情報を配置しましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にmainを入れてメインコンテンツ領域を開始
📝 タスク2: 2番目の____にarticleを入れて記事を開始
📝 タスク3: 3番目の____にarticleを入れて記事を終了
📝 タスク4: 4番目の____にasideを入れて補足情報を開始
📝 タスク5: 5番目の____にasideを入れて補足情報を終了
📝 タスク6: 6番目の____にmainを入れてメインコンテンツ領域を終了
中級セマンティックHTML
問題26: footer要素
footer要素を使ってフッター情報を構造化しましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にfooterを入れてフッター要素を開始
📝 タスク2: 2番目の____にsectionを入れて会社情報セクションを開始
📝 タスク3: 3番目の____にsectionを入れて会社情報セクションを終了
📝 タスク4: 4番目の____にsectionを入れて連絡先セクションを開始
📝 タスク5: 5番目の____にsectionを入れて連絡先セクションを終了
📝 タスク6: 6番目の____にfooterを入れてフッター要素を終了
中級レスポンシブHTML
問題27: viewport metaタグ
viewport metaタグを使ってモバイル対応の基本設定をしましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にviewportを入れてname属性を設定
📝 タスク2: 2番目の____にwidth=device-width, initial-scale=1.0を入れてcontent属性を設定
中級レスポンシブHTML
問題28: picture要素とレスポンシブ画像
picture要素を使ってレスポンシブ画像を実装しましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にpictureを入れて画像グループを開始
📝 タスク2: 2番目の____にsourceを入れて大画面用の画像を指定
📝 タスク3: 3番目の____にsourceを入れて中画面用の画像を指定
📝 タスク4: 4番目の____にpictureを入れて画像グループを終了
中級レスポンシブHTML
問題29: figureとfigcaption
figureとfigcaptionを使って画像とキャプションを関連付けましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にfigureを入れて図表要素を開始
📝 タスク2: 2番目の____にfigcaptionを入れてキャプションを開始
📝 タスク3: 3番目の____にfigcaptionを入れてキャプションを終了
📝 タスク4: 4番目の____にfigureを入れて図表要素を終了
中級レスポンシブHTML
問題30: detailsとsummary
detailsとsummaryを使って折りたたみ可能なコンテンツを作成しましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にdetailsを入れて折りたたみ要素を開始
📝 タスク2: 2番目の____にsummaryを入れて見出し要素を開始
📝 タスク3: 3番目の____にsummaryを入れて見出し要素を終了
📝 タスク4: 4番目の____にdetailsを入れて折りたたみ要素を終了
中級レスポンシブHTML
問題31: フォームの高度な機能
フォームの高度な機能を使って複雑な入力フォームを作成しましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にfieldsetを入れてフォームグループを開始
📝 タスク2: 2番目の____にlegendを入れてグループのキャプションを開始
📝 タスク3: 3番目の____にlegendを入れてキャプションを終了
📝 タスク4: 4番目の____にtextareaを入れて複数行テキスト入力を開始
📝 タスク5: 5番目の____にtextareaを入れてテキスト入力を終了
📝 タスク6: 6番目の____にfieldsetを入れてフォームグループを終了
中級アクセシビリティ
問題32: ARIA属性の基本
ARIA属性を使って支援技術への情報提供をしましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にaria-labelを入れてボタンのラベルを指定
📝 タスク2: 2番目の____にaria-expandedを入れて展開状態を示す
📝 タスク3: 3番目の____にroleを入れて要素の役割を指定
📝 タスク4: 4番目の____にaria-liveを入れて動的な更新を通知
中級アクセシビリティ
問題33: フォームのアクセシビリティ
アクセシブルなフォームを設計しましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にaria-labelを入れて必須マークの意味を追加
📝 タスク2: 2番目の____にaria-describedbyを入れて入力フィールドの説明を関連付け
中級アクセシビリティ
問題34: 見出し構造とスキップリンク
見出し構造とスキップリンクを実装しましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にhrefを入れてスキップリンクのリンク先を指定（href="#main-content"）
📝 タスク2: 2番目の____にidを入れてメインコンテンツのIDを指定（id="main-content"）
中級アクセシビリティ
問題35: 複雑なテーブル構造
複雑なテーブル構造を作成しましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にrowspanを入れて地域ヘッダーを2行分に結合（rowspan="2"）
📝 タスク2: 2番目の____にcolspanを入れて年度ヘッダーを3列分に結合（colspan="3"）
📝 タスク3: 3番目の____にscopeを入れてQ1の列スコープを指定（scope="col"）
📝 タスク4: 4番目の____にscopeを入れて大阪の行スコープを指定（scope="row"）
中級アクセシビリティ
問題36: 多言語対応
多言語対応のHTMLページを作成しましょう！
以下のタスクを完成させてください：
📝 タスク1: 最初の____にlangを入れて英語の段落を指定（lang="en"）
📝 タスク2: 2番目の____にlangを入れてフランス語の引用を指定（lang="fr"）
上
上級
無料で学習可能
上級メディアと高度な要素
問題37: メディア要素の基本
動画と音声要素の基本的な使い方を学びます。
video要素とaudio要素を使って、マルチメディアコンテンツを表示する方法を習得しましょう。
以下のタスクを完成させてください：
📝 タスク1: 最初の____にvideoを入れて動画要素を開始
📝 タスク2: 2番目の____にvideoを入れて動画要素を終了
📝 タスク3: 3番目の____にaudioを入れて音声要素を開始
📝 タスク4: 4番目の____にaudioを入れて音声要素を終了
上級メディアと高度な要素
問題38: データリストと入力補完
datalistを使って入力補完機能を実装しましょう！
datalist要素を使うと、ユーザーに入力候補を提供できます。
以下のタスクを完成させてください：
📝 タスク1: 最初の____にdatalistを入れてデータリスト要素を開始
📝 タスク2: 2番目から5番目の____にoptionを入れて選択肢を作成
📝 タスク3: 6番目の____にdatalistを入れてデータリスト要素を終了
上級メディアと高度な要素
問題39: 進捗表示と測定値
progress、meter、output要素を使って進捗や測定値を表示しましょう！
これらの要素は、ダウンロード進捗、音量調整、ディスク使用量など、視覚的な情報提供に便利です。
以下のタスクを完成させてください：
📝 タスク1: 最初の____にoutputを入れて出力要素を開始
📝 タスク2: 2番目の____にoutputを入れて出力要素を終了
📝 タスク3: 3番目の____にprogressを入れて進捗表示要素を開始
📝 タスク4: 4番目の____にprogressを入れて進捗表示要素を終了
📝 タスク5: 5番目の____にmeterを入れて測定値要素を開始
📝 タスク6: 6番目の____にmeterを入れて測定値要素を終了
上級メディアと高度な要素
問題40: 高度なメディア制御
video要素にtrack要素を追加して、字幕とチャプターを実装しましょう！
track要素を使うことで、動画にアクセシビリティ機能を追加できます。
以下のタスクを完成させてください：
📝 タスク1: 最初の____にpreloadを入れて動画の事前読み込みを設定（preload="metadata"）
📝 タスク2: 2番目の____にkindを入れて日本語字幕の種類を指定（kind="subtitles"）
📝 タスク3: 3番目の____にsrclangを入れて日本語字幕の言語を指定（srclang="ja"）
📝 タスク4: 4番目の____にlabelを入れて英語字幕のラベルを追加（label="English"）
📝 タスク5: 5番目の____にkindを入れてチャプターの種類を指定（kind="chapters"）
上級最新HTML仕様
問題41: iframeと埋め込みコンテンツ
iframe要素を使って、外部コンテンツを安全に埋め込みましょう！
iframe要素を使うと、外部のWebページやコンテンツを自分のページに埋め込むことができます。
以下のタスクを完成させてください：
📝 タスク1: 最初の____にiframeを入れて埋め込み要素を作成
📝 タスク2: 2番目の____にtitleを入れてiframeのタイトルを追加
📝 タスク3: 3番目の____にsandboxを入れてセキュリティ設定を追加
📝 タスク4: 4番目の____にloadingを入れて遅延読み込みを設定
上級最新HTML仕様
問題42: 最新のフォーム機能
HTML5の新しい入力タイプを使って、モダンなフォームを作成しましょう！
HTML5では、color、date、range、fileなど多様な入力タイプが追加されました。
以下のタスクを完成させてください：
📝 タスク1: 最初の____にtypeを入れてカラーピッカーを作成
📝 タスク2: 2番目の____にtypeを入れて日付選択を作成
📝 タスク3: 3番目の____にminを入れて最小日付を設定（1900-01-01）
📝 タスク4: 4番目の____にtypeを入れてスライダーを作成
📝 タスク5: 5番目の____にmaxを入れて最大値を設定（100）
📝 タスク6: 6番目の____にtypeを入れてファイル選択を作成、7番目の____にacceptを入れて画像のみ許可
上級最新HTML仕様
問題43: template要素
template要素を使って、再利用可能なHTMLテンプレートを作成しましょう！
template要素は、ページには表示されないが、JavaScriptから複製して使用できるHTMLコンテンツを定義します。
以下のタスクを完成させてください：
📝 タスク: ____にtemplateを入れてテンプレート要素を作成
上級最新HTML仕様
問題44: dialog要素とモーダル
dialog要素を使って、ネイティブなモーダルダイアログを実装しましょう！
dialog要素は、モーダルやダイアログボックスを簡単に作成できるHTML5の要素です。
以下のタスクを完成させてください：
📝 タスク1: 最初の____にdialogを入れてダイアログ要素を作成
📝 タスク2: 2番目の____にmethodを入れてフォームの動作を設定
上級最新HTML仕様
問題45: loading属性と最適化
loading属性やリソースヒントを使って、ページのパフォーマンスを最適化しましょう！
loading属性やlink要素のrel属性を使うことで、ブラウザのリソース読み込みを最適化できます。
以下のタスクを完成させてください：
📝 タスク1: 最初の____にrelを入れてリソースヒントを設定（rel="preload"）
📝 タスク2: 2番目の____にhrefを入れてフォントのURLを設定（href="https://fonts.googleapis.com/css?family=Roboto"）
📝 タスク3: 3番目の____にasを入れてリソースタイプを指定（as="style"）
📝 タスク4: 4番目の____にloadingを入れて即座読み込みを設定（loading="eager"）
📝 タスク5: 5番目の____にloadingを入れて遅延読み込みを設定（loading="lazy"）
📝 タスク6: 6番目の____にloadingを入れてiframeの遅延読み込みを設定（loading="lazy"）
上級最新HTML仕様
問題46: カスタムデータ属性とMicrodata
カスタムデータ属性と構造化データを使って、意味のあるデータを埋め込みましょう！
data-*属性を使うと独自のデータを要素に付加でき、Microdataを使うと検索エンジンが理解できる構造化データを作成できます。
以下のタスクを完成させてください：
📝 タスク1: 最初の____にdataを入れて記事ID属性を追加（data-article-id="123"）
📝 タスク2: 2番目の____にdataを入れてカテゴリ属性を追加（data-category="technology"）
📝 タスク3: 3番目の____にdataを入れてコンポーネント属性を追加（data-component="rating"）
📝 タスク4: 4番目の____にdataを入れてスコア属性を追加（data-score="4.5"）
📝 タスク5: 5番目の____にitemscopeを入れて構造化データのスコープを定義
📝 タスク6: 6番目の____にitemtypeを入れてスキーマタイプを指定（itemtype="https://schema.org/Person"）
📝 タスク7: 7番目の____にitempropを入れて名前プロパティを指定（itemprop="name"）
📝 タスク8: 8番目の____にitempropを入れて職業プロパティを指定（itemprop="jobTitle"）
📝 タスク9: 9番目の____にitempropを入れて勤務地プロパティを指定（itemprop="workLocation"）