TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのbr要素を現役デザイナーが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLのbr要素を現役デザイナーが解説【初心者向け】

初心者向けにHTMLのbr要素について解説しています。これは文章内で改行を入れる際に利用されます。br要素の書き方と、使用する際の注意点について覚えておきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

HTMLのbr要素について解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

br要素について詳しく説明していくね！

大石ゆかり

お願いします！

 

HTMLのbr要素とは

HTMLのbr要素は、文中に改行を生成する為に使用されます。市や住所など、行の分割が必要な場合に使います。終了タグはなく、

<br>

のみ記述します。

 

br要素で改行を入れる方法

br要素を使って改行を入れる場合、次のようにコーディングします。

<p>改行なし</p>
  <p>改行<br>あり</p>

改行を入れたい部分にbr要素を書きます。終了タグは必要ありません。

 

[PR] Webデザインで副業する方法とは

br要素の使用上の注意点

br要素はお手軽に改行を差し込めるため、改行以外の目的で使用することは推奨されていません。例えば、行間を調整する為にbrタグを使用してもユーザーの環境によって大きく表示が変化する可能性があります。

また、改行目的で使用してもユーザーのフォントサイズによって、想定した改行にならないこともあります。そういった場合はline-heightやmarginを使用してcssで表示をコントロールする方が一般的です。

 

実際に書いてみよう

それでは実際に使ってみましょう。以下のコードを書いて、結果を確認してみましょう。

<p>
  Lorem ipsum dolor sit amet,<br>
  consectetuer adipiscing elit.<br>
  Aenean commodo ligula eget dolor.<br>
  Aenean massa. Cum sociis natoque<br>
  penatibus et magnis dis parturient montes,<br>
  nascetur ridiculus mus. Donec quam felis,<br>
</p>

出力結果は以下のようになります。

Lorem ipsum dolor sit amet,

consectetuer adipiscing elit.

Aenean commodo ligula eget dolor.

Aenean massa. Cum sociis natoque

penatibus et magnis dis parturient montes,

nascetur ridiculus mus. Donec quam felis,

以上で解説を終わります。

 

監修してくれたメンター

メンター金成さん

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守～新規受注システム開発まで携わり、JavaScript　Ruby on Rails　PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

HTMLで縦線を引く方法を現役エンジニアが解説【初心者向け】

HTMLで縦線を引く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   ...
HTML

HTMLで2重の取り消し線を引く方法を現役エンジニアが解説【初心者向け】

HTMLで2重の取り消し線を引く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &nbs...
HTML

HTMLでinput要素をp要素と共に使う理由を現役デザイナーが解説【初心者向け】

HTMLでinput要素をp要素と共に使う理由について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLのフォントサイズで最大値・最小値を指定する方法を現役エンジニアが解説【初心者向け】

HTMLのフォントサイズで最大値・最小値を指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
HTML

HTMLで見出しタグと段落タグを使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLの「見出しタグ」と「段落タグ」について解説します。 ...
HTML

HTMLのリンクで別ウィンドウを開く方法を現役エンジニアが解説【初心者向け】

HTMLのリンクで別ウィンドウを開く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そも...
HTML

あわせてよく読まれている記事

今すぐ実践できる！HTMLで改行を行う方法【初心者向け】

