読みやすいコードを書く
読みやすいHTMLの書式設定方法を学びます
「読みやすいコードを書く」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全4レッスンが含まれています。
クリーンなコードが重要な理由
クリーンなコードを書く
次のレッスンへようこそ！今日は、読みやすく整理されたHTMLコードを書く方法を学びます。クリーンなコードにすると、ページの管理や理解が簡単になります。
クリーンなコードが重要なのはなぜ？
クリーンなコードには、次のようなメリットがあります。
- コードを読みやすく理解しやすくする。
- エラーとデバッグにかかる時間を減らす。
- 他の人とより効果的に共同作業できる。
きれいなHTMLを書くためのヒントを学びましょう！
適切なインデントを使う
インデントはコードを整理し、HTML要素の構造を示します。入れ子になった各要素は、数個のスペースまたはタブでインデントします。
例：
ヒント：常に一貫したインデントを使いましょう！
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a paragraph.</p>
</body>
</html>
すべてのタグを閉じる
すべての開始タグに対応する終了タグがあることを確認してください。タグを閉じ忘れると、レイアウトに問題が発生することがあります。
例：
正しい例：
<p>This is a paragraph.</p>
誤った例：
<p>This is a paragraph.
意味のある名前を使う
class属性やid属性を使うときは、目的が分かる意味のある名前を付けます。
例：
ヒント：div1やrandom123のような名前は避けてください。
<p id="welcome-text">Welcome to my website!</p>
<div class="menu">Menu items go here.</div>
コメントを追加する
コメントはコードを説明し、後から他の人（そして自分自身）がコードを理解するのに役立ちます。コメントには<!-- -->構文を使います。
例：
ヒント：コメントは短く、要点をまとめましょう。
<!-- This is a heading -->
<h1>Welcome to My Page</h1>
<!-- This section contains the navigation menu -->
<div class="menu">
<a href="#home">Home</a>
<a href="#about">About</a>
</div>
セマンティックタグを使う
セマンティックタグは、コンテンツの目的を表します。たとえば、次のようなタグがあります。
<header>：ページ上部のセクションやヘッダーに使います。<article>：個々の記事に使います。<footer>：ページ下部のセクションやフッターに使います。
例：
<header>
<h1>Welcome to My Blog</h1>
</header>
<article>
<h2>First Post</h2>
<p>This is my first blog post.</p>
</article>
<footer>
<p>© 2024 My Blog</p>
</footer>
ファイルを整理する
HTML、CSS、JavaScriptのファイルを整理しておきます。次のようなフォルダーを使います。
- images：すべての画像用です。
- css：CSSファイル用です。
- js：JavaScriptファイル用です。
フォルダー構成の例：
project/
├── index.html
├── css/
│ └── styles.css
├── js/
│ └── script.js
└── images/
└── logo.png
クリーンなコードのまとめ
よくできました！
おめでとうございます！整理されたクリーンなHTMLコードを書く方法を学びました。クリーンなコードにすると、プロジェクトの保守や共有が簡単になります。次のレッスンでは、誰にとっても使いやすいWebページにするために、アクセシビリティの基本を学びます。すべての人に配慮したページを作成する準備をしましょう！
よくある質問
「読みやすいコードを書く」レッスンは無料ですか？
はい。「読みやすいコードを書く」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全4レッスンが含まれています。
「読みやすいコードを書く」で何を学びますか？
読みやすいHTMLの書式設定方法を学びます ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML for Kidsを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「読みやすいコードを書く」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML for Kidsレッスンでコードを書いて実行できますか？
はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 読みやすいコードを書く
- アクセシビリティの基礎
- HTMLを検証する
- HTMLコメント