TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでpre要素を使って折返し改行する方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLでpre要素を使って折返し改行する方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLでpre要素を使って折返し改行する方法について解説しています。pre要素では空白や改行の情報を保持したまま文字列が表記され、自動での改行はされない仕様になっています。CSSを使った折返し表記の方法を見ていきましょう。

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

HTMLでpre要素を使って折返し改行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

pre要素を使って折返し改行する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

pre要素について

pre要素とは、整形されたテキスト文字のブロックを指します。

プログラミングコードやHTMLコードを表示するときに用いることが多いものの、日本語表記をそのまま表示したいときにも使用するものです。

 

pre要素は半角や全角、改行などもプログラミングコードがそのまま表示することが出来るため、日本語の詩や５７５の俳句、顔文字などのアスキーアートなどの場合にも用いられます。

アスキーアートなどを書くときに注意が必要なのは、一部の特殊文字はそのままブラウザ表記されない点です。

 

<>などは全角で表記する場合は、そのままでも表示されているものの、半角の<> とははプログラミングコードの一部として認識されて表示されません。

その場合は特殊文字コードを用いて、<> の>は&lt; 、<は&gt;を記述して いきます。

 

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

折返し改行する方法

preタグは、プログラミングコードのテキストを横一行で長い文章を記述している場合は折り返しがされません。

575の俳句などではテキストを記述する際に改行を意識していることができるものの、下記の表現は現実的ではありません。

  • 長いテキスト文章を書いている
  • 長文のコピペを入れる
  • その都度改行を入れる

上記の場合には、cssで改行がされるように調整をしていきます。

 

pre要素を使って折返し改行してみよう

cssで表記を調整しましょう。

記述したコードの全てをpreタグで表示する場合には、インデントによる半角も反映されてしまうことに注意しなければなりません。

（htmlファイル）

<pre>

&lt;ここから→

表示したい文字列 表示したい文字列　表示したい文字列　表示したい文字列　表示したい文字列 表示したい文字列　表示したい文字列　表示したい文字列　表示したい文字列 表示したい文字列　表示したい文字列　表示したい文字列　表示したい文字列 表示したい文字列　表示したい文字列　表示したい文字列

→ここまで&gt;

</pre>

 

（cssファイル：インデント分の半角も表示させる場合）

pre {

white-space: pre-wrap;

}

（cssファイル：インデント分の半角を非表示にする場合）

pre {

white-space: pre-line;

}

 

執筆してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。

WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

HTMLでpre要素を使って折返し改行する方法がよく分かったので良かったです！

田島悠介

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

大石ゆかり

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

 

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

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

記事を検索

関連するキーワード

関連する記事

HTMLでよく使う数学記号を現役デザイナーが解説【初心者向け】

HTMLでよく使う数学記号について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTML...
HTML

HTMLでaddressタグを使って連絡先を表示する方法を現役エンジニアが解説【初心者向け】

HTMLでaddressタグを使って連絡先を表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
HTML

HTMLでコメントを書く方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLでコメントを書く（コメントアウトする）方法につい...
HTML

fontタグの使い方！HTMLでフォントサイズを指定する方法【初心者向け】現役Webデザイナーが解説

HTMLでフォントサイズを指定する方法について解説しています。 初心者でも簡単にフォントサイズや色を指定できるので、ぜひ書き方を覚えておくと良いでしょう。...
HTML

HTMLで文字エンコードを指定する方法を現役デザイナーが解説【初心者向け】

HTMLで文字エンコードを指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそ...
HTML

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

HTMLのtextarea要素の使い方について解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が...
HTML

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

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

PHPで配列を結合する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPではさまざまな方法で配列を結合できますので、この記事では用途に合わせた使い分けについて解説しています。 目次pre要素について折返し改行する方法pre要素を使って折返し改行してみよう執筆してくれたメンター そもそも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

strstr関数の使い方！PHPで文字列を検索する方法【初心者向け】

