.NET開発者のためのブログメディア
htmlの改行コードとは？htmlの改行コードを理解してシステム開発をしよう！
- SE
- HTMLやWebシステム全体の改行コードで意識しなければならないポイントとは何でしょうか。
- PM
- 見栄えのためにも意図しないところで改行しないようにしなければなりません。また、開発環境によって改行コードが異なる場合があります。
目次
改行コードとは？
ユーザーだったら、Webシステムを使っていて、何気なく改行するでしょう。しかし開発者となれば、改行には気をつけなければなりません。
文字列の改行するところには、改行コードという見えない特殊文字が入っています。コンピュータの世界で改行コードが統一されていればよいのですが、あいにく、統一されていないのです。
更に、Webシステムでは、様々なウィンドウサイズで閲覧されるために、文字列の改行の扱いに特別な決まりごとがあります。極端な話、パソコンの大画面とモバイルの小さな画面では一行に表示できる文字の数も全然違いますので、任意の場所で文字列を折り返し、また任意の場所で改行して段落を区別する必要があります。その他に、htmlファイルでは、そのhtmlファイルそのものの改行コードというのも、当然意識しなければなりません。WindowsやMacで開発していても実際に稼働するのがLinuxだったら、htmlファイルそのものの改行コードが違ってくる場合があるのです。
この記事では、htmlの改行コードについて解説します。
htmlレンダリングエンジンでの改行コード
htmlファイル（とcssファイル、JavaScriptファイル、画像ファイルなど）はパソコンやモバイルのブラウザのレンダリングエンジンによって解釈され、表示されます。
このとき、どこで折り返すかはレンダリングエンジンが決め、改行はhtmlの改行コードに従って改行します。
Webサイトが改行されるところのコード
htmlが改行されるところはhtmlファイル内に
<br>
が出現したところです。
他に、ブロック要素（<p>、<div>、<form>など）が終わったところでも改行されます。
単純にhtmlファイル内で改行があったから改行するのではありません。htmlファイル内の改行は、レンダリングエンジンの改行に全く影響を及ぼしません。
しかし、一点気を付けるべきポイントがあります。htmlファイル内で文字列の途中に改行があると、少しのスペースを置くレンダリングエンジンも存在するのです。見栄えにこだわるなら、htmlファイル内に無意味な場所で改行を置くことはやめましょう。
意図しない改行を防ぐために
これはエンジニアの仕事というより、コンテンツ作成者の仕事ですが、htmlファイルの中で適切に文字列の中に<br>を入れたり、<p>や<div>で囲ったりして、なるべく見やすくするようにすることが大切です。
行頭に一文字だけあって改行というのでは、見栄えが悪いですね。段落を長くすると、こういうことが起きがちです。
ブロック要素が終わったときに改行が入るというのも注意が必要です。特にフォームでは、意図しない表示になりがちです。
フレームワークを使って開発するときなどは、どうしてもそこで改行しなければならない制約があることも多いです。それはエンジニアしか分からない事項なので、デザイナーの方とよく協議してください。結構デザインに影響を及ぼすものです。
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ファイルにおいては、改行コードをとくに気にする必要はありません。
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の改行コードについて解説しました。
開発者ではなく、モバイルやパソコンの単なるユーザーであれば、改行コードを意識することはありません。改行コードは目に見えないもので、通常の文書作成者が意識することはありません。
しかし開発者であれば意識が必要です。改行コードのせいで文字化けするとか、そういうユーザーに不便を強いるシステムを開発してはならないのです。ユーザーに改行コードを意識させないように意識する、これが開発者です。
Webシステムの改行はWebシステムの使い勝手にダイレクトに影響します。
上手に改行を使い、Webシステムを開発していきましょう。