HTMLで文字を入力するときに普通に改行を入力したとしても、改行として認識されません。 そのため、HTML初学者の方は戸惑ってしまうことが多々あります。 そこで今回は、HTMLで改行を行う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次HTMLのbr要素とはbr要素で改行を入れる方法br要素の使用上の注意点実際に書いてみよう監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   また、動画でも解説しています。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   改行タグとその書き方 改行を行うときに使うタグは2つあります。 <br>タグ <p>タグ これらの2つの役割と書き方を記載します。   <br>タグ <br>タグはLine Breakの意味で、文字通り改行を行うタグです。 強制的に改行を入れるので、強制改行タグとも呼ばれます。 改行はとても簡単に行うことができます。 改行を行う場合は、その文字内に「brタグ」を挿入することでできます。 ここで一度文章の改行を入れる。<br> //改行タグ このようにとても簡単に改行を行うことができます。 主に文章を読みやすくするために句点「。」で改行を入れるときや、改行した方が見やすくなる場合などに使用します。 たまに<br />という記述で解説しているページも存在しますが、これはXHTMLというHTMLとは少し違った書き方の場合の方法なので、基本的には<br>で改行ができると覚えておいてください。   <p>タグ 一方の<p>タグはParagraphの意味で文節を意味します。 こちらは1行空けて、段落を分ける際などに利用するタグです。 次のような方法で記載します。 <p>文章の文節を表します。</p> <p>文章の次の文節を表します。</p> この場合は段落が分けられて、通常はその間に1行空行が挿入されます。   大石ゆかり brタグはよく知っています。空白をあけたいときに便利ですよね。 田島悠介 あんまり厳密じゃなくてもいいんだけど、brタグは行中の改行っていうのが基本的な意味だったりするんだよ。 大石ゆかり 行を改行するときに使うものだったんですか～。じゃあ、単に空白をあけたい場合はどうすればいいんですか？ 田島悠介 CSSを使うというのが推奨されてるね。   実際に書いてみよう それでは実際に改行してみましょう。 ここでは、以下2つの改行方法を解説します。 <br>タグ <p>タグ これら2つの利用例を記載します。 それでは実際に改行をしてみましょう。   <br>タグ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> 〒 100-0004<br> 東京都<br> 千代田区大手町 </body> </html> 上のように記入すると、1つめの郵便番号と次の東京都の後に改行が入って、住所表示が見やすく表示されます。 スマートフォン対応などで改行をすべて無視して表示したい場合などは、CSSで以下のように指定することで、すべての改行文字を無効化できます。 br { display : none ; }   改行がよく使用される場面としては、inputやlabelの後が挙げられます。 <label for="name">Name:</label><br> <input type="text" id="name" /><br> 初めて見る場合、改行文字がコードをややこしくしているように見えて戸惑ってしまいますが、よく見る形なのでしっかりと覚えておくようにしましょう。   <p>タグ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body>
HTML

ブラウザで見やすくする！PHPで改行処理を行う方法【初心者向け】

PHPで改行をする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPプログラム側で改行コードを実装することで、変数などを利用した表示結果をわかりやすく実装できます。 実務でも改行コードを利用した実装をしますので、ぜひ書き方を覚えておきましょう。 目次HTMLのbr要素とはbr要素で改行を入れる方法br要素の使用上の注意点実際に書いてみよう監修してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   改行する前の状態 PHPの改行にはブラウザ上での改行と、ソースコード内の改行の二種類があります。 まず最初に改行する前の状態です。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <?php echo "文字列1"; echo "文字列2"; ?> </body> </html> ふたつの文字列「文字列1」「文字列2」がechoによって続けて出力されています。   大石ゆかり 田島メンター！ソースコード上の改行とは何でしょうか？HTMLだとbrタグで改行されますよね。 田島悠介 PHPでページに何かを出力した時に、改行を指定しないと、ソースコード上で改行されないんだよ。 大石ゆかり テキストエディタでは、Enterキーを押せば、ソースコード上の改行になってますよね。 田島悠介 そうそう。上のecho関数を2回書いた場合にどうなるのか、例を見てみよう！   ブラウザ上での改行 ブラウザ上ではこのようになります。ふたつの文字列は横に並び、文字列1のすぐ後に文字列2が表示されています。   ソースコード内の改行 ブラウザ上で右クリック→「ページのソースを表示」を選択したときの画面です。ソースコード上でも同じように、ふたつの文字列は続けて表示されており改行はされていません。   ブラウザ上で改行する方法 ブラウザ上での表示においての改行には<br />を使用します。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body>
PHP

PHPの配列でjoinメソッドを使う方法を現役エンジニアが解説【初心者向け】

