← クエスト一覧
プロジェクトの始め方
スライド
1
/
2
とばして問題へ
💻 コード例
実行結果
← 戻る
次へ →
クエストを始める
← クエスト一覧
🌐 Web開発総合
/
Quest 1
/ 10
プロジェクトの始め方
基礎
+10 XP
📖 説明を見る
🏠
📖 課題
💻 コード
結果
今回の課題
index.html に <link> タグで style.css を読み込み、タイトルと段落を表示しよう！
📖 解説を見る
HTML・CSS・JavaScriptの3ファイルを連携させてWebページを作る方法を学びます。
ヒントを見る
<link rel="stylesheet" href="style.css"> を <head> の中に書こう！
🤖 AIに聞く
📄 見本
答えを見る
「答えを見る」を押すと、お手本のプレビューとコードが出ます。
💻 コードエディタ
index.html
style.css
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>My Site</title> <!-- ここにCSSを読み込むlinkタグを書こう --> </head> <body> <h1>My First Project</h1> <p>HTML・CSS・JSで作るWebページ</p> </body> </html>
/* style.css */ body { font-family: sans-serif; background: #f0f4ff; } h1 { color: #4f46e5; }
コードを実行
さいしょから
あなたの出力
正解！ +10 XP
正解！見本と同じになりました。
練習問題へ進む →
クリアをXでシェア
ヒント
実行する
次へ →
🏠 ホームへ
れんしゅうもんだい
☑ 0 / 1 正解
レッスンに戻る
全問正解でクエストクリア！
未挑戦
問題 1: style.css の h1 の color を red に変えてみよう（自由回答）
index.html
style.css
実行 / プレビュー更新
🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
次のクエスト →
コピーしました！
×
先にヒントを見ますか？
ヒントを読むと、自分の力で解けるかもしれません。
ヒントを見る
それでも答えを見る
