改行 <br>

解説
1. 改行を表現する
2. brタグの書き方

問題に挑戦！

進捗を変更する

このページは無料で始められるオンラインプログラミング学習サービス「DigSkill」の一般公開ページです。
この前後のページを見たい方や学習内容に興味を持たれた方は、こちらをクリックしてコース一覧をご覧ください！

解説

1. 改行を表現する

ソースコード中の改行はブラウザに反映されない

『作ってみよう』を振り返ると、ソースコードに改行を挿入しても、ブラウザには反映されませんでした。（正確には半角スペース1つとして処理されます。）

html_basic/first_step/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMLの学習</title>
</head>
<body>
    学習メモ
    作成したHTMLファイルをブラウザで表示しました。
</body>
</html>

HTMLファイルの文章を改行するには、brタグを記述します。

※br は Break の略です。

2. brタグの書き方

構文：brタグ（改行を表す）

<br>

※brタグに閉じタグは必要ありません。

例）HTMLファイルの文章に改行を入れる

ふるいけや<br>
かわずとびこむ<br>
みずのおと

表示結果｜例）HTMLファイルの文章に改行を入れる

ふるいけや
かわずとびこむ
みずのおと

なお、ソース中の「<br>」後に改行を含めるかどうかは、どちらでも構いません。
ソースの可読性（読みやすさ）に応じて使い分けてください。

ふるいけや<br>
かわずとびこむ<br>
みずのおと

ふるいけや<br>かわずとびこむ<br>みずのおと

問題

実践問題

(1)	VSCodeを起動し、ヘッダーメニューの「ファイル」から、「workspace_html_css」フォルダーを開いてください。
(2)	「workspace_html_css」フォルダー内の、「html_basic」フォルダー内に、「br_tag」フォルダーを新規作成してください。
(3)	「br_tag」フォルダー内に、「index.html」を新規作成し、フッターメニューの「Go Live」ボタンをクリックしてブラウザで表示してください。

設計書（1）

雨ニモマケズ
風ニモマケズ
雪ニモ夏ノ暑サニモマケヌ
サウイフモノニ
ワタシハナリタイ

下記コードを該当ファイルにペーストし、各問に答えてください。

html_basic/br_tag/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>brタグ</title>
</head>
<body>
    <!--
    （問1）「設計書（1）」の通りブラウザで表示されるよう、下記コードに改行を入れてください。 -->
    雨ニモマケズ風ニモマケズ雪ニモ夏ノ暑サニモマケヌサウイフモノニワタシハナリタイ
</body>
</html>

想定結果を表示

解答

（問1）解答を表示

雨ニモマケズ<br>
風ニモマケズ<br>
雪ニモ夏ノ暑サニモマケヌ<br>
サウイフモノニ<br>
ワタシハナリタイ

ソース全文を表示

html_basic/br_tag/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>brタグ</title>
</head>
<body>
    <!--
    （問1）「設計書（1）」の通りブラウザで表示されるよう、下記コードに改行を入れてください。 -->
    雨ニモマケズ<br>
    風ニモマケズ<br>
    雪ニモ夏ノ暑サニモマケヌ<br>
    サウイフモノニ<br>
    ワタシハナリタイ
</body>
</html>