PHPで配列を結合する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPではさまざまな方法で配列を結合できますので、この記事では用途に合わせた使い分けについて解説しています。 目次HTMLのbr要素とはbr要素で改行を入れる方法br要素の使用上の注意点実際に書いてみよう監修してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   大石ゆかり PHPの配列を結合するにはどうしたらいいですか？ 田島悠介 配列を結合する方法はいろいろあるけど、array_mergeが使えるよ。 ただ連想配列でキーが同じだった場合に値が上書きされるよ。 大石ゆかり 連想配列？キー？上書き？　なんだか難しそうですね・・・ 田島悠介 聞いただけではイメージするのが難しいかもしれないね。 たとえば$sum[5]の「5」の数値が配列の添字、つまりキーだよ。 連想配列はこのキーが文字列の配列だね。 じゃあ、配列を結合する方法を実際のサンプルコードを使って説明するね。 大石ゆかり お願いします！ ※この解説記事では配列のキー（添字）が数値のものを添字配列といい、キーが文字列の連想配列と区別しています。PHPの配列については解説記事「PHPの配列の基本を現役エンジニアが解説【初心者向け】」を、連想配列については解説記事「PHPで連想配列を使う方法【初心者向け】」をご覧ください。   array_mergeで結合する方法 PHPで配列を結合するには、array_merge関数が使えます。 複数の配列をひとつに結合した配列を取得できます。 構文 結合された配列 = array_merge(配列1, 配列2); 配列1の後ろに配列2の要素が追加されて結合された配列が取得できます。 ※引数に指定する配列の数は、ひとつでも3つ以上でも指定できます。 ※結合された配列はarray_merge関数の戻り値で取得します。上記の構文だと配列1そのものが更新されるわけではありません。 配列のキーが同じ要素を結合すると？ 配列が連想配列（キーが文字列の配列）かどうかで結果が異なります。 キーが数値の添字配列の場合は、同じキーがあっても添字がゼロから振りなおされ、要素が追加されていきます。 キーが文字列の連想配列の場合は、同じキーがあると新しい要素に上書きされて追加にはなりません。 添字配列を結合する 配列のキーが数値の添字配列をarray_merge関数で結合すると、すべての要素のキーがゼロから振りなおされて追加されます。 ソースコード 色の名前が入った2つの配列 $colors1と$colors2の要素をarray_mergeで結合し、$colorsに代入します。 $colors1と$colors2の配列はキーが数値のため、結合したときにキーが降り直されます。 <?php $colors1 = array('赤', '緑', '青'); $colors2 = array('シアン', 'マゼンタ', '黄'); //配列を結合 $colors = array_merge($colors1, $colors2); //結合した配列を出力（preタグで改行させる） print_r('<pre>'); print_r($colors); print_r('</pre>'); ?> ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。 表示結果 解説 $colors1 = array('赤', '緑', '青'); $colors1に3つの要素がある配列を代入しています。 配列 $colors1の中身は以下のように0から2のキーがあります。 Array ( [0] => 赤 [1] => 緑 [2] => 青 ) ※配列を作成するときに、値だけ指定すると自動的にゼロから始まる添字がついてキーが作成されます。配列の作成について詳しくは解説記事「PHPの配列の基本を現役エンジニアが解説【初心者向け】」をご覧ください。 $colors2 = array('シアン', 'マゼンタ', '黄'); $colors2にも3つの要素がある配列を代入しており、中身は以下の状態です。 Array ( [0] => シアン [1] => マゼンタ
PHP

改行を自動で！CSSで文字列を折り返しする方法【初心者向け】現役Webデザイナーが解説

