MB-Support

パソコン初心者のサポートページ

HTMLソースの改行を反映する

 <pre>〜<pre>


通常、ホームページのソースで改行を実行しても、ブラウザには改行が反映されません。これに関しては <br /> を記述する事で改行が反映されます。 例えば、以下は CSS の記述を <p> パラグラフで囲んだ段落として記述した場合です。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<p>
.owner {
	background-image:url("画像アドレス");
	background-repeat:no-repeat;
	background-position:0px;
	width:48px;
	height:55px;
	float:left;
	margin-top:0px 20px 20px 0px;
}
</p>
</body>
</html>

ブラウザ

各行の終わりに <br /> を挿入、さらに、半角スペースを &nbsp; に置き換えれば、意図した表示になります。


pre

<pre> 〜 </pre> でソースコードを囲むと、改行や半角スペースを使ったインデントをそのまま表示する事ができます。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<pre>
.owner {
	background-image:url("画像アドレス");
	background-repeat:no-repeat;
	background-position:0px;
	width:48px;
	height:55px;
	float:left;
	margin-top:0px 20px 20px 0px;
}
</pre>
</body>
</html>

ブラウザ

ソースでは、キーボードの Enter キーで改行、Tab キーでインデントを付けていますが、ホームページに反映されています。 便利ではありますが、改行を実行しない場合、そのまま改行無しで表示され続けるため、サイトのデザインで横幅を指定するのなら注意が必要です。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<div style="width:200px;background-color:#9acd32;">
<p>
例えば、通常のテキストであれば、ディビジョンの幅を200pxに設定することで、
その範囲でテキストが折り返され、デザインが崩れる事はありません。
</p>
</div>
<hr />
<div style="width:200px;background-color:#9acd32;">
<pre>
.owner {
	background-image:url("画像アドレス");
	background-repeat:no-repeat;
	background-position:0px;
	width:48px;
	height:55px;
	float:left;
	margin-top:0px 20px 20px 0px;
}
</pre>
</body>
</html>

ブラウザ

ディビジョンで指定した幅 200px を超えて、<pre> で記述した CSS が表示されます。 もし、float でディビジョンを回り込ませてあれば、なおかつ、幅を指定してあれば、デザインは確実に崩れます。



HTMLタグを交えた表示

ハイパーリンクや改行タグなどを <pre> に挿入すると、通常動作となります。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<pre>
<p>
<a href="URL">MB-Support</a><br />
パソコン初心者のサポートページ
</p>
</pre>
</body>
</html>

ブラウザ

そうではなく、HTML ソースをそのまま表示したい場合は、文字エンティティに置き換える必要があります。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<pre>
&lt;p&gt;
&lt;a href=&quot;URL&quot;&gt;MB-Support&lt;/a&gt;&lt;br /&gt;
パソコン初心者のサポートページ
&lt;/p&gt;
</pre>
</body>
</html>

ブラウザ

<&lt;>&gt;&&amp;quot; に置き換えます。




戻る 一覧表示 次へ


Copyright © 2018 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項