やりたいことから探す 演習問題
「HTML リスト 作り方」「JavaScript map 使い方」など、具体的な検索ワードで探せます。各演習をクリックすると、コードを書いて即確認できる演習ページに飛びます。
演習問題トップへ戻る →HTML 実行 確認 方法 — 体験：実行してみよう
コードはすでに入っています。そのまま「実行」ボタンを押して、プレビューに「Hello World」と表示されることを確認してください。演習の流れを体験する問題です。
HTML 実行 確認 方法、Hello World 表示 演習
HTML h1 書き方 — 最初のHTML
「Hello World」と表示するHTMLを書いてください。上で学んだh1タグを使います。
HTML h1 書き方、h1 タグ 使い方 例、html コード h1 書き方
HTML 段落 追加 方法 — 段落を追加
見出しの下に「はじめてのWebページです。」という段落を追加してください。pタグで囲みます。
HTML 段落 追加 方法、p タグ 書き方 例
HTML リスト 作り方 演習 — リストを作る
好きな果物3つをulとliでリストにしてください。下のひな形の___の部分を書き換えてください。
HTML リスト 作り方 演習、ul li タグ 書き方 例、順序なしリスト 作り方
HTML リンク タグ 書き方 例 — リンクを貼る
「Google」というテキストで、https://google.com へのリンクを作ってください。
HTML リンク タグ 書き方 例、a href 使い方 初心者
HTML 画像 表示 方法 — 画像を表示
https://placehold.co/200x100 の画像を表示してください。altは「サンプル画像」にします。
HTML 画像 表示 方法、img タグ src alt 書き方
HTML 見出し 階層 例 — 見出しの階層
好きなテーマで、h1、h2、h3の3つの見出しを階層順に作ってください。（例：私のページ、好きな映画の紹介など）
HTML 見出し 階層 例、h1 h2 h3 使い方
HTML 番号付きリスト 作り方 — 番号付きリスト
好きな手順やランキングをolとliで3ステップ書いてください。（例：料理の手順、好きなものランキングなど）
HTML 番号付きリスト 作り方、ol li タグ 書き方 例
HTML strong em 使い方 — strongとem
「重要」をstrong、「強調」をemで囲んでください。
HTML strong em 使い方、太字 斜体 タグ
HTML セマンティック header main footer — セマンティックHTML
header, main, footer を使った基本構造を作ってください。mainの中身は自由です。
HTML セマンティック header main footer、HTML5 構造 書き方
HTML nav ナビゲーション 書き方 — ナビゲーション
navタグ内に3つのリンク（ホーム、about、contact）を作ってください。
HTML nav ナビゲーション 書き方、nav タグ リンク 例
HTML div グループ化 使い方 — divでグループ化
2つの要素をそれぞれdivで囲んでください。中身は自由です。（例：カード、ブロックなど）
HTML div グループ化 使い方、div タグ 使い方 例
HTML span 使い方 例 — spanで一部を装飾
「赤い文字」の部分だけspanで囲んでください。
HTML span 使い方 例、span 一部 装飾
HTML テーブル 作り方 — テーブル
2行2列のテーブルを作ってください。セルの内容は自由です。（例：A,B,C,D や 名前,年齢 など）
HTML テーブル 作り方、table tr td 書き方 例
HTML br 改行 タグ — 改行
「1行目」と「2行目」をbrタグで改行してください。
HTML br 改行 タグ、br タグ 使い方
HTML 新しいタブ リンク 開く — 新しいタブで開く
リンクをtarget="_blank"で新しいタブで開くようにしてください。
HTML 新しいタブ リンク 開く、target blank 書き方
CSS 文字色 変える 方法 — 文字色を変える
h1の文字色を青（blue）にしてください。
CSS 文字色 変える 方法、color プロパティ 使い方
CSS 背景色 指定 方法 — 背景色
bodyの背景色を#f5f5f5にしてください。
CSS 背景色 指定 方法、background-color 使い方
CSS padding 余白 付け方 — 余白を付ける
pタグにpadding: 16px を付けてください。
CSS padding 余白 付け方、padding 使い方 例
CSS 中央寄せ 方法 — 中央寄せ
h1を中央寄せにしてください。
CSS 中央寄せ 方法、text-align center
CSS font-size rem 使い方 — フォントサイズ
pのフォントサイズを1.2remにしてください。
CSS font-size rem 使い方、フォントサイズ 指定 方法
JavaScript console.log 使い方 — コンソールに出力
console.logで「Hello」と出力してください。
JavaScript console.log 使い方、コンソール 出力 方法
JavaScript 変数 宣言 方法 — 変数を宣言
nameという変数に好きな値を代入し、console.logで出力してください。
JavaScript 変数 宣言 方法、const 使い方 例
JavaScript 関数 定義 方法 — 関数を定義
greetという関数を定義し、「こんにちは」を返してください。
JavaScript 関数 定義 方法、function return 書き方
JavaScript 配列 作り方 — 配列を作る
fruitsという配列に好きな要素を3つ入れて、console.logで出力してください。
JavaScript 配列 作り方、配列 要素 追加 方法
JavaScript オブジェクト 作り方 — オブジェクト
userというオブジェクトにnameとageを入れて、console.logで出力してください。値は自由です。
JavaScript オブジェクト 作り方、オブジェクト プロパティ 書き方
HTML フォーム 作り方 — フォームの基本
名前入力欄と送信ボタンを持つformを作ってください。inputのnameは「name」に。
HTML フォーム 作り方、form input 書き方 例
HTML label input 紐づけ — labelとinputの紐づけ
「メール」というラベルと、id="email"のinputをforとidで紐づけてください。
HTML label input 紐づけ、for id ラベル 関連付け
HTML article section 使い方 — articleとsection
articleタグ内にsectionを2つ作ってください。各sectionの内容は自由です。
HTML article section 使い方、article section 違い
HTML data属性 使い方 — data属性
divにdata-id="123"とdata-name="test"を付けてください。
HTML data属性 使い方、data-id data-name
HTML チェックボックス 作り方 — チェックボックス
「同意する」というラベル付きのチェックボックスを作ってください。
HTML チェックボックス 作り方、input checkbox 例
CSS border ボーダー 書き方 — ボーダー
divに1pxの実線、色#cccのボーダーを付けてください。
CSS border ボーダー 書き方、border 1px solid
CSS border-radius 角丸 — 角丸
divの角を8px丸くしてください。
CSS border-radius 角丸、角丸 作り方
CSS クラス スタイル 当て方 — クラスでスタイル
.highlightクラスを作り、背景色を黄色にしてください。そのクラスをpタグに付ける。
CSS クラス スタイル 当て方、class 指定 方法
CSS width 幅 指定 — 幅を指定
divの幅を300pxにしてください。
CSS width 幅 指定、width 使い方
CSS hover ホバー 効果 — ホバー効果
aタグにマウスを乗せたとき、文字色を赤にしてください。
CSS hover ホバー 効果、a:hover 使い方
HTML Flexbox 横並び 方法 — Flexboxで横並び
3つのdivをFlexboxで横並びにしてください。
HTML Flexbox 横並び 方法、display flex 使い方
CSS Flexbox 中央寄せ — 中央寄せ
Flexboxでdivを画面中央（水平・垂直）に配置してください。
CSS Flexbox 中央寄せ、justify-content align-items center
CSS Grid 3列 レイアウト — Gridで3列
親divをGridにして、子要素を3列に並べてください。
CSS Grid 3列 レイアウト、grid-template-columns 使い方
CSS gap 間隔 指定 — gapで間隔
Flexboxの子要素間に16pxの間隔を付けてください。
CSS gap 間隔 指定、flex gap 使い方
CSS レスポンシブ 作り方 — レスポンシブ
768px以上で2列、未満で1列になるようにしてください。
CSS レスポンシブ 作り方、media query メディアクエリ
CSS flex-wrap 折り返し — flex-wrap
Flexboxで子要素がはみ出したら折り返すようにしてください。
CSS flex-wrap 折り返し、flex-wrap wrap
CSS space-between 使い方 — space-between
Flexboxで子要素を両端寄せ（間に均等スペース）にしてください。
CSS space-between 使い方、justify-content space-between
CSS Grid カードレイアウト — カードレイアウト
3つのカードをGridで横並びにし、各カードにpaddingとborderを付けてください。
CSS Grid カードレイアウト、grid カード 並べ方
JavaScript if文 書き方 — if文
ageが18以上のとき「成人」、未満のとき「未成年」をconsole.logで出力してください。ageは20。
JavaScript if文 書き方、条件分岐 例
JavaScript for ループ 使い方 — forループ
1から5までをconsole.logで出力してください。
JavaScript for ループ 使い方、forループ 例
JavaScript テンプレートリテラル — テンプレートリテラル
name変数（「太郎」）を使って「こんにちは、太郎さん」とconsole.logで出力してください。
JavaScript テンプレートリテラル、バッククォート 変数 埋め込み
JavaScript 配列 長さ — 配列の長さ
arrの要素数をconsole.logで出力してください。arrは[1,2,3,4,5]。
JavaScript 配列 長さ、length 配列 要素数
JavaScript 配列 先頭 取得 — 配列の先頭
fruitsの最初の要素をconsole.logで出力してください。fruitsは['りんご','みかん','ぶどう']。
JavaScript 配列 先頭 取得、配列 最初 要素 インデックス
JavaScript アロー関数 書き方 — アロー関数
doubleというアロー関数を定義し、引数を2倍して返してください。5を渡して10が出力されること。
JavaScript アロー関数 書き方、アロー関数 例
JavaScript オブジェクト プロパティ 取得 — オブジェクトのプロパティ
userオブジェクトのnameをconsole.logで出力してください。
JavaScript オブジェクト プロパティ 取得、ドット記法 使い方
JavaScript map 使い方 問題 — 配列のmap
numbersの各要素を2倍した新しい配列を作り、console.logで出力してください。numbersは[1,2,3]。
JavaScript map 使い方 問題、配列 map 変換 例
JavaScript 三項演算子 使い方 — 三項演算子
scoreが60以上なら「合格」、未満なら「不合格」を変数resultに代入し、console.logで出力。scoreは70。
JavaScript 三項演算子 使い方、条件 ? 真 : 偽
JavaScript 文字列 結合 方法 — 文字列の結合
firstNameとlastNameを結合して「山田 太郎」とconsole.logで出力してください。
JavaScript 文字列 結合 方法、文字列 連結 例
JavaScript DOM 要素 取得 方法 — 要素を取得
idが「msg」の要素を取得し、そのtextContentを「Hello」に変更してください。
JavaScript DOM 要素 取得 方法、getElementById 使い方
JavaScript クリックイベント 追加 — クリックイベント
idが「btn」のボタンがクリックされたら、console.logで「クリック！」と出力してください。
JavaScript クリックイベント 追加、addEventListener click
JavaScript クラス 追加 方法 — クラスを追加
idが「box」の要素に「active」クラスを追加してください。
JavaScript クラス 追加 方法、classList add
JavaScript 要素 作成 追加 — 新しい要素を作成
pタグを作り、テキストを「新規」にして、idが「container」の要素の子として追加してください。
JavaScript 要素 作成 追加、createElement appendChild
JavaScript querySelector 使い方 — querySelector
idが「list」のul内の最初のliを取得し、そのtextContentをconsole.logで出力してください。
JavaScript querySelector 使い方、querySelector セレクタ
JavaScript querySelectorAll 使い方 — 全要素を取得
idが「list」のul内の全liを取得し、それぞれのtextContentをconsole.logで出力してください。
JavaScript querySelectorAll 使い方、全要素 取得 forEach
JavaScript input 値 取得 — inputの値を取得
idが「name」のinputの値をconsole.logで出力してください。
JavaScript input 値 取得、value 入力値 取得
JavaScript 要素 削除 方法 — 要素を削除
idが「remove-me」の要素をDOMから削除してください。
JavaScript 要素 削除 方法、remove 使い方
JavaScript イベントデリゲーション — イベントデリゲーション
idが「list」の要素のクリックイベントをリッスンし、クリックされたliのtextContentをconsole.logで出力してください。
JavaScript イベントデリゲーション、イベント 委譲 親
JavaScript スタイル 変更 — スタイルを変更
idが「box」の要素の背景色を「lightblue」にしてください。
JavaScript スタイル 変更、style backgroundColor
JavaScript fetch 使い方 — fetchで取得
https://jsonplaceholder.typicode.com/posts/1 からデータをfetchし、titleをconsole.logで出力してください。
JavaScript fetch 使い方、fetch API データ取得
JavaScript fetch エラー 処理 — エラーハンドリング
fetchで取得し、res.okがfalseなら「エラー」とconsole.log、trueならデータのtitleを出力してください。
JavaScript fetch エラー 処理、res.ok エラーハンドリング
JavaScript try catch 使い方 — try-catch
fetchをtry-catchで囲み、エラー時はconsole.logでエラーメッセージを出力してください。
JavaScript try catch 使い方、例外処理 エラー
JavaScript fetch 配列 データ — 配列データの表示
https://jsonplaceholder.typicode.com/posts から取得し、先頭3件のtitleをconsole.logで出力してください。
JavaScript fetch 配列 データ、API 複数取得 表示
JavaScript 非同期 読み込み中 — 読み込み中表示
fetchの前に「読み込み中」、成功後に「完了」をconsole.logで出力してください。
JavaScript 非同期 読み込み中、async await 順序
JavaScript TODO 追加 実装 — TODO追加
inputの値とボタンクリックで、ulにliを追加する処理を書いてください。
JavaScript TODO 追加 実装、DOM 操作 フォーム
JavaScript localStorage 使い方 — ローカルストレージ保存
key「name」でvalue「太郎」をlocalStorageに保存し、読み取ってconsole.logで出力してください。
JavaScript localStorage 使い方、localStorage 保存 読み込み
JavaScript setTimeout 使い方 — タイマー
3秒後に「時間です」とconsole.logで出力してください。
JavaScript setTimeout 使い方、タイマー 遅延 実行
JavaScript カウンター 実装 — カウンター
ボタンクリックでカウントを1増やし、idが「count」の要素に表示してください。
JavaScript カウンター 実装、クリック カウント 表示
JavaScript filter 使い方 問題 — フィルター
配列[1,2,3,4,5]から3以上の数だけをfilterで抽出し、console.logで出力してください。
JavaScript filter 使い方 問題、配列 filter 条件 抽出