![プロゲートのリストレッスンの解説とよくあるミス](https://programmer-life.com/wp-content/uploads/2021/11/プロゲートのリストレッスンの解説とよくあるミス.png)
こんにちは、ひつじのジョージです。
大都会でプログラマーとして10年以上活躍しています。普段は会社員として働いていますが、個人でシステム、Webアプリケーションを複数運用しています。
![](http://programmer-life.com/wp-content/uploads/2021/10/コアラがバグで困る.png)
![](http://programmer-life.com/wp-content/uploads/2021/10/ヒツジがプログラミンをできた.png)
リストのレッスンからは学ぶことが少し増えます。
このレッスンだけでプログラミングの3つの学習要素があります。
- HTMLでリスト表示
- 親要素と子要素
- インデント
インデントは疎かにされがちですが、「読みやすいコード」を書くために非常に重要です。
HTMLタグと同じくインデントのないプログラミングコードはありません。
インデントも疎かにしないようにしましょう!
リストレッスンの答え
リストレッスンでの答えは以下のコードの通りです。
<!-- リストを作成してください --> <ul> <li>HTML</li> <li>PHP</li> <li>Ruby</li> </ul>
このレッスンで以下の内容をマスターしておきましょう!
- HTMLでリスト表示
- 親要素と子要素
- インデント
よくあるミス
リストレッスンから新しく学ぶ「親子要素と子要素」と「インデント」についてのミスが多いです。
慣れるまでは注意して書くようにしましょう。
- ulタグを忘れる
- インデントに全角スペースを使う
![](http://programmer-life.com/wp-content/uploads/2021/10/コアラがバグで困る.png)
![](http://programmer-life.com/wp-content/uploads/2021/10/ヒツジがプログラミンをできた.png)
よくあるミス1:ulタグを忘れる
HTMLでリストを作る時に覚えやすいliタグが出てきてしまって、ulタグをつけ忘れるミスがあります。
ulタグの中にliタグを入れて入れ子構造にしないとリスト表示にはなりません。
<!-- ulタグがない --> <li>HTML</li> <li>PHP</li> <li>Ruby</li>
よくあるミス2:インデントに全角スペースを使う
インデントに全角スペースを使ってしまうミスはプログラミングに慣れた方でもやってしまうことがあります。
このミスは見た目では非常にわかりにくいのでどこでミスをしているのかわかりにくいです。
インデントでは必ず半角スペースを使いましょう。
<!-- インデントがすべて全角スペース --> <ul> <li>HTML</li> <li>PHP</li> <li>Ruby</li> </ul>
まとめ
リストレッスンで学習することは以下のとおりです。
- HTMLでリスト表示
- 親要素と子要素
- インデント
インデントは疎かにされがちですが、「読みやすいコード」を書くために非常に重要です。
HTMLタグと同じくインデントのないプログラミングコードはありません。
インデントも疎かにしないようにしましょう!
リストレッスンから新しく学ぶ「親子要素と子要素」と「インデント」についてのミスが多いです。
慣れるまでは注意して書くようにしましょう。
- ulタグを忘れる
- インデントに全角スペースを使う