今回はCSSで文字列を折り返しする方法を紹介します。   目次 折り返す書き方 実際に書いてみよう   田島悠介 ここでは、文字列の改行方法について勉強していくよ。 大石ゆかり 田島メンター！！改行にも指定するものがあるんですか〜？ 田島悠介 例えば英単語の途中でボックスの右端に到達したとき、その単語の中で折り返すかどうかなどを決めることができるんだ。 代表的な例を見てみよう。 大石ゆかり はい！   折り返す書き方 CSSを使って、1つの要素の中で文章を折り返して表現する方法として以下の2つがあります。 overflow-wrap（文章が領域の端に来た時に、単語の途中で改行するかどうかの設定） word-break（長い単語が領域の端に来た時に、単語の途中で改行するかどうかの設定）   CSSの公式ドキュメントを見ると、このように記載されているはずです。 注意してほしいのは、ここで言う単語 というのは、英文における英単語のこと。   そして、実際に辞書に登録されている英単語かどうかは関係ありません。 英文でスペースなどの記号で区切られている一つのかたまりを、英単語と捉えて動作します。 単語の区切りとして解釈される記号は「スペース」「？」「-」「、」「。」などがあります。   そして日本語は、「単語」や「文章」で説明されている上記の動きとは、まったく異なります。 それぞれ詳しく見ていきましょう。     See the Pen wordbreak by TAKAYOSHI (@lspuwbkv) on CodePen. overflow-wrap 文章が領域の端に来た時に、単語の途中で改行するかどうかの設定です。 単語の途中で改行しない normal と、単語の途中で改行する break-word の2つから選べます。 break-spaces という値も設定できますが、normalを設定した場合と 同じ挙動になります。   実際の動きを見てみましょう。   英文が、表示領域の右端までいったときの挙動が変わります。 normalを選ぶと、次の単語の区切りで改行するため、少しはみ出してしまいます。 break-wordを選ぶと、単語の途中でもはみ出さないように改行します。 日本語は、どちらを選んだとしても、はみ出さないように改行されていますね。   break-wordは、表示領域を絶対にはみ出さないようにしながら、可能な限り「句読点を文頭にしない」など文章を読みやすくなる位置で折り返してくれます。 しかし、親要素の幅がautoの場合や、テーブルには使うことができませんので、注意してくださいね。   overflow-wrapは、以前マイクロソフトの拡張機能としてword-wrapというプロパティ名でした。 CSS標準機能になるにあたり、overflow-wrapというプロパティ名に変わっています。 ただし、古いIEでも動作させるために、word-wrapも合わせて指定したほうが無難です。     CSSサンプルコード p.nomal{ overflow-wrap normal; } p.break{ overflow-wrap: break-word; } word-break 長い単語が領域の端に来た時に、単語の途中で改行するかどうかの設定です。 normal、keep-all、break-all、break-word 4つから選択でき、それぞれ下記のような動きと説明されています。 normal：その言語の習慣的な規則に従って適宜改行する break-all：文字列のどこでも、単語の途中でも改行する keep-all：単語の途中では改行しない break-word：単語の区切りで改行するが、場合によっては単語の途中でも改行する   実際の動きを見てみましょう。   normalは、英語は単語単位ではみ出さないように改行しますが、長い単語ははみ出していますね。 日本語はどこでも改行します。 break-allは、英語日本語どちらも、はみ出さないように、どんな位置でも改行します。 keep-allは、単語の途中で改行しないよう、区切り記号でのみ改行します。 日本語も区切り記号でのみ改行になるので、はみ出してしまいます。 break-wordは、できるだけ単語の区切りで改行するようにしつつ、どうしてもはみ出す場合は単語の途中でも改行しています。   英文を見やすい位置で改行するためには、break-wordがシンプルで使いやすいですね。     CSSサンプルコード1 p.nomal{ word-wrap: break-word; } p.break{ word-wrap: break-word; } CSSサンプルコード2 p.nomal{ word-break: normal; } p.break{ word-break: break-all; } p.keep{ word-break: keep-all; }     田島悠介 word-wrapとword-breakの基本の書き方になるよ。 大石ゆかり ちなみに初期値ではどうなっているんですか？ 田島悠介 両方とも”normal”、単語の途中では改行しない状態だね。 値を変えた場合の状態も画面で確認してみよう。   [PR] Webデザインで副業する方法とは実際に書いてみよう 実際にコードを書いてみましょう。   HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS 折り返し</title> <link rel="stylesheet"
CSS

HTMLで改行でずれるレイアウトの原因と対処法を現役エンジニアが解説【初心者向け】

