Frontend Academy · レッスン

テキスト、画像、リンク、リスト

見出しや段落でテキストを整え、altテキスト付きの画像を埋め込み、ハイパーリンクと順序付き・順序なしリストを作成します。

レッスン 3/413 ステップ

「テキスト、画像、リンク、リスト」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

見出し：h1からh6まで

HTMLには6つの見出しレベルがあります。文字サイズを変えるためではなく、ドキュメントの構造を作るために使用してください。<h1>はページタイトルとしてページごとに1回、<h2>は大きなセクションに、<h3>はサブセクションに使用します。

<h1>Frontend Development Guide</h1>
<h2>HTML Basics</h2>
<h3>Headings</h3>

段落と<br>

<p>要素はテキストの段落を囲みます。ブラウザーは自動的に上下に余白を追加します。<br>は、住所や詩のように意味のある改行に限って、控えめに使用してください。段落間の余白を作る目的では使用しないでください。

インラインテキスト要素

インライン要素を使って、テキストに意味を与えます。<strong>は重要なテキスト（太字）、<em>は強調（斜体）、<code>はコードスニペット、<mark>はハイライトされたテキスト、<small>は細かい注記に使用します。

<p>Press <kbd>Ctrl+S</kbd> to save. The <code>console.log()</code> function outputs to the <strong>Console</strong> panel.</p>

画像：<img>要素

<img>要素は画像を埋め込みます。src属性にはURLを指定し、altにはスクリーンリーダー用、および画像の読み込みに失敗した場合に表示する代替テキストを指定します。必ず意味のあるaltの値を含めてください。

<img src="/images/hero.webp"
     alt="A developer typing code on a laptop"
     width="800"
     height="450">

適切なAltテキストの書き方

Altテキストには、画像の内容と目的を伝えます。装飾用の画像（スペーサーや装飾だけを目的とするアイコン）にはalt=""（空の文字列）を指定し、スクリーンリーダーが読み飛ばせるようにします。決してalt="image of"とは書かず、画像に何が表示されているかだけを説明してください。

ハイパーリンク：<a>要素

<a>(アンカー)要素はハイパーリンクを作成します。href属性で移動先のURLを指定します。リンクテキストには移動先の内容を説明する言葉を使い、「ここをクリック」とは決して書かないでください。

<!-- External link -->
<a href="https://mdn.mozilla.org" target="_blank" rel="noopener noreferrer">
  MDN Web Docs
</a>

<!-- Internal link -->
<a href="/courses">Browse Courses</a>

<!-- Email link -->
<a href="mailto:hello@example.com">Email Us</a>

target=_blankのセキュリティに関する注意

target="_blank"でリンクを新しいタブに開く場合は、必ずrel="noopener noreferrer"を追加してください。これがないと、開かれたページからリンク元のwindowオブジェクトにアクセスできてしまいます。これはreverse tabnabbingと呼ばれるセキュリティ上の脆弱性です。

順不同リスト：<ul>

項目の順序が重要でない場合は、<ul>（順不同リスト）を使用します。機能一覧、材料、ナビゲーションリンクなどが該当します。各項目は<li>で表します。ブラウザーはデフォルトで箇条書きとして表示しますが、ほとんどの場合はCSSでスタイルを設定します。

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

順序付きリスト：<ol>

順序が重要な場合は、<ol>（順序付きリスト）を使用します。チュートリアルの手順、ランキング、指示などが該当します。項目には自動的に番号が付きます。start属性とreversed属性を使って、番号の付け方を制御できます。

<ol>
  <li>Install Node.js</li>
  <li>Create a new project</li>
  <li>Run npm install</li>
</ol>

説明リスト：<dl>

<dl>（説明リスト）は、用語とその定義または説明をまとめます。用語集、メタデータ（作者名や日付）、キーと値の組などに使用します。<dt>は用語、<dd>は説明を表します。

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the structure layer.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets — the presentation layer.</dd>
</dl>

リストの入れ子

リストは入れ子にして、階層を表現できます。子要素の<ul>または<ol>は、親要素の<li>の中に配置してください。インデントだけを目的に入れ子にするのは避け、CSSを使用してください。

クイックチェック

スクリーンリーダー向けに画像のテキスト説明を提供する属性はどれですか？

対話的なレッスンで答える

振り返り：テキスト、画像、リンク、リスト

ドキュメント構造には見出し要素、段落にはp、画像には意味のあるaltテキストを付けたimg、ナビゲーションには説明的なリンクテキストを付けたa、リストコンテンツにはul/ol/dlを使用します。セマンティクスによって、HTMLはアクセシブルで機械可読になります。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 41
レッスン: 163

無料で学習を始めるコース全体を表示

よくある質問