PHPで文字列の中から特定の文字列を探す場面というのは比較的多いかと思います。 文字列を検索する方法はいろいろありますが、今回は「strstr関数」「strpos関数」「preg_match関数」について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 strstr・・・区切り文字の前後の文字列を取得します。 strpos・・・文字列が最初に見つかる位置を取得します。 preg_match・・・正規表現で文字列を検索します。 すべての関数の使い方を覚える必要はありませんが、1つでも書き方を覚えておくといざという時に便利でしょう。 目次pre要素について折返し改行する方法pre要素を使って折返し改行してみよう執筆してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   大石ゆかり PHPで文字を探すプログラムを作りたいんですけど、どうすればいいんでしょうか。 田島悠介 どうして文字を探したいのかな？ 何かの文字で区切っているから？それとも文字の位置を探したい？ 大石ゆかり ええと、文字を探す方法がそんなにいろいろあるんですか？ 田島悠介 そうなんだ。PHPではいろんな文字列の検索方法があるよ。 まずは、区切り文字で検索する方法から見てみよう！   区切り文字で分けて検索 – strstr関数 strstr関数は対象の文字列から検索文字列を探し、見つかったら検索文字列から対象の文字列の最後までを返します。 区切る文字列を境にして文字列を取得したいときに使えます。 構文 検索対象の一部分の文字列 = strstr(検索対象の文字列, 検索文字列, [検索文字列より前の部分を取得するか]) 第1引数は検索文字を探し出す対象の文字列です。 第2引数は検索する文字列です。 検索文字列が半角のアルファベットの場合は、大文字小文字を区別して検索されます。 第3引数は省略でき、検索文字より前の部分を返したい場合にtrueを指定しますが、標準ではfalseつまり検索文字より後の部分を取得します。 戻り値は検索文字列が検索対象の文字列から見つかったときに、検索文字列を含む文字から検索対象の文字列の最後までの文字列を返します。 たとえば、「dog&cat」の文字列から「&」を検索した場合、「&cat」が戻り値として返ります。 ただし第3引数にtrueが指定されている場合は、検索文字を含まない前の部分を返します。 もし検索文字が見つからなかったときはfalseを返します。 ※ある文字列中に別の文字列が存在するかどうかを確認したいだけならstrpos関数またはstr_contains関数（PHPの新しいバージョン8で使用可能)を使います。 ※大文字小文字を区別しないで検索したい場合は「stristr関数」を使うことで実現できます。   strstr関数の使い方 strstr関数を使ってある文字列で区切った文字列の分割をしてみましょう。 ソースコード フルネーム「山田 太郎」を半角スペースで姓と名に分けて出力するプログラムです。 <?php //検索文字列（半角スペース） $search = ' '; //対象文字列（空白で区切られたフルネーム） $target = '山田 太郎'; echo "対象文字列：$target<br>"; //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); //空白を削除（「 太郎」->「太郎」） $firstName = trim($firstName); //姓の取得（空白より前） $lastName = strstr($target, $search, true); //検索結果はあるか if($firstName != false || $lastName != false){ //姓名の出力 echo "姓：$lastName<br>"; echo "名：$firstName"; } else { echo "文字が見つかりませんでした。"; } ?> ※ダブルクォーテーションで変数を囲うと、“$変数名”で変数の値を展開して出力できます。変数の展開について詳しくは公式ドキュメント「変数のパース」をご覧ください。 ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。 表示結果 解説 //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); 検索対象の文字列（$target）から検索文字（$search）が見つかったところより後ろの文字列を取得します。 検索対象の文字列
PHP

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

PHPで改行をする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPプログラム側で改行コードを実装することで、変数などを利用した表示結果をわかりやすく実装できます。 実務でも改行コードを利用した実装をしますので、ぜひ書き方を覚えておきましょう。 目次pre要素について折返し改行する方法pre要素を使って折返し改行してみよう執筆してくれたメンター そもそも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

HTMLでpreタグを使ってエスケープ処理する方法を現役デザイナーが解説【初心者向け】

HTMLでpreタグを使ってエスケープ処理する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 preタグを使ってエスケープ処理する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 preタグについて preタグを使うメリットとよく使われるケース エスケープ処理した文字列を表示する方法 preタグを使ってエスケープ処理してみよう   preタグについて preタグとは、改行や半角スペースをそのまま反映させることができるものになります。preタグの「pre」は「preformatted text」の略になります。日本語では「整形済テキスト」という意味です。   [PR] Webデザインで副業する方法とはpreタグを使うメリットとよく使われるケース HTMLでは通常、改行や半角スペースを挿入してもページのプレビューには反映されません。しかしながらこのpreタグを利用すれば改行や半角スペースを挿入することができます。 ページにプログラムのコードや詩などを掲載する上で必須のタグとなります。   エスケープ処理した文字列を表示する方法 preタグを用いて文字列をエスケープするためには以下のように記述します。 <pre>エスケープテキスト</pre>   preタグを使ってエスケープ処理してみよう 実際に、preタグを用いてエスケープ処理をしてみましょう。まずは、詩を掲載する場合の例です。 <pre> 雨ニモマケズ 風ニモマケズ 雪ニモ夏ノ暑サニモマケヌ 丈夫ナカラダヲモチ 慾ハナク 決シテ瞋ラズ イツモシズカニワラッテイル </pre> このように 、詩をpreタグで囲むことでエスケープすることができます。次に、プログラムのコードを掲載したい場合の例です。   <pre> <code> function Hello() {   console.log("Hello"); } Hello(); </code> </pre>   監修してくれたメンター 夛田武広 Vue.jsをメインにJavaScriptフレームワークのプロジェクトに携わる。 また、サーバーサイドもRubyやPHPを中心に得意としております。 TechAchademyではフロントエンド、Webアプリケーションコースを担当。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