HTMLで改行でずれるレイアウトの原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 改行でずれるレイアウトの原因と対処法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 HTMLの改行の意味 HTMLの改行の注意点 HTMLの改行とレイアウトの関係 HTMLを改行するとずれるレイアウトの原因と対処法 まとめ   HTMLの改行の意味 HTMLの改行である<br>属性は、テキスト文章の中で改行を行う場合に使用します。改行は文章の区切りとして用います。   [PR] Webデザインで副業する方法とはHTMLの改行の注意点 HTMLはタグを使った構造であるため、以下のようにテキスト上で改行を行ってもWebサイトでは無視されて連続して表示されます。 あいうえお かきくけこ 実行結果は以下のようになります。 あいうえおかきくけこ <br>要素を使用することで改行を行うことが出来ます。 あいうえお<br> かきくけこ 実行結果は以下のようになります。 あいうえお かきくけこ   HTMLの改行とレイアウトの関係 HTMLの改行をレイアウトの調整で使用すべきではありません。HTMLは要素にそれぞれの意味がある言語です。 <br>要素は改行という意味であり、レイアウトを調整する意味はありません。もっとも影響があるのはアクセシビリティです。<br>要素をレイアウトで使用すると、読み上げソフトで誤って改行として認識してしまいます。レイアウトの調整は<p>要素や<div>要素を使い、CSSでmarginを設定して行うようにしましょう。 <br>要素について、詳しくは以下の記事も参考にしてください。 MDN – <br>：改行要素 関連記事：HTMLでbrタグの使い方と正しい改行方法を現役エンジニアが解説【初心者向け】   HTMLを改行するとずれるレイアウトの原因と対処法 前述のとおり、改行は本来の改行としての意味で使用します。なおHTML中に全角空白が存在するとその部分の改行がずれて表示されますので注意しましょう。 それでは<br>要素とレイアウトを使ったサンプルを例で確認してみましょう。文章は青空文庫から「雨ニモマケズ」を引用しています。 青空文庫 – 雨ニモマケズ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="Cache-Control" content="no-cache" /> <title>Sample</title> <style> p { margin-bottom: 0.5rem; } </style> </head> <body> <p> 雨ニモマケズ<br />
HTML

表示をカスタマイズ！CSSのwhite-spaceの使い方【初心者向け】現役エンジニアが解説

