ホームページ作成ソフト ホームページZERO使い方ガイド





設定でHTMLコードを小さく抑えてみよう!


このページではHPZの設定で、HTMLソースを小さく抑えて出力する方法を試してみます。
当ページ作成時のHPZのバージョン:V1.0.2

・設定の変更方法

HTMLコードを小さく抑える設定方法は極めて簡単です。
サイトを開いた状態で、メニューバーのファイル>「サイトの設定」を選択します。
すると、サイトの設定画面が表示されますので、「HTML出力」を選択します。
そして、「HTMLコードを小さく抑える」にチェックボックスを入れます。
(設定はデフォルトではオフになっています。)
最後にOKを押すと完了です。サイト内全てのページのソースが自動的にコンパクトになります。
ホームページZERO サイトの設定画面(クリックで拡大)

・具体的にどう小さくなるの?

ソースを抑えると言っても、どこがコンパクトになるのか気になるところです。
まずはヘルプを見てみると・・・。
「このオプションにチェックマークを付けると、 HTMLコード内のコメントなどを削除して
ファイルサイズが小さくなるようにします。」
と、記載されています。

これだけでは良く分からないので実際に試してみました。
白紙のページで試した結果は以下の通りです。

▼HTMLコードを小さく抑えるのチェックボックスがオフの時
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.
org/TR/html4/loose.dtd">
<HTML lang="ja">

<!--2008/05/28 18:39:47-->

<HEAD>
 <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
 <META http-equiv="Content-Style-Type" content="text/css">
 <META http-equiv="Content-Script-Type" content="text/javascript">
 <META name="GENERATOR" content="ソースネクスト ホームページZERO">
 <TITLE>白紙</TITLE>
 <LINK href="01_special_05_0110.css" type="text/css" rel="stylesheet">
</HEAD>

<BODY>
 <div id="page">
 <div id="header"><@WMHeaderFrame></@WMHeaderFrame></div>
 <div id="menubar"><@WMMainMenuFrame></@WMMainMenuFrame></div>
 <div id="title">
 <h1><@WMSiteTitleFrame></@WMSiteTitleFrame></h1></div>
 <div id="side1">
 <@WMSubMenuFrame></@WMSubMenuFrame></div><div id="main">
 <h2><@WMPageTitleFrame></@WMPageTitleFrame></h2>
 <HR>
 </div><div id="side2"></div>
 <div id="footer"><@WMFooterFrame></@WMFooterFrame></div></div>
</BODY>

</HTML>
▼HTMLコードを小さく抑えるのチェックボックスがオンの時
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.
org/TR/html4/loose.dtd"><HTML lang="ja"><HEAD><META http-equiv="Content-Type"
content="text/html; charset=Shift_JIS"><META http-equiv="Content-Style-Type" content
="text/css"><META http-equiv="Content-Script-Type" content="text/javascript"><
META name="GENERATOR" content="ソースネクスト ホームページZERO"><TITLE>白紙</
TITLE><LINK href="01_special_05_0110.css" type="text/css" rel="stylesheet">
</HEAD><BODY><div id="page"><div id="header"><@WMHeaderFrame></@WMHeaderFrame
></div><div id="menubar"><@WMMainMenuFrame></@WMMainMenuFrame></div><div id="
title"><h1><@WMSiteTitleFrame></@WMSiteTitleFrame></h1></div><div id="side1"><@
WMSubMenuFrame></@WMSubMenuFrame></div><div id="main"><h2><@
WMPageTitleFrame></@WMPageTitleFrame></h2><HR></div><div id="side2"></div><div id=
"footer"><@WMFooterFrame></@WMFooterFrame></div></div></BODY></HTML>
▼上記ソースをみやすく改行したもの
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ja">

<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Script-Type" content="text/javascript">
<META name="GENERATOR" content="ソースネクスト ホームページZERO">
<TITLE>白紙</TITLE>
<LINK href="01_special_05_0110.css" type="text/css" rel="stylesheet">
</HEAD>

<BODY>
<div id="page">
<div id="header"><@WMHeaderFrame></@WMHeaderFrame></div>
<div id="menubar"><@WMMainMenuFrame></@WMMainMenuFrame></div>
<div id="title">
<h1><@WMSiteTitleFrame></@WMSiteTitleFrame></h1></div>
<div id="side1">
<@WMSubMenuFrame></@WMSubMenuFrame></div><div id="main">
<h2><@WMPageTitleFrame></@WMPageTitleFrame></h2>
<HR>
</div><div id="side2"></div>
<div id="footer"><@WMFooterFrame></@WMFooterFrame></div></div>
</BODY>

</HTML>

このソースを比較して分かる事は、
コンパクトにした場合は、
1.ソース内の改行が削られている。 2.自動的に挿入される作成日時のコメントが削除されている。
この2つです。

改行を入れるのと入れないのとでは一つにつき1バイトか2バイト節約する事ができます。
チリもつもれば山となる・・・、でしょうか。
あとは日時削除だけですが、これはそもそも初期状態で消しておいて欲しいところです・・・。

結論:あんまこの機能は意味ないかも!!!・・・?