← クエスト一覧

クエスト8：番号つきリストを作ろう

スライド 1 / 2
コーデ
💻 コード例
実行結果
← クエスト一覧
🌐 HTML & CSS / Quest 8 / 50

クエスト8：番号つきリストを作ろう

基礎 +10 XP
🏠
今回の課題
好すきな食たべ物ものランキングを <ol> で作つくろう！
📖 解説を見る
🔢 番号ばんごうつきリスト（ol）！

クエスト3では <ul>（●のリスト）を学まなびました。
<ol> を使つかうと番号ばんごうつきリストができます。

✏️ 書かき方かた：
<ol>
  <li>1番目ばんめ</li>
  <li>2番目ばんめ</li>
</ol>

✏️ ネストもできる（リストの中なかにリスト）：
<ul>
  <li>果物くだもの
    <ul><li>りんご</li></ul>
  </li>
</ul>
ヒントを見る
<ol> の中に <li>食べ物</li> を3つ書こう！
📄 見本
「答えを見る」を押すと、お手本のプレビューとコードが出ます。
💻 コードエディタ
正解！見本と同じになりました。
次へ →
🏠 ホームへ

れんしゅうもんだい

☑ 0 / 3 正解 レッスンに戻る

全問正解でクエストクリア！

未挑戦

問題 1: <ul> と <ol> を両方りょうほう使つかって好すきなものを表示ひょうじしよう！（自由じゆう回答かいとう）

🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
未挑戦

問題 2: <ol> の中なかに <ul> を入いれてネストリストを作つくろう！（自由じゆう回答かいとう）

🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
未挑戦

問題 3: CSSで list-style-type: square に変かえてみよう！（自由じゆう回答かいとう）

🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
コピーしました！