CSSのwhite-spaceの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   目次HTMLのbr要素とはbr要素で改行を入れる方法br要素の使用上の注意点実際に書いてみよう監修してくれたメンター   そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   【動画はこちら】 田島悠介 ここではwhite-spaceプロパティについて勉強しよう。 大石ゆかり 田島メンター！！white-spaceは何を行うものなんですか～？ 田島悠介 半角スペースの連続やTabを使ったインデント、改行をどのように扱うかというのを設定するプロパティなんだ。いくつかの値があるので、それぞれどういった処理になるのかを見てみよう。 大石ゆかり 分かりました！   white-spaceとは white-spaceはソース内テキストにおける連続した半角スペース・Tabによるインデント・改行を画面上でどのように表示するかを設定するプロパティです。   white-spaceの書き方 white-spaceは以下のように記述します。 white-space: 値;   値の部分には以下のいずれかを入力します。 normal ソースコード内テキストの連続したホワイトスペース・改行をすべてホワイトスペースとしてまとめます。 ボックスのwidth値に応じてテキストを改行します。   nowrap normal同様、ソースコード内テキストの連続したホワイトスペース・改行をすべてホワイトスペースとしてまとめます。 行の折り返しは行いません。   pre ソース内テキストの連続した半角スペース・Tabによるインデント・改行をそのまま表示します。 行の折り返しは、ソースコード内の改行文字と、 <br> 要素で行います。   pre-wrap ソース内テキストの連続した半角スペース・Tabによるインデント・改行をそのまま表示します。 行の折り返しは、ソースコード内の改行文字と、 <br> 要素と、行ボックスを埋める際に行います。   pre-line ソースコード内テキストの連続したホワイトスペース・改行をすべてホワイトスペースとしてまとめます。 行の折り返しは、ソースコード内の改行文字と、 <br> 要素と、行ボックスを埋める際に行います。   break-spaces preの状態に加えて、widthの値に応じた改行も適用されます。 連続する空白（ホワイトスペース）は、そのまま残ります。 残った空白（ホワイトスペース）の後ろでは、改行する可能性があります。 残った空白（ホワイトスペース）は、min-content size および max-content sizeに影響を与えます。 min-content sizeというのは、widthで指定できる最小幅サイズです。 max-content sizeというのは、widthで指定できる望ましい幅サイズです。 CSSでwidthを指定する方法については、CSSのmin-widthの使い方 を参考にしてみてください。   white-spaceの値比較表 white-spaceの値 改行 空白とタブ テキスト 行末の空白 normal まとめる まとめる 折り返す 除去 nowrap まとめる まとめる 折り返さない 除去 pre そのまま そのまま 折り返さない そのまま pre-wrap そのまま そのまま 折り返す ぶら下げ pre-line そのまま まとめる 折り返す 除去 break-spaces そのまま そのまま 折り返す 折り返す     田島悠介 各値によるスペースの表示方法だよ。 大石ゆかり ちなみに何も指定していない場合はどうなるんですか？ 田島悠介 デフォルトではnormal、つまりすべてを半角スペース1つとして改行はボックスに合わせて行う状態だね。   [PR] Webデザインで副業する方法とは実際にwhite-spaceを書いてみよう 以下のHTMLにwhite-spaceを適用します。 (HTMLとCSSファイルが同じディレクトリ内にあり、外部スタイルシートのファイル名が”sample.css”である場合の例です) HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <p>2つ以上の          半角スペース 　　　　   改行</p> </body> </html> 1行目の”2つ以上の”と”半角スペース”の間に半角スペースを連続して複数入れ、改行した2行目の最初にはTabキーによるインデントを挿入しています。 CSSによって幅200pxのボックス内に配置し、それぞれのwhite-spaceの値を適用させた場合の表示を比較します。   値がnormalの場合 CSS p {width:200px; background-color:#87cefa; white-space: normal; } 画面では以下のように表示されます。 連続した半角スペース、タブのスペース、改行はすべて半角スペース1つとして処理され、ボックスのwidthに合わせて改行されています。   値がpreの場合 CSS p {width:200px; background-color:#87cefa; white-space: pre; } 画面では以下のように表示されます。 ソースコード内で入力された状態がそのまま画面に反映されています。 領域の幅による改行はされません。   値がnowrapの場合 CSS p {width:200px; background-color:#87cefa; white-space: nowrap; } 画面では以下のように表示されます。 normalの時と同様に連続した半角スペース、タブのスペース、改行はすべて半角スペース1つとして処理されますが、領域の幅による改行はされません。   値がpre-wrapの場合 CSS p {width:200px; background-color:#87cefa; white-space: pre-wrap; } 画面では以下のように表示されます。 preの状態に加え、領域による改行がされています。   値がpre-lineの場合 CSS p {width:200px; background-color:#87cefa; white-space: pre-line; } 画面では以下のように表示されます。 normalの状態に加え、ソースによる改行がされています。   まとめ CSSのwhite-spaceを利用すると、ソースコードに記載されたテキストコンテンツの表示を柔軟に変更できます。 具体的には、連続した半角スペース・Tabによるインデント・改行を画面上でどのように表示するかを設定するプロパティです。 CSSでwidthを指定する方法については、CSSのmin-widthの使い方 を参考にしてみてください。   以上、CSSのwhite-spaceについて紹介しました。 気軽に導入できるので、ぜひ試してみてください。   田島悠介 半角スペースの連続・改行・Tabのインデントが入った文字列で、それぞれの値を試してみたよ。 大石ゆかり 1つの半角として扱うかということや、ボックスに合わせて改行するかというのを細かく指定できるんですね。 田島悠介 white-spaceはボックス内においてのスペースの扱いに必要な機能なのでよく覚えておこう。 大石ゆかり 値によってどういう形になるかを頭に入れておきたいですね。ありがとうございました！   CSSを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい CSSを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
CSS

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのbr要素を現役デザイナーが解説【初心者向け】