はじめに
この実験では、HTML の<br>タグを使って Web ページ上で改行を作成する方法を学びます。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080タブを更新して Web ページをプレビューできます。
これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。
HTML ファイルを作成する
index.htmlという名前の新しいファイルを作成し、基本的な HTML 構造を追加します。
<!doctype html>
<html>
<head>
<title>Line Breaks with HTML</title>
</head>
<body></body>
</html>
Web ページにテキストを追加する
HTML ドキュメントの本体にいくつかのテキストを追加します。
<body>
<h1>Welcome to my webpage!</h1>
<p>This is some text on my webpage. I want to create a line break here:</p>
<p>But how do I do it?</p>
</body>
改行には
タグを使用する
2 つの段落の間に改行を追加するには、最初の段落タグの後に<br>タグを追加します。
<body>
<h1>Welcome to my webpage!</h1>
<p>This is some text on my webpage. I want to create a line break here:</p>
<br />
<p>But how do I do it?</p>
</body>
CSS のマージンを使って改行間隔をカスタマイズする
改行によって作成されるスペース量をカスタマイズするには、CSS マージンを使用できます。HTML ファイルに以下の CSS コードを追加して、各改行の上下に 30px のスペースを作成します。
<head>
<title>Line Breaks with HTML</title>
<style>
br {
margin-top: 30px;
margin-bottom: 30px;
}
</style>
</head>
index.htmlファイルを保存し、Web ブラウザで開いて作成した改行を確認します。
まとめ
HTML の<br>タグは、Web ページで改行を作成する簡単な方法です。段落間や必要な箇所に改行を追加する際に使用します。CSS マージンを使えば、改行によって作成されるスペース量を簡単にカスタマイズできます。
