.NET開発者のためのブログメディア
HTMLでの改行コードとは何か？システム開発に活用する方法もあわせて紹介
- SE
- HTMLやWebシステム全体の改行コードで意識しなければならないポイントとは何でしょうか。
- PM
- 見栄えのためにも意図しないところで改行しないようにしなければなりません。また、開発環境によって改行コードが異なる場合があります。
目次
そもそも改行コードとは？
ユーザーだったら、Webシステムを使っていて、何気なく改行するでしょう。しかし開発者となれば、改行には気をつけなければなりません。
文字列の改行するところには、改行コードという見えない特殊文字が入っています。コンピュータの世界で改行コードが統一されていればよいのですが、あいにく、統一されていないのです。
更に、Webシステムでは、様々なウィンドウサイズで閲覧されるために、文字列の改行の扱いに特別な決まりごとがあります。極端な話、パソコンの大画面とモバイルの小さな画面では一行に表示できる文字の数も全然違いますので、任意の場所で文字列を折り返し、また任意の場所で改行して段落を区別する必要があります。その他に、HTMLファイルでは、そのHTMLファイルそのものの改行コードというのも、当然意識しなければなりません。WindowsやMacで開発していても実際に稼働するのがLinuxだったら、HTMLファイルそのものの改行コードが違ってくる場合があるのです。
この記事では、HTMLの改行コードについて解説します。
HTMLでの改行コードとは何か？
HTMLファイル自体は、どんな改行コードで書けばいいのでしょうか。
これについては、明確なルールが定められています。
CR
LF
CR+LF
いすれでも良いのです。
ここで簡単に復習しておくと、Windowsの改行コードはCR+LF、Mac OS XとLinuxの改行コードはLFです。どちらの改行コードを使ってHTMLファイルを表記しても構いません。
ファイルをサーバーに送る時に使うFTP/SFTPにはアスキーモードというのがあり、これを使うと、WindowsマシンでCR+LFで書いたテキストファイル（HTMLファイルもテキストファイルの一種です）をLinuxサーバーに送る際に改行コードをLFに変換してくれます。しかし極端な話、バイナリモードで改行コードをそのままにしてWebシステムにアクセスしても表示は変わりません。また、Windowsマシンで最初からLFを改行コードにしてHTMLファイルを作成しても一向に構いません。
HTMLファイルにおいては、改行コードをとくに気にする必要はありません。
htmlレンダリングエンジンでの改行コード
HTMLファイル（とcssファイル、JavaScriptファイル、画像ファイルなど）はパソコンやモバイルのブラウザのレンダリングエンジンによって解釈され、表示されます。
このとき、どこで折り返すかはレンダリングエンジンが決め、改行はHTMLの改行コードに従って改行します。
Webサイトが改行されるところのコード
HTMLが改行されるところはHTMLファイル内に
<br>
が出現したところです。
他に、ブロック要素（<p>、<div>、<form>など）が終わったところでも改行されます。
単純にHTMLファイル内で改行があったから改行するのではありません。HTMLファイル内の改行は、レンダリングエンジンの改行に全く影響を及ぼしません。
しかし、一点気を付けるべきポイントがあります。HTMLファイル内で文字列の途中に改行があると、少しのスペースを置くレンダリングエンジンも存在するのです。見栄えにこだわるなら、HTMLファイル内に無意味な場所で改行を置くことはやめましょう。
意図しない改行を防ぐために
これはエンジニアの仕事というより、コンテンツ作成者の仕事ですが、HTMLファイルの中で適切に文字列の中に<br>を入れたり、<p>や<div>で囲ったりして、なるべく見やすくするようにすることが大切です。
行頭に一文字だけあって改行というのでは、見栄えが悪いですね。段落を長くすると、こういうことが起きがちです。
ブロック要素が終わったときに改行が入るというのも注意が必要です。特にフォームでは、意図しない表示になりがちです。
フレームワークを使って開発するときなどは、どうしてもそこで改行しなければならない制約があることも多いです。それはエンジニアしか分からない事項なので、デザイナーの方とよく協議してください。結構デザインに影響を及ぼすものです。
HTMLでの改行する際のポイント4つ
HTMLには自動で改行される改行方法と、意図的に改行する方法の2種類の改行があります。
通常、ブロック要素内に文章があれば、その中で自動的に改行が行われます。
しかし、<br>や<pre>タグを使うことで意図的に改行することができます。
1：brタグを使用する
実際に<br>を使用した文章を見ていきましょう。
|
1 2 |
HTMLはbrタグをつかい改行します。 |
brタグの使い方
まずはこの<br>を使った文章のコードを見ていきましょう。
|
1 |
<p> HTMLはbrタグを使い<br> 改行します。</p> |
このように<br> タグの後ろの文章が改行されて、次の行に行くようになっています
brタグを使う場合
<br>タグを使用すると、このように自分の意図した所で文章を改行させることができます。
また<br>は<p>タグと似たような要素をもったタグですが、文章を明示的に改行させる役割を持っています。
brタグを使う時の気を付ける点
<br>タグは、終了タグが不要で単体で使うことができます。
また<br>は改行だけでなく、余白を開けるために利用される場合があります。しかし、それはあまり勧められていません。
<br>タグはユーザー環境などによって行間の大きさが変わってしまうので、余白を開けるためなどには使用しないほうがよいでしょう。
2：preタグを使用する
<br>以外にも<pre>タグという、入力された通りにテキストを表示するタグを折り返すことによって改行することも可能です。
では、<pre>タグについて詳しく紹介していきます。
preタグを使う時の気を付ける点
<pre>タグは本来、整形済みテキストを表示する要素であり、改行するために利用する要素ではありません。
そのため、cssのプロパティーを変更することによって折り返して改行することができるようなります。
3：white-spaceを使用した改行
CSSのプロパティーとして与えられているwhite-space: preというプロパティーを変更することで、折り返し改行をすることができます。
|
1 2 3 |
pre { white-space: pre ; } |
normal:
normal:は、連続した改行や半角スペースは1つの空白になる、要素の右端で行が折り返される、文末の半角スペースや改行、tabは無視されるという、大きく分けて3つの性質を持っています。
|
1 2 3 |
pre { white-space: nomal ; } |
pre:
半角スペース・Tab・改行をそのまま表示し、文字がボックスの横幅に到達しても改行します。またテキスト内で行われた改行も反映されると言った性質を持っています。
|
1 2 3 |
pre { white-space: pre ; } |
pre-line:
連続した半角スペース、Tab、改行を全て1つの半角スペースとして表示したり、ボックスの横幅到達時に改行したりします。さらにソース内の改行も適用されます。
|
1 2 3 |
pre { white-space: pre-line ; } |
pre-wrap:
pre-wrapは改行や半角スペースがブラウザ表示にそのまま反映される、要素の端で行が折り返されるという性質を持っています。
|
1 2 3 |
pre { white-space: pre-wrap ; } |
nowrap:
normalと同様に、連続した改行や半角スペースは1つの空白になる、要素の右端で行が折り返される、文末の半角スペースや改行、tabは無視されるという、大きく分けて3つの性質を持っています。
|
1 2 3 |
pre { white-space: nowwrap ; } |
4：自動的に範囲を決めて行うブロック要素
自動的に範囲を決めてくれるブロック要素として、改行してくれる要素による改行などもできます。
これは先ほどまで紹介していた意図的な改行ではなく、自動改行に分類されます。例としては、<h1>タグや<p>タグなどが挙げられます。
ブロック要素の改行による気を付ける点
これらのタグはブロック要素であることから結果的に改行されましたが、改行を目的に作られたタグではないため、不適切なコードであることが問題点とされています。
またこの改行のやり方はあまり勧められていないため、適切な改行をする方が望ましいでしょう。
CSSの行間調整をした場合
CSSで行間調節をするには、line-heightを指定します。
|
1 2 3 |
p{ line-height: 5; } |
このようにline-heightを指定すると、CSSで行間調整を簡単に行えます。
またこのline-heightの単位には「px」、「em」、「%」などを指定することができます。
その幅に沿って自動的に改行されてしまう
HTMLではなくCSSを使用して行間を変更する理由は、ブロック要素内では、ページ幅に沿って自動的に改行されるからです。
そのため、ページの大きさなどが変わると行間も変わってしまいページのレイアウトが崩れてしまう可能性があるため、CSSで行間調整をする必要があります。
Webシステムで改行コードを意識するべきファイルとは？
しかし、Webシステム内の全てのソースコードが改行コードを意識しなくていいのかとなると、話は違ってきます。
PythonやPHPのソースコードファイルは改行コードを意識しなくても動きます。
しかし、
.htaccess
や
*.cgi
は改行コードを意識する必要があります。Linuxのプロセスが参照するこれらのファイルは、正しく改行コードがLFにされていないと動作しない場合があります。そのOSの種類やバージョン、プロセスの種類やバージョンによりますが、まずはこれらのファイルは改行コードをLFにしておけば間違いありません。
これらのファイルは、自分でゼロから書くというよりも、ネットからベースとなるコードを拾ってきて自分のシステム用に手を加える場合が多いと思いますが、その際、改行コードには十分気を付けるようにしてください。改行コードの違いで動かない場合、極めてデバッグしづらい正体不明のエラーメッセージが出ます。
一般的に、OSの中核に近いファイルはそのOSの改行コードにしなければなりません。Windowsのバッチファイルでも、以前は改行コードをCR+LFにしておかないと動きませんでした。
TextAreaの改行コード
フォームの部品の一つにTextAreaがあります。
<textarea col=5>
入力してください
</textarea>
このコードで複数行の文字列入力が可能なTextAreaができます。
このTextArea内の改行コードには注意が必要です。TextArea内の文字列の改行コードは\nと決まっています。
逆に言うと、TextAreaにJavaScriptから複数行の文字列を設定する際にも、改行コードは\nにしなくてはいけない、ということです。
下記のコードは、ボタンを押すとテキストを設定するコードの例です。
<html>
<body>
<form submit=”set()”>
<textarea id=”area” col=5>
入力して
ください。
</textarea>
<button>デフォルトの文字列に戻す</button>
</form>
<script>
function set() {
document.getElementById(‘area’).innerText = “入力して\nください。”;
}
</script>
</body>
</html>
- SE
- 改行と言っても、見栄えや開発環境など注意すべきことがあるのですね。
- PM
- そのとおりです。htmlでは改行コードを意識して、Webシステムの開発を行うようにしてください。
HTMLでの改行コードについて理解してシステム開発に活用しよう！
この記事では、HTMLの改行コードについて解説しました。
開発者ではなく、モバイルやパソコンの単なるユーザーであれば、改行コードを意識することはありません。改行コードは目に見えないもので、通常の文書作成者が意識することはありません。
しかし開発者であれば意識が必要です。改行コードのせいで文字化けするとか、そういうユーザーに不便を強いるシステムを開発してはならないのです。ユーザーに改行コードを意識させないように意識する、これが開発者です。
Webシステムの改行はWebシステムの使い勝手にダイレクトに影響します。
上手に改行を使い、Webシステムを開発していきましょう。
