br、hr、blockquote、pre
改行、テーマの区切り、引用、整形済みテキストを制御します。
「br、hr、blockquote、pre」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
br要素
<br>要素は、テキスト内容内に改行を挿入します。
<p>221B Baker Street<br>
London, NW1 6XE<br>
United Kingdom</p>
<!-- Good use: addresses, poetry, lyrics -->
<!-- Bad use: spacing paragraphs — use margin/padding instead -->brを使う場面
<br>は、改行がコンテンツの一部である場合にのみ使用してください。
- 住所
- 特定の改行を含む詩
- 歌詞
段落間に見た目上の間隔を追加するために<br>を使用しないでください
hr要素
<hr>要素は、コンテンツ間のテーマの区切りを表します。
<p>Chapter One begins here and introduces the characters.</p>
<hr>
<p>Chapter Two starts a new scene entirely.</p>
<!-- hr = thematic shift in content, not just a visual line -->
<!-- Style with CSS: border, color, margin -->CSSによるhrのスタイル設定
<hr>は完全にスタイルを設定できます。
<hr style="border: none; border-top: 2px solid #e0e0e0; margin: 2rem 0;">
<!-- Or in CSS: -->
<!--
hr {
border: none;
border-top: 1px solid #ddd;
margin: 1.5rem 0;
}
-->blockquote要素
<blockquote>は、別の情報源から引用したセクションを示します。
<blockquote cite="https://example.com/article">
<p>The best time to plant a tree was 20 years ago.
The second best time is now.</p>
</blockquote>
<p>— Chinese Proverb</p>
<!-- cite attribute = URL of the source (machine-readable) -->
<!-- cite element inside blockquote = visible attribution -->qによるインライン引用
短いインライン引用には、<blockquote>ではなく<q>を使用してください。
<p>She said <q cite="https://example.com">the meeting is at noon</q>.</p>
<!-- Browser adds quotation marks automatically -->
<!-- blockquote = block-level, full quote -->
<!-- q = inline, short quote within a sentence -->pre要素
<pre>はテキストを等幅フォントで表示し、空白文字を正確に保持します。
<pre>
function hello() {
console.log("Hello!");
}
</pre>
<!-- Spaces, tabs, and newlines are preserved -->
<!-- Default font: monospace -->
<!-- Used for code, ASCII art, or text that depends on spacing -->preとcodeの組み合わせ
コードブロックには<pre>と<code>を組み合わせます。
<pre><code>
const greet = (name) => {
return `Hello, ${name}!`;
};
console.log(greet("World"));
</code></pre>
<!-- pre = preserves whitespace -->
<!-- code = semantic: this is computer code -->
<!-- syntax highlighting libraries like Prism target pre > code -->pre内でのエスケープ
<pre>内の特殊なHTML文字も、エスケープする必要があります。
<pre><code>
<!-- These must be escaped: -->
<div class="box">
<p>Content</p>
</div>
<!-- < = < > = > & = & -->
</code></pre>空白文字の折りたたみ
通常のHTMLでは空白文字が折りたたまれ、複数のスペースや改行は1つのスペースになります。
<p>This has extra spaces.</p>
<!-- Renders as: "This has extra spaces." -->
<pre>This keeps all spaces.</pre>
<!-- Renders exactly as written -->
<!-- To preserve whitespace in p without pre: CSS white-space: pre -->
<p style="white-space: pre-wrap">Preserved newlines</p>空白文字に関する要素のまとめ
クイックリファレンス：
<br>— インラインの改行（住所、詩など）<hr>— テーマ上のセクション区切り<blockquote>— ブロックレベルの引用<q>— インラインの引用<pre>— 空白文字を保持する整形済みテキスト<code>— インラインのコードスニペット
確認問題
記述したとおりに、スペースや改行を含むすべての空白文字を保持する要素はどれでしょうか。
まとめ：br、hr、blockquote、pre
空白文字と引用に関する要素：
<br>— コンテンツ内の改行（間隔を空けるためには使用しない）<hr>— テーマ上のコンテンツ区切り（単なる見た目ではなくセマンティックな区切り）<blockquote cite>— 出典を指定したブロック引用<q>— インラインの引用<pre><code>— 整形済みのコードブロック
よくある質問
「br、hr、blockquote、pre」レッスンは無料ですか？
はい。「br、hr、blockquote、pre」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「br、hr、blockquote、pre」で何を学びますか？
改行、テーマの区切り、引用、整形済みテキストを制御します。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「br、hr、blockquote、pre」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 見出しh1〜h6とその階層
- 段落、em、strong、b、i
- br、hr、blockquote、pre
- span要素とdiv要素