HTMLでコードを表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLでコードを表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次pre要素について折返し改行する方法pre要素を使って折返し改行してみよう執筆してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLでコードを表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   HTMLでコードを表示する方法 <code>~</code>で囲む codeタグは、プログラミングのソースコードやコンピューター用語を表示するタグです。 タグで囲まれた部分がコードであるということを意味します。 ソースコードをそのまま書いてもいいですが、それだと読む側にとってはわかりにくいですよね。 以下のように文章中のコードをcodeタグで囲むことで、囲んだ部分の文字が変わり、コードであるということを明示できます。 <p>If you try to execute the <code>drive()</code> function on the <code>vehicle</code> object, it goes on.</p>   大石ゆかり コードの説明なんて、IT系のサイトじゃないと使わなさそうですね～。 田島悠介 そうだね。普通のサイトではあまり使わないタグかもしれないね。 大石ゆかり 複数行のコードの場合もcodeタグを使うんですか？ 田島悠介 複数行のコードの場合は、preタグを使うことが多いよ。 preタグは、HTMLで入力したとおりに表示させることができるんだ。 今から文章を改行する方法と、preタグについてもそれぞれ説明するね。   文章の途中で改行する方法 改行したい部分に<br>を書く エディタなどでHTMLに文章を入力する際、ただEnterキーを押すだけではブラウザの表示は改行されず、ひと続きの長い文章になってしまいます。 そのため、文章を改行したい部分にはbrタグを書く必要があります。 なお、brタグは閉じタグを持たないタグのため、開始タグ単独で使うことができます。 以下のように文章中の改行したい位置にbrタグを書きましょう。 <p>brタグを使って改行を入れることにより、長い文章も読みやすくなります。<br> 改行したい部分にbrタグを入れてみましょう</p> brタグを書いた箇所が改行されました。   [PR] Webデザインで副業する方法とは入力したとおりに表示させる方法 <pre>~</pre>で囲む 複数行のコードをエディタで入力したとおりに表示させたい場合があります。 そんな時は、preタグで囲むことでエディタで入力したとおりにブラウザで表示されます。 つまり、改行・インデント（字下げ）・半角スペースなどがそのまま表示されます。 以下は表示例です。 preタグで囲まれた部分は、改行やインデント（字下げ）がそのまま表示されています。 プログラムコードをそのまま表示させたいときにpreタグを使うと、長いプログラミングコードでもすっきりと書くことができます。   大石ゆかり あれ？preタグの中にHTMLタグを書いたんですが、何も表示されないんですけど・・・。 田島悠介 preタグでも「< 」や「 > 」や「 & 」は特殊文字として認識されるから、それぞれ「&lt;」「&gt;」「&amp;」のように置き換えて書く必要があるよ。 大石ゆかり そうなんですか～。 てっきり、そのまま表示されるとばかり思ってました。 田島悠介 後、preタグはソースコード以外にも、アスキーアートのような文字で絵や地図を表現したりする場合にも使われるんだよ。   まとめ 今回はHTMLでコードを表示する方法をご紹介しました。 プログラミングコードは英単語を基にして開発されたものなので、英文中にコードが混ざっているとパッと見ではわかりづらかったりします。 文章中のコードはcodeタグを、複数行にわたるコードの場合はpreタグを使うことにより、言葉としての文字とプログラミングコードとしての文字をわかりやすく区別することができるでしょう。 さらにHTMLを学びたい場合は、HTMLで強調タグと区切り線を使う方法も合わせてご覧ください。   HTMLを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
HTML

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

CSSのwhite-spaceの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   目次pre要素について折返し改行する方法pre要素を使って折返し改行してみよう執筆してくれたメンター   そもそも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でpre要素を使って折返し改行する方法を現役エンジニアが解説【初心者向け】