戻る
Nvu はMozillaのHomepage
Composerです。
このページはNvuで作成。（2006/1/7）
改訂（2006/2/25）
1. Nvuの使い方
1.1 ダウンロードと日本語化
ダウンロード手順
- 本体（英
語版）のDLを先に行う・・・ Binaries
nvu-1.0-win32-installer-full.exe を選択
- 日
本語化パッケージをダウンロードする
- Nvuを起動し、Tools→Extensions→ダウンロードした日本語化パッケージファイルを選択→Instalｌ
- Nvu を一度閉じて再起動すると、以後は日本語化する。
1.2 おすすめ初期設定の方法
Nvuを日本語化した後で、下記の初期設定を行っておくとよい。
- 「成型されたHTMLソースを得る」設定
→ツール：設定：全般：「HTMLソースの体裁を整える」にチェックをいれる。
（注）一般のエディタで見やすくするためこのモード設定がよい。既定値は改行なしで見にくい。
- 文字コードをShift_JISに設定
→ツール：設定：新規ページ設定：文字エンコード：日本語（Shift_JIS）
（注）ISO-2022-JPという考えもあるが、日本語専用の場合はShift_JISが無難。既定値はUTF-8。これはブラウザで
変換に時間がかかる。
1.3 ファイルの公開（ftp転送）
- ｆｔｐサーバの設定
ファイル：名前をつけて公開：
設定タブ：「サーバ情報」に公開したときのURLを入力（ftpには必須でないが・・・）、「ログイン情報」にｆｔｐサーバのアドレス（リモートの初期
ディレクトリの指定可能）、
ユーザ名、パスワードを入力
公開タブ：「このページのサイト内でのサブディレクトリ」を入力
（注）ここでいうサイトはftpサーバを意味する。
- 画像ファイルを同時に転送する場合
「画像などの関連ファイルも含める場合｝にチェックを入れる。
同一のディレクトリの場合は「ページと同じ位置に配置」を選び別のディレクトリ（例 ./img/）の場合は「サイト内のこのサブディレクトリに配置」を
選ぶ。必要な入力が終わったら「公開」ボタンを押す。新しい窓が開き、ｆｔｐの状況が表示される。
（注）エラー530はログインの失敗（例えばPWまちがい）を示す。
（注）よく見れば、転送しているファイルの一覧が表示される。ただし、正常終了すると消えてしまう。これは不便。
- 感想
ローカル側とリモート側が一覧できないので不安。従って、専用のFTPソフトと併用がよい。
ただし、ちょっとしたページの修正には使えると思う。なお、PASVモードについては設定が見つからなかった。
1.4 水平線<HR>の挿入方法
- 水平線<HR>の挿入
方法１）通常表示にて入れたい行の次の行頭にカーソルを移動し、挿入、水平線とする。
- 水平線のプロパティ（幅、高さ、配置）を指定
方法１）通常表示にて水平線上にカーソルを移動し、右クリックし、水平線のプロパティを開く。（NGの場合は方法２へ）
方法２）HTMLタブ表示にて「HR」にカーソルを移動し、右クリックし、水平線のプロパティを開く。
（共通：色などは詳細設定による）
- 水平線<HR>の削除
方法１）通常表示にて水平線の上にカーソルを移動し、右クリックし削除を選択。（NGの場合は方法２へ）
方法２）HTMLタブ表示にて「HR」にカーソルを移動し、右クリックし削除を選択。
1.5 改行<BR>の挿入方法
- 改行<BR>の挿入方法
方法１）Shift+Enter
（注）段落<P>のなかでEnterすると<BR>ではなく<P>
が追加される。
（注意）
半角と全角が混じっている場合、BackspaceやDeleteキーの動作がおかしい。これは周知のバグ。この場合、矢印キーで１文字送って入力すれば
期待した位置に入る。この方法でしのぐしかない。
1.6 テーブルの丸ごとコピー＆ペーストの方法
- 該当テーブルをクリック（テーブルのハンドルが表示される。）
- 右クリックにて「テーブルを選択」：「テーブル」
- カーソルをテーブルの中に移動、そのまま右クリックにて「コピー」
- カーソルを新しい位置に移動
- 右クリックにて「貼り付け」
（注）上記の３が重要。これを怠るとテーブルの構造が１次元になってしまう。
なお、２のテーブルが選択された状態で、キー操作（＾C）は有効で、４を行って（＾V）で貼り付け可能。
1.7 「どこでも配置」の方法
<div>でブロック化した要素の配置を自由に設定するには次のようにする。
- 領域の選択
通常表示にてブロック化する領域を選択：書式：段落：汎用ブロックにて<div>が設定される。
- positionの指定
HTMLタブ表示にて上記DIVを選択し右クリック：詳細プロパティ：インラインスタイルシート：特性欄にposition、値欄にabsolute
を入力しOKとする。該当領域にハンドルのついた枠が表示される。
（なお、このとき再度右クリックして内容をみるとposition,height,width,top,leftが設定されていることがわかる。）
- 位置の調整
通常タブにて枠のハンドルをつまんでドラッグすれば位置などを自由に加減できる。なお、全体の移動は上部にある十文字をつまめばよい。（枠が消えたときは
該当する領域でクリックすれば復活する。）
- 注意
- ブロック化領域の次の行に文字を記載する場合はブロック化の前にEnterを何回か入力しておかないと、入力できない。
（勿論ソースをいじれば可能だが・・・）
- NN4.7ではstyleが無効のため左寄せになる。
- <table>のようなブロック要素に対しても同様の操作が可能。ただし、HTMLタブの
TABLEを右クリックしたときには「テーブルのセルのプロパティ」をクリックし、テーブルタブを選択する。
（注）上のメニューバーには「テーブルのプロパティ」がある。
- <img>の場合はHTMLタブのIMGの「画像のプロパティ」から詳細設定する。
- その他
positionを入力しただけで、必要な要素が自動的に生成されるのは便利。ただし、position:absolute
は覚えておく必要がある。この種の基本的な要素をクイックレファレンスとして用意しておきたい。
うごいたぞ！
1.8 CSS内部スタイルシートの作り方（基本：タブへの適用）
ここでは「見出し１」の背景色を指定する場合を例に説明する。
- HTMLファイルの作成
まず、HTMLファイルを作成する。例えば通常表示にて、「第１章 HRのテスト」とし、これを書式：段落：見出し１（すなわち<
H1>）とする。
- CSSエディタを開く
ツール：CSSエディタとするとCSSスタイルシートの編集画面が開く。
「新しいStyle要素」をクリック：スタイルシートの作成とすると、左側ベーンに「＋内部スタイルシート」と表示される。
- 新しい規則：「指定された種類の全要素に・・・」を選択し、h1と入力
- 背景のタブ：背景色：参照ボタン：色の選択：OK：閉じる
- 参考
これで完成ですが、念のためソースで確認してみると、
<style type="text/css">
h1 { background-color: rgb(255, 204, 255);
}
</style>
ができている。（この例では、<H1>の背景色は薄い紫色となる。）
1.9 CSS内部スタイルシートの作り方（その２：クラスへの適用）
ここでは文字色をクラスで指定する場合を例に説明する。
- HTMLファイルの作成
まず、HTMLファイルを作成する。 例えば通常表示にて、「第１章 HRのテスト」 とし、これを書式：段落：見
出し１（すなわち<H1>）とする。
- CSSエディタを開く
ツール：CSSエディタ とするとCSSスタイルシートの編集画面が開く。
- 「新しいStyle要素」をクリック：スタイルシートの作成 」とすると、左側ベーンに
「＋内部スタイルシート」と表示される。 （注）すでに「内部スタイルシート」がある場合は選択すればよい。
- 新しい規則：「名前付きスタイル」を選択し、 color_redと入力
- スタイル規則の作成：テキストのタブ：前景色：参照ボタン：赤色の選択：OK：閉じる
- HTMLタグ表示にてクラス color_red
を反映したい<H1>タグを選択すると、下のタスクバーに<h1>が表示される。
これを右クリックし、クラスのcolor_redを選択する。
（現在有効なクラスはクラスの名称の前にチェックがついている。
解除するには該当クラスをクリックすればよい。
なお、複数のクラスが選択されている場合は最後のクラスが有効となる。）
- ソースを見てみると、
<style type="text/css">
.color_red { color: rgb(255, 0, 0);
}
</style>
<h1 class="color_red">
となっている。
- 上記６の代わりに通常表示にて操作することもできる。
（勿論、適用するタグが存在することが必要である。例えば、<body>レベルの文章はあらかじめ<
p>で囲っておくこと。）
- その他
<H1>タグの文字列の一部分の文字色を変更したいときは 、書式：文字色 とする。
なお、このときはクラスではなく、<SPAN>ができる。
また、一部分の文字色の指定を解除するには、書式：すべての装飾を解除 とする。
1.10 CSS内部スタイルシートの作り方（その３：セレクタへの適用）
ここでは「見出し１」の文字色をセレクタで指定する場合を例に説明する。
- HTMLファイルの作成
まず、HTMLファイルを作成する。例えば、通常表示にて「第１章 HRのテスト」とし、これを書式：段落：見出し１（すなわち<
H1>）とする。
- CSSエディタを開く
ツール：CSSエディタとするとCSSスタイルシートの編集画面が開く。
- 「新しいStyle要素」をクリック：スタイルシートの作成とすると、左側ベーンに「＋内部スタイルシート」と表示される。
（注）すでに「内部スタイルシート」がある場合は選択すればよい。
- 新しい規則：「次に指定するセレクタに該当する・・・」を選択し、h1.color_redと入力
- スタイル規則の作成：テキストのタブ：前景色：参照ボタン：色の選択：OK：閉じる
- クラス color_red
を反映したい（<H1>タグの）領域を選択すると、下のタスクバーに<h1>が表示される。こ
れを右クリックし、クラスのcolor_redを選択する。
- 参考
これで完成ですが、念のためソースを見てみると、
<style type="text/css">
h1.color_red { color: rgb(255, 0, 0);
}
</style>
<h1 class="color_red">
となっている。
- その他
今回の方法ではクラス color_red
は<H1>のみに適用となります。（これはCSSの規則でありNvuによる制約ではありません。）
1.11 CSS内部スタイルシートの作り方（補遺）
「内部スタイルシート」に対し「新しい規則」をクリックすると、
３種類の選択肢がある。これらの違いについて説明する。
- ３種類の選択肢
- 「名前付きスタイル（クラス名を下に入力）」
→クラス名を ｃolor_redとすると .color_red
{color:rgb(255,0,0)} が生成される。color_red の前に［.］（ドット）が自動的に追加される。
あらゆるタグに適用可能。
- 「指定された種類の全要素に適用されるスタイル（種類を下に入力）」
→ h1 とか h1,h2 とか h1 em などとする。[,]（コンマ）は自動的には挿入されない。
- 「次に指定するセレクタに該当する要素に適用されるスタイル」
→ h1.color_red などとする。[.]（ドット）は自動的には挿入されない。
- 使い分け
上記b）とc）から生成されるソースは同一である。また、要素をドット付きの .color_red
とすればb）またはc）でa）と同様のクラスを生成可能。
よって、CSSを理解していればb）またはc）１種類があれば実用上問題はない。
Nvuでa）がデフォルトになっている理由は、クラスのみを使用する場合にCSSのルールを理解していなくてもよいように配慮
したのであろう。
1.12 CSS外部スタイルシートの作り方
- CSSエディタを開き、内部スタイルシートができていると仮定する。
- 外部CSSを作る手順
「内部スタイルシート」を選択：「スタイルシートを外部に出力し、そちらに切り替える」：ファイル名を入力：閉じる
- <link>ができている。
<link rel="stylesheet" href="file:///F:/KCN/hmpg/br_test.css"
type="text/css">
ただし、これは内部ファイルの絶対参照になっており、 サイト転送するとリンク切れとなってしまう。これはNvuの周知のバグ（仕
様？）である。 これでは困るので、HTMLタグ表示にて相対参照に修正する。
<link rel="stylesheet" href="br_test.css"
type="text/css">
保存する。
（注）この操作はGUIではできない。
- CSSファイルの追加修正
自由に修正してかまわない。保存しても link 先は相対参照のままである。
- 外部CSSファイルをNvu以外の適当なエディタでつくった場合の読み込み方法について：
CSSエディタの起動：新しいlink要素：URL入力（選択＝参照可）： スタイルシートの作成
→HTML側では絶対参照になっているので 上記３の方法で修正すること。
1.13 余分な改行を除去する方法（裏技）
- ツール：設定：元のソースの書式そのままにする
- ソースタブを選択しソースの一部を修正する。（具体的にはスペースを加え、バックスペースで戻すとよい。見掛け上はなんら変化は
ないがNvuは内容の変化があったとみなす。）→保存する。（この状態だとパッキングされる。）
- ツール：設定：HTMLソースの体裁を整える
- ソースタブを選択しソースの一部を修正する。（具体的にはスペースを加え、バックスペースで戻すとよい。見掛け上はなんら変化は
ないがNvuは内容の変化があったとみなす。）→保存する。（１ヶの改行は残るが、止むを得ない。）
1.14 インライン装飾を除去する方法
装飾（例えばリンク）の設定された文章に追記をすると、装飾が引き継がれる（すなわちリンクが設定されてしまう）。装飾を断ち切る方法について述べる。
- 装飾のある部分（例：戻る）を選択する。（例）戻る
- 書式：全ての装飾を解除。（例）戻る
- 追記する。（例）戻る・・・手順
- 再度装飾する。（例）戻る・・・手順
1.15 ゴミタグを除去する方法
何らかの属性を設定した文字列を削除すると、通常表示では何も表示されないが、タグ（例えば<span></span>）は残っている。これは通常表示では削除できないのでだんだんゴミが溜まってしまう。これの対処方法について述べる。
- 「HTMLタ」表示とする。
- 該当タグを選択し、右クリック削除する。
２．資料： NvuはMozillaが開発中の
WYSIWYG型のComposer
2.1 公開資料
