ホーム | パソコンで楽しむ |インターネットを楽しむ | KompoZerでWebページ作成

KompoZerでWebページ作成

NET・陽だまり勉強会のために

KompoZer とは

KompoZer のダウンロード

解説しているサイトでダウンロード(DLと略記されていることがある)の方法はあまり詳しく書かれていません。ここでは2008年9月 の現況で Windows Vista の場合で説明しま す。


  1. ダウンロードは英文の公式サ イト(http://kompozer.net/)からダウンロードすることになります。
  2. 中央の[Download! KompoZer 0.7.10]と書かれたオレンジ色のボタンをクリック
    (または、画面右の「Download v0.7.10 」から「win32 tarball」を選択してクリックで4.へ。)
  3. 次の画面でも同じオレンジ色のボタンがありますが、[Download! KompoZer for Windows]となっていますので、ここをクリックします。この画面は使っているOSを選ぶページです。私たち32ビットのWindows のユーザーは、[Win32 binary kompozer-0.7.10-win32.zip(7.6MB)]をダウンロードします。(上の Windowsのアイコンのついたリン クでも同じところに行きます。)
  4. 次の画面は別のサイト[SOURCEFORGE.NET]にになり、KompoZerの文字が見えません。 [DownloadHTMLEditor]などのリンクがありますがクリックしないで、画面上部に出ているセキュリティのための情報バーをクリックして、 ブルダウンメニューの [ファイルのダウンロード]をクリックします。 (パソコンの設定により情報バーが出なく5.の[ファイルのダウンロード]のウインドウが出ることがあります。)
  5. [ファイルのダウンロード]のウインドウが出ますので、[保存]ボタンをクリックします。Windowsの[名前を付けて保存] のウインドウで、保存する場所を指定して保存します。
  6. ダウンロードして保存した[kompozer-0.7.10-win32.zip]を解凍しておきます。

このページの最初へ

KompoZerの日本語化

レジストリを使っていないのか、解凍した KompoZer 0.71.0 フォルダの kompozer.exeをダブルクリックすれば、起動しますが画面は英文です。 (ダウンロードしたファイルが*.zipファイルでなく自己解凍型*.exeの場合はインストール作業があるかもしれません。)

画面を日本語にするツールがあり、ダウンロード → 日本語パック適用 という作業になります。

ダ ウンロードします

  1. 公式サイト(http: //kompozer.net/)の画面の[Locallzations]タブをクリック
  2. [Available langpacks]の画面の[ja 日本語(ja-JP)]をクリック
  3. [ファイルのダウンロード]のウインドウで[保存]ボタンをクリック
  4. 保存する場所を指定して[kpz -langpack-jaJP.zip]をKompoZerを解凍したフォルダに保存します。
  5. Internet Explorer を使用の場合は、ダウンロードした[kpz-langpack-jaJP.zip]の拡張子[zip]を[xpi]に変更します。(拡張子が表示されてな い場合はWindowsのフォルダオプションで表示させます。)

日 本語パックを適用します

  1. 解凍した KompoZer 0.71.0 フォルダの kompozer.exe をダブルクリックして起動します。
  2. 表示されている小さいウインドウの KompoZer Tips を閉じます。
  3. KompoZerのメニューバーの[Tools]→[Extensions]をクリック
  4. [Extensions]ウインドウで[Install]ボタンをクリック
  5. [kpz-langpack-jaJP.xpi]を選択して[開く]をクリック
  6. [Software Installathon]のウインドウが出たら、[Install Now]ボタンをクリック
  7. KompoZerを再起動すると日本語表示になっている筈。

日本語化についての図 解入り解説を参考にしてください。(解説の最後の [数秒待ち下の画面になったら[Cancel]します。]は、[Install Now]ボタンが正当です。

kompozer.exeをダブルクリックしたときにエラーが出て、起動画面が出ないと きがあります。 解決方法が[教 えてgoo]にありました。私は、C:\Documents and Settings\[ユーザー名]\Application DataにあるKompoZerフォルダを削除して、起動しなおして解決しました。

参 考:kompoZerを解説しているサイト

基 本的な設定

  1. 文字コードの 既定値は UTF-8 になっていると思いますが、Windows を使っていて、他のソフトとの関係からしばらくは特別の事情がなければ、Sift_JISの方が都合がよいと思います。
    メニューバーの[ツール][設定]で左側の[新規ページ設定]を選択し、[文字エンコードを選択]ボタンをクリックします。文字コードの一覧の中から、 [日本語(Sift_JIS]を選択します。この設定は設定してから新規ページを作成するときに適用されます。(既に開いている既存のページには適用され ません)
  2. メニューバーの[ツール][設定]で左側の[フォント]を選択すると、[フォントとページ配色]というウインドウが開きます。こ こでは[文書中のフォント指定を有効にする]の チェックボックスにチェックを入れておきます。ここにチェックが入っているとページを編集してスタイルシートなどでフォントを指定できるようになります。 チェックが入っていないとこのウインドウの上の方で指定するフォントが適用されますが、サイズや解像度などは動かないようです。Webページではフォント を指定することができますが、実際にはページを閲覧するパソコンに指定したフォントがなければ、期待した結果を得ることができません。このウインドウでは タイトルにあるページ配色の指定はありません。
  3. ページの DOCTYPE宣言(文書型宣言)を行うマークアップ言語のバージョンをHTML4XHTML1か、 Document Type Definition(文書型定義)を厳密型DTD(Strict)か、移行型DTD(Transitional)かをメニューバーの[ツール] [設定]で左側の[詳細]を選択して設定します。(フ レームセットのDTDは設定にはありませんが、生成されるファイルはHTMLファイルですから、ソースを編集すれば使うことはできます。)
    窮屈かもしれませんが厳密型 DTD(Strict)を 使い、スタイルシートにcssファイルを使った方がわかりやすく将来性があります。
    ページを新たに作るときにあらかじめメニューバーの[ツール][設定]の左側の[詳細]をクリックして、[マークアップ形式]で設定します。ここで設定し たものが文書型宣言に記載されます。
  4. ファイルを保存するときに適用される、メニューバーの[ツール][設定]の左側の[全般]で、[ページ保存公開時に]にある、[元 のソースの書式のままにする]と[HTMLソースの体裁を整える]は、ブラウザ表示に は関係ありませんが、[ソース]のレイアウトに関係します。
    KompoZea で作ったソースは妙なところで改行されています。[HTMLソースの体裁を整える]では、ソースを読みやすく改行が入りますが空白行が多くなり、ファイル サイズが大きくなります。[元のソースの書式のままにする]はユーザーが入力したままということではなく、[ソースの書式]というルールがあるようで思わ ぬところで改行され、読みにくいですが空白行は入りません。
    どちらを選ぶかはユーザーの好みということになりますが、[元のソースの書式のままにする]を勧めているサイトが多いようです。
  5.  ツールバーに表示されているアイコンは少ないのですが、ツールバー上で右クリックすると種類が限られていますが追加することが できます、編集ツールバーと書式ツールバーの別に追加してボタンを増やすことができます。
  6. スタイルシートはメニューバーの[ツール][設定]で左側の[全般]を選択し、[HTML要素・属性ではなく、CSSによるスタイル付けを用いる]の チックボックスにチックを入れて外部ファイル(*.css)によりスタイルを設定します。
    このチェックを入れなければ、外部ファイルを作らずインラインや文書内でスタイルシートを設定します。
  7. メニューバーの[表示][ブロックの輪郭]をクリックしてチックをつけると、[ソース]以外の画面にグロックが細線で囲まれわか り易くなります。この設定は KompoZer を再起動すると元に戻ります。(枠が見えなくなる。) 

このページの最初へ

起 動した画面

ペー ジ作りの準備

ページ作りには、KompoZer の取り扱いとは別に準備しておくことがあります。

  1. ページを保存するフォルダを決める。
    サイトのファイルを一つのフォルダに全部入れて置くこともできますが、ページ数が多くなると整理ができなくなります。サイトの中をフォルダで階層にして テーマごとに整理し、将来拡張するときに困らないようにしておきます。フォルダの名前は半角英数文字として、全角文字や半角カタカナ文字は使いません。
  2. ページを構成するテキスト(文章)を用意する。
    ページの基礎はテキストです。画像や動画は訴求力がありますが、情報を正確に伝えるのに文章は欠かせません。Webからページを探して訪れてもらうには、 テキストによる検索による場合がほとんどです。ページの内容に関連するキーワードを多様に使って検索されやすい文章を作ります。
  3. ページに使う画像などの素材を用意しておく。
    Webページはテキストだけでは面白くありません。テキストを助ける静止画や動画を用意します。多数の画像やファイルサイズの大きいものは、ページをダウ ンロードしてブラウザに表示するまでに回線やコンピューターに負担をかけます。回線の状況にも左右されますが、ページを表示させるまでの時間が長くなると 閲覧者に待ってもらえません。必要最少減のファイルサイズに調整します。
  4. アクセスしやすいページ作りを学ぶ。
    閲覧者がページ作成者とおなじパソコンのスペックで見ているとは限りません。また画像や動画を見ることが出来ない人がページの情報を必要としてい るかもしれません。レベルの高い技術を学び豊かな表現ができるようにすることも大切ですが、自分のサイトに誰でもがアクセスしやすいページを作ることが大 事です。いろいろなページを見て学び、独りよがりなページを作らないようにします。
  5. 編集するパソコンをファイルの拡張子が表示されるように設定しておく。
    Windowsをインストールした初期の状態は、初心者を対象にしていて、システムの内部に深入りしないようになっています。Webページを作るには、い ろいろなファイルを取り扱います。ファイルの種類がわかるようにファイルの拡張子を表示させる設定にしておきます。

このページの最初へ

KompoZer でページ編集の方法

「新しいページを作る」「すでに作ってあるページを編集する」「ひな形を使ってページを作る」に分けて説明します。

新 しいページを作る

メニューバーの[ファイル][新規作成]をクリックすると、[新しい文書、または文書のひな型となるファイルを作成します]ダイアログ ボックスが開きます。

[基本的な設定]の3項で[HTML4][厳密型DTD(Strict)]を選択してあると、[文書(内容は空白)]が選択されて [Strict DTDで文書を作成]にチェックが入っています。下に[このファイルを「新しいタブで開く」▼]となっていますので、[作成]ボタンをクリックすると、新 しいタブでページができます。

この三角▼ボタンをクリックすると[新しいウインドウで開く]を選択できます。こちらを選択すると KompoZer を別に起動してあたらしいページをつくります。

ページエリアの下の編集モードツールバーで[ソース]をクリックすると、ページにはまだ何も入っていませんが、文書型宣言から </html>まで書かれているのが見えます。このようにこのソフトはダイアログボックスで設定した内容がタ グで書き込まれます。

この状態で編集ツールバーの[新規作成]ボタンをクリックするとこの状態の新規ページができます。もし[設定]で移行型DTD (Transitional)を選択してあると、[新規作成]ボタンでは文書型宣言は下のようになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

ショートカットキーの Ctrl + N キーでは、[新しい文書、または文書のひな型となるファイルを作成します]ダイアログボックスが開きます。

す でに作ってあるページを編集する

すでに作成済み、あるいは作成途中のファイルを再編集するときは、HTMLファイルをKompoZer に読み込みます。

メニューバーの[ファイル][ファイルを開く]で[HTMLファイルを開く]ダイアログボックスが開きますので、該当のHTMLファイ ルを指定します。編集ツールバーの[開く]でも、ショートカットキーの[Ctrl + O]でも同じです。

雛 形を使ってページを作る

陽だまりホームページ | 柏崎の情報「陽だまり」 | パソコンお助け情報 |  NET・陽だまり会報目次(段落)
NET・陽だまり会報 第◆号 (2008-◆-◆)(見出し1)
例会の報告(見出し2)
◆月例会は◆月◆日に◆名の出席で図書館会議室で開かれました。(段落)
会長の挨拶(見出し3)
(段落)
最近のICT事情(見出し4)
(段落)
幹事長から(見出し3)
(段落)
会員の発表(見出し3)
(段落)
連絡事項(見出し2)
(段落)
会員の随想(見出し2)
随想タイトルと氏名(見出し3)
(段落)
パソコンお助け情報(見出し2)
(段落)
フリーソフトの使い方(見出し2)
(段落)
フリーソフトのタイトル(見出し3)
(段落)
編集後記(見出し2)
(段落)
[挿入][水平線]
平成◆年◆月◆日 UP NET・陽だまりへのご連絡はメールでお願いします。(連絡先 (address))

この KompoZer はページの雛型を作る特別の機能がありますが、まずは単純に作ってみます。

新 しく雛型を作る

メニューバーの[ファイル][新規作成]で開いた[新しい文書、または文書のひな型となるファイルを作成します]ダイアログボックス で、[雛型(内容は空白)]を選択して[作成]ボタンをクリックすると、新しい空白のタブが開きます。

ページエリアの下部の[編集モードツールバー]で、[ソース]をクリックすると、空白のページですが基本的なタグが既に入力されていま す。

1行目の文書型宣言は、
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
移行型DTD(Transitional)になっていま す。このソフトの仕様です。

[編集モードツールバー]の[通常]に戻って、右のようにテキスト(赤字の括弧書きを除く)を入力します。サンプルテキストファイル template.txt

入力の際の指定でも入力後の指定でもよいが、書式ツールバーの[段落の書式を選択]で段落ごとの括弧書き(赤字)の書式を選択します。

最後の段落の前に1行空けて、メニューバーの[挿入][水平線]をクリックすると、区切り線が入ります。

この雛型の◆に文字または文章を入れるとWeb会報ができます。

[編集モードツールバー]の[ソース]をクリックすると<br></p>と余計な<br> があったり、インラ インでstyle属性が入っていたりしていますが、タグ付がされているのがわかります。(ここではまだスタイルシートは設定されていません。)

できた雛型を保存します。メニューバーの[ファイル][名前を付けて保存]をクリックして、保存するフォルダを指定して、ファイルの種 類は[HTMLの雛型]で拡張子は[*.mzt]になります。こ こまでのサンプルファイルtemplatesample1.mzt

上記のサンプルファイルはブラウザでは表示できません。このファイルを利用するときはリ ンクを右クリッ クして[名前を付けてリンク先を保存]でファイルを保存してください。
KompoZer の中でフォルダ名やファイル名に全角文字を使うと、タイトルバーなどの表示がURLエンコードで表示(文字化け)されます。雛型はサーバーにアップしない 段階で使うものですが、なるべく半角英数文字を使った方が良いようです。

既 存ページから雛型作成

すでに作ってあるページを雛型にするには、そのページを開いた状態で

  1. メニューバーの[書式][ページのタイトルとプロパティ]をクリック。
  2. [ページのプロパティ]ダイアログボックスの[雛型][このページを「雛型」として用いる]チェックボックスにチェックを入れ る。
  3. 必要によりそのほかの[タイトル][著作者][内容の説明][言語][文字方向][文字エンコード]の設定をする。ここで設定したものは、すでに作ってあるページのhead要素に書き込まれます。
  4. [OK]ボタンをクリック。
  5. メニューバーの[ファイル][名前を付けて保存]で保存する場所(フォルダー)を指定しファイル名を入力して保存します。雛型と して拡張子は[*.mzt]になります。
雛 型ファイル[*.mzt]を編集するために開く方法

すでに作ってある雛型を編集するには、KompoZer のメニューバーの[ファイル][ファイルを開く]で、[ファイルの種類]を(HTMLファイルでなく)[HTMLの雛型]にしてファイルを選択し て開きます。

テキストエディタで開くことができます。[*.mzt]ファイルをダブルクリックするとテキストエディタが起動して読み込みます。

どちらの方法でもファイルのどの部分も編集が可能です。

このページの最初へ

雛 型を使って新しいページを作る

前項の方法で雛型ファイル[*.mzt]を開くと、普通のエディタで編集して拡張子を[*.html]にすれば新しいページができま す。しかし、こ れでは KompoZer で雛型を使う意味がありません。次の方法で KompoZer の中で雛型ファイル[*.mzt]を開くと、ファイルは開けますがこのままでは編集できません。

  1. 雛型のファイル[*.mzt]が開いていない状態で(開いている場合は閉じます)、メニューバーの[ファイル][新規作成]をク リックすると、[新しい文書、または文書の雛型となるファイルを作成します]ダイアログボックスが開きます。
  2. [どのような種類のファイルを作成しますか?]の[雛型に基づいた文書]のオプションボタンを選択します。
    [雛型となるファイルのURIか、ディスク上での場所を指定してください]が濃く表示され次のコンボボックス(ComboBox)がアクティブになりま す。
    URI(Uniform Resource Identifier)とは、URL(資源"リソース”を位置で指定するためのアドレス Uniform Resource Locator)とURN(ネットワークの位置に依存せず資源を識別する名前 Uniform Resource Name)とをいい、URI=URL+URN と考えてよいとのこと。Uniform Resource(不変の資源)とは、Web 上のドキュメントやページ、ファイルのことで、私たちがユー・アール・エルと言っているのは正しくは「URI」というべきらしい。
  3. コンボボックスの右の[ファイルを選択](開いたファイルのアイコン)をクリックすると、利用する雛型のファイルを指定できま す。(前項の[2.]にあるように、パソコンの中だけでなくWeb上のファイルも 利用できるらしい。)
  4. [このファイルを]のコンボボックスで、▼ボタンを使い[新しいタブで開く][新しいウインドウで開く]のどちらかを選択して、 [作成]ボタンをクリックします。
  5. 新しいタブか新しいウインドウで(タイトルなし)の雛型のページが表示されます。これを編集して名前を付けて保存すれば新しい ページができるのですが、文字カーソルを文章の中に入れることができず、このままでは編集できません。
編 集可能な雛型ファイル

編集可能な雛型ファイルにするために、[*.mzt]に手を加えます。前項の方法で雛型ファイル[*.mzt]を開き、中の[編集可能 なブロック] を指定します。この指定した部分は編集できるようになりますが、指定しない部分は固定して変更できません。このソフトの雛型の特徴です。

  1. 前項の方法(雛型ファイル[*.mzt]を編集するために開 く方法)でメニューバーの[ファイル][ファイルを開く]から雛型ファイル[*.mzt]を開く。
  2. ページエリアの下部の[編集モードツールバー]で[HTMLタグ]を選び、編集したい部分のタグをクリックするとそのブロックが 選択される。(文章を選択するときは、該当範囲の文章を選択する。[通常]モードでも可)
  3. 下のステータスバーの対応するタグがる強調して表示されので、右クリックし、ショートカットメニューの[雛型][編集可能とす る]をクリック。(文章を選択するときはメニューバーの[挿入][雛型][編集可能部分の追加])
  4. [編集可能部分の挿入]ダイアログボックスの[名前]のテキストボックスに、そのブロックを識別できる名前(重複不可)を入力す る。(文章のときは、選択した元の文章がこの名前と入れ替わるので、何を入力する所かわかる名前にする)
    [その他]の[この部分は無くても構わない]にチェックを 入れると簡単に削除できる。毎回必ず記載する項目でない時に削除できるようにチェックを入れるとよい。
    この部分は再使用可能]にチェックを入れるとコピーでき る。同じような文書を増やす可能性があるときにチェックを入れる。
  5. 編集ツールバーの[保存]か、メニューバーの[ファイル][保存]か、ショートカットキーの[Ctrl + S]キーで保存する。ここまでのサンプルファイル templatesample2.mzt
    上記のサンプルファイルはブラウザでは表示できません。利用するときはリ ンクを右クリックして[名前を付けてリンク先を保存]でファイルを保存してください。
雛 型を使ってWebページを作る

雛型を使ってWebページを作るには、編集可能な(青いラベルの付いた)領域を編集します。

  1. [雛型に基づいた文書]としてファイルを開く。
  2. 青いラベルの付いた編集可能な領域をクリックして、必要なテキストを入力する。
  3. 小さい丸にX印[⊗]が中にある青いラベルの領域は、不要の場合はこのマークをクリックすれば削除できる。
  4. 小さい四角が2枚重なっている印が中にある青いラベルの領域は、このマークをクリックすれば同じものを複数コピーできる。
    ここまでのサンプルファイル templatesample3.mzt
    上記のサンプルファイルはブラウザでは表示できません。利用するときはリ ンクを右クリックして[名前を付けてリンク先を保存]でファイルを保存してください。
  5. すべての編集可能領域を編集し終えたら、メニューバーの[編集][雛型と区別する]をクリックすると、雛型ではなく普通の HTMLファイルになるので、名前を付けて保存する。
    ここまでのサンプルファイル sample4.html

雛型でデーターをコピー&貼り付けしていると、原因はわかりませんが、青いラベルの操作ができなくなるところがありま した。次のHTMLファイルで修正できますのでこのまま進みます。

以上で雛型での作業が終わり以後はHTMLファイルでの作業になります。

HTML ファイルの整理
  1. KompoZer で前項で保存したHTMLファイル(smple4.html)を[ファイル][ファイルを開く]で開きます。
  2. [編集モードツールバー]の[HTMLタグ]をクリックしてタグが正しく入っているか、空白のタグが無いか上から順に点検しま す。
  3. 空白の段落[p]や見出し[h?]があれば Delete キーで削除、1〜6の順になっていない見出し[h?]があれば修正、タグの付かないテキストがあればテキストの中にカーソルを入れ編集ツールバー(1)の [書式の選択]でタグを入れます。

この作業は後でも出来ますが、次の目次を作る際に見出しが正しく入っているとやり易いか ら、この段階でしておきます。なるべく必要ないものは整理しておいた方がきれいな目次ができます。

[ページエリア]の上部の[ページタブ]に「雛型」など相応しくない文字がある場合やより具体的なものにするときは、メニューバーの [書式][ページのタイトルとプロパティ]をクリックして、[タイトル]のテキストボックスを修正します。このタイトルがWebブラウザでページを見たと きにタイトルバーに記載されます。お気に入り(ブックマーク)に登録されるときのタイトルになり、検索されるときにも役に立ちます。

このページの最初へ

目 次を作る

ページを軽くするためか短い文章のページをつないで長い文章を作っているサイトがありますが、全体が見えなく必要なところを探すのに不 便を感ずる時があります。一覧性のある一つの長い文章のページには目次があって文書内にリンクがあると便利です。

見出しがきちんと作られていると、KompoZer で目次を簡単に作ることが出来ます。

  1. 目次を作る場所に空白行を作ってカーソルを置きます。
  2. メニューバーの[挿入][目次]をポイントして[挿入]をクリックします。
  3. [目次]ダイアログボックスで、目次のレベルと見出しのレベルを[第1レベル]の目次に[タグ]の h3 というように組み合わせます。使わない目次のレベルは[--]にします。
  4. 段落[p]とブロックレベルのスタイルコンテナ[div]についても class を使って目次を作ることができるようです。
  5. [目次の中のすべての項目に番号を振る]にチェックを入れる(規定値)と、レベルごとに番号が入ります。
  6. 目次をリンクさせないようにするには、[目次を編集不可にする]にチェックを入れます。(ここでは入れない)

以上で目次と文書内リンクができます。[編集モードツールバー]の[通常]と[HTMLタグ]の表示でリンクのできた見出し(ジャンプ 先)に錨のマークがつきます。ここにきて[通常]と[プレビュー]の表示の違いがわかるようになりました。
ここまでのサンプルファイル sample5.html

KompoZer で作った目次は、変動があったときに更新できます。メニューバーの[挿入][目次][更新]をクリックして、[目次]ダイアログボックスで処理できます。 また目次を文書内リンクも含め削除するときは、メニューバーの[挿入][目次][削除]をクリックすれば一括削除できます。KompoZer 以外の方法でスタイルシートなどの修正を加えた場合は残るタグがあります。

文 字入力の大要

  1. KompoZer で文字(テキスト)を入力・編集するにはどの編集モードでもできますが、普通は[通常]モードが適しています。
  2. 編集ツールバー1の[段落の書式を選択]ドロップダウンリストは[body直下]が初期値ですが、三角▼ボタンをクリックすると テキストを入力する主な要素を選択できます。要素を指定してからテキストを入力してもよいし、テキストを入力後範囲を選択(またはテキストの中をクリック してカーソルを入れておいて)要素を指定することもできます。
  3. 普通の文章の書式は、[段落](p要素)が一般的です。段落の中にテキストを入力中に[Enter]キーを押すと新しい(別の) 段落にカーソルが移ります。
    現在の段落の中で行を変えるときは、[Shift + Enter](Shiftキーを押しながらEnterキーを押す)で改行[br要素]が入ります。
  4. Windows の一般的なショートカットキー(コピー・切り取り・貼り付けなど)を使用できます。
  5. メニューバーの[編集]メニューや編集ツールバーをカスタマイズして、編集用のボタンを使い書式を設定できます。
  6. 編集ツールバー1の[段落の書式を選択]ドロップダウンリストの初期値が[body直下]となっていますが、インライン要素やテ キストはbody要素直下に置くことが HTML4.では認められていません。必ずブロック要素の中か、ブロック要素の中のインライン要素の中に置くようにします。

リ ンクの設定

目次を作るとき目次からページの目的の場所へ移動するハイパーリンクが自動的に作られました。Webページではこのハイパーリンクが特 色です。ページの中だけでなくファイルの外でも、また外部の他のサイトのページへでも移動(ジャンプ)することができます。

ペー ジの中のリンク

ページの中(同じファイルの中)へジャンプするには、まずジャンプ先に名前(アンカー)を 付けます。

  1. 名前をつけたい場所をクリックしてカーソルを置きます。この場所がジャンプしたときに画面の一番上に表示されるところです。
  2. 編集ツールバーの[アンカー]ボタンをクリックするか、メニューバーの[挿入][名前付きアンカー]をクリックします。
  3. [名前付きアンカーのプロパティ]ウインドウの[アンカーの名前]テキストボックスに、一意の(重複しない)名前をつけ[OK] ボタンをクリックします。

これで名前付きアンカー(錨)ができました。次はジャンプ元のリンクです。

  1. リンクを設定する適当なテキスト(文字)を選択して、次のどれかの方法で[リンクのプロパティ]ダイアログボックスを開きます。
  2. 大きい[リンクのプロパティ]ダイアログボックスですが、一番上の[リンク文字列]で選択した文字列を確認します。
  3. 次の[リンク対象]コンボボックスの右の三角▼ボタンをクリックしてドロップダウンリストを表示させます。
  4. ドロップダウンリストの中に上の作業で付けた名前付きアンカーの名前が、番号記号[#]付きで表示されていますのでこれをクリッ クして[OK]ボタンをクリックします。

以上でブラウザの画面でジャンプ元をクリックすれば、名前付きアンカーのところがウインドウの最上部に表示されます。目次を作るでは、以上のような見出しごとの設定を一度に行ったものです。

ペー ジ外へのリンク

編集しているページ以外のページにリンクを設定するには、同じサイト内の場合と、別のサイトの場合とに分けて説明します。いづれの場合 も名前付きアンカーがわかれば、前項ページの中のリンクの方法で、リンク先のページの特定の場所へのジャンプが可能です。

サ イト内の別のファイルへ
  1. ページの中のリンクのときと同様 に、リンクを設定する適当なテキスト(文字)を選択して、編集ツールバーの[リンク]ボタンをクリックなどをして、[リンクのプロパティ]ダイアログボッ クスを開きます。
  2. [リンクのプロパティ]ダイアログボックスで一番上の[リンク文字列]で選択した文字列を確認します。
  3. 次の[リンク対象]コンボボックスの右端の[ファイルを選択](フォルダが開いているアイコン)をクリックします。
  4. リンクしたいファイルを選択します。目的のファイルが見つからないときは、違うフォルダを探してください。
  5. [開く]ボタンを押し、[リンクのプロパティ]ダイアログボックスに戻って[OK]ボタンをクリックします。
サ イト外へのリンク
  1. リンク先のページのURL(正確にはURI)を調べておきます。ブラウザでそのページを開いて、ブラウザに表示されるURLを選 択してコピーしておくとよいでしょう。
  2. リンクを設定する適当なテキスト(文字)を選択して、編集ツールバーの[リンク]ボタンをクリックなどをして、[リンクのプロパ ティ]ダイアログボックスを開きます。
  3. [リンクのプロパティ]ダイアログボックスで一番上の[リンク文字列]で選択した文字列を確認します。
  4. 次の[リンク対象]コンボボックスの中にリンク先のページのURLを入力します。1.でコピーした場合は貼り付ければよいわけで す。(クリップボードにあるURLがコンボボックスの中に表示されています。)
  5. [OK]ボタンをクリックします。

このページの最初へ

リ ストの設定

Webページの文章は、閲覧者に簡潔に情報を伝える必要があります。そのために箇条書きが多く使われます。順序付きリストol要素、順 序なしリストul要素、定義付きリストdl要素です。

KompoZer では、書式ツールバーと書式メニューでリストを作ることができます。

ol,ul要素は範囲を選択して、書式ツールバーのアイコンをクリックすると、1行が1項目に設定されます。

dl要素は、定義項目と定義内容別にクリックします。

ス タイルシートの設定

ここで、カスケーディングスタイルシートについて詳しく触れることはできません。ここではKompoZer でどのようにWebページを修飾するかについて検討します。

ス タイルの3つの方法

イ ンラインスタイル

HTMLのタグの中にその都度[style=" "]という属性を書き込むスタイルシートです。同じスタイルが別の場所にあっても、その都度設定しますのでわかりやすいが非常に煩瑣です。 KompoZer ではユーザーが知らないうちにこれを使っていることがあります。ユーザーはソースモードでサンプルファイルを見れば、
<hr style="width: 100%; height: 2px;"> などと使用しているのがわかります。

しかし、KompoZer では、Style属性についてユーザーが意識する必要はありません。

(文 書)内部スタイル

HTMLファイルのページごとに(ファイルごとに)head要素の中に書かれる、そのページだけに適用するスタイルの規則で、使用され る要素ごとのスタイルの規則です。

KompoZer ではCaScadeSというスタイルシートエディタ で、作成中のHTMLファイルのhead要素に書き込みできます。

同じ要素でも違うスタイルを適用するときは、要素にクラス(class)を付けて区別することができます。

外 部(ファイル)スタイル

複数のページに統一したスタイルを適用したり、複数の種類のスタイルを一つのページに適用させるには、スタイルシートを単独のファイル (CSSファイル)にして、HTMLファイルからリンクで参照できます。

多数のHTMLファイルのスタイルを一括して管理でき便利です。

CaScadeS では、初心者モードとエキスパートモードがあり、初心者モードでは外部スタイルを利用できません。エキスパートモードにするには、KompoZer のメニューモードで[ツール][設定]の[全般][HTML要素・属性でなく、CSSによるスタイルを用いる]のチェックボックスにチェックを入れます。

内部スタイルを外部スタイルに書き出すことができます。既に作ってあるCSSファイルを利用することもできます。

このページの最初へ

主 な要素にスタイルを

body 要素

body要素に背景色を付けてみます。

  1. KompoZer を起動して編集中のHTMLファイルを開き、メニユーバーの[ツール][CSSエディタ]か編集ツールバーの[CaScadeS]ボタンをクリックして (F11キーでも可)で、CaScadeS を起動します。
  2. 左上の4つ並んだ小さいアイコンの左端アイコンをクリック(または三角▼ボタンをクリック[新しいstyle要素]をクリック) します。左ペインに[内部スタイルシート]ができます。
  3. 左上の4つ並んだ小さいアイコンの左端アイコンの三角▼ボタンをクリック[新しい規則]をクリックします。右ペインが[スタイル 規則を新規作成]になります。
  4. [指定された種類の全要素に適用されるスタイル]のオプションボタンを選択して、下のコンボボックスの三角▼ボタンをクリックし て[body(body直下)]をクリックします。(直接[body]と入力してもよい)
  5. [スタイル規則の作成]ボタンをクリックすると、左ペインにbodyが表示され、右ペインは[スタイル規則]となりセレクタ: body となっています。この画面で上の[テキスト][背景][枠線][ボックス]などのタブを開くことができます。[背景]タブを開きます。
  6. [背景色]の右のボタンをクリックすると[ブロックの背景色]ウインドウで、色を選択できます。適当な色が見つからないときは、 近い色から彩度を変更するなどの方法や直接色コードを入力することもできます。
  7. [OK]ボタンをクリックすると、ページエリアに背景色が適用されています。
段 落P要素
font-size: medium;

line-height: 150%;

color: black;

font-weight: normal;

font-style: normal;

text-transform: none;

text-align: left;

同じように左上の4つ並んだ小さいアイコンの左端アイコンをクリックして、[スタイル規則を新規作成][指定された種類の全要素に適用 されるスタイル]で[p(段落)]を選び、

とでもして[OK]ボタンを押します。スタイルの規則に戻ると、右のように記載されています。

さらに、[ボックス]タグをクリックして、余白の右:10%、左:10%、を付け加えます。[10%]は、コンボボックスを開いて [0%]を選びスピンボタンで10%にできます。

見 出しhx要素

サンプルファイルは次のように次のように設定してみます。

要素 テキスト ボックス
フォントサイズ 前景色 フォントウェイト 行揃え 左余白
h1 とても大きいxx-large #006600 太字 中央 -
h2 大きい x-large #204900 太字 10%
h3 140% #2baf00 太字 10%
h4 少し大きい large #279f00 太字 10%
h5 120% #2cb500 太字 10%
h6 普通 black 太字 10%

ブラウザの初期値に頼る部分は設定しなくてもよいが、ブラウザによって表示が変わることがあります。

ページの背景と見出しと段落の文字が、ページ全体の見栄えに大きく影響します。

リ ストol,ul,dl要素

CaScadeS の[スタイル規則を新規作成]では、リストの要素はコンボボックスの一覧にありませんので、ol,ul,dlの要素名をそれぞれ直接入力して、[スタイル 規則の作成]ボタンをクリックします。

[ボックス]や[リスト]タブで必要な設定をします。dt要素は[テキスト]タグのフォントウエイトを[太字]にすると定義項目と定義 の区別がはっきりします。

ス タイルシートを外部ファイルへ

ここまでのスタイルは、ソースをみるとHTMLファイルのhead要素に

<style type="text/css"> 〜 </style> とかなり長いスタイルが書かれています。これを CSSファイルに移すことができます。

  1. KompoZer の[ツール][設定][全般]で、[HTML要素・属性でなく、CSSによるスタイルを用いる]のチェックボックスにチェックが入っていることを確かめま す。
  2. CaScadeS の[全般]タブで、[スタイルシートを外部に出力し、そちらへと切り替える]ボタンをクリックします。
  3. [CSSファイルを選択]ウインドウが開きますが、新しく作るのですからフォルダを選んでファイル名を付けて拡張子を [*.css]として保存します。

以上でスタイルシートの外部ファイル(ここではsample.css)が出来ました。head要素の中のstyle要素はなくなりまし た。このsample.cssをメモ帳などのエディタで見ると、セレクタごとに纏められてなく、とても読みにくく直接編集はできません。編集するときは CaScadeS を使います。

div 要素とspan要素

この二つの要素はスタイルコンテナと呼ばれていて、要素自体では何もしない「入れ物」ですが、要素のグループをまとめてスタイルシート を適用する重要な役割があります。

div要素はブロックレベルの要素を包含でき、span要素はインライン要素のみ包含できます。

例えば、「目次を作る」で作った目次は、いくつかのリストで作られていますが、これらをdiv要素の中に作って、ページの左側に表示す るなどということができます。また、文章の一部の範囲をspan要素で囲んで文字の色を赤色にできます。

  1. すでに目次が作ってあるときは、一度削除します。KompoZer でメニューバーの[挿入][目次][削除]をクリックします。
  2. h1の下に空白行を作り,[目次]と入力します。(div要素はページの最下部には作らないようにします。何かテキストを入力し てからdiv要素を作ります。)
  3. 入力した文字にカーソルお置き、書式ツールバー1の[段落の書式を選択]のコンボボックスを開いて、[汎用ブロック(div)] を選択します。
  4. div要素の範囲が赤線で表示されています。メニューバーの[表示][ブロックの輪郭]をクリックすると、チェックが入りブロッ ク要素の範囲が黒い線で囲われわかりやすくなります。
  5. 目立たしたい文字列をマウスでドラッグして選択し、書式ツールバー2の[文字色の選択](黒い四角のアイコン)をクリックして色 を選択すると、その部分の文字の色が変わります。
名 前付きクラス

これまでのスタイルシートの説明は、それぞれの要素全体に対するスタイル設定についてでした。ページの中のどこでもその様子があると同 じスタイルになります。これだけですと「ここだけ別のスタイルにしたい」というときは不便です。そんなときのために[クラス](class)が用意されて います。

クラスの作り方は、スタイルシートのセレクタを半角英数文字で、ドット+クラス名として、続いて宣言ブロックを書きます。

[セレクタ]         + [宣言ブロック] 普通のスタイル
[(要素名).クラス名]  + [宣言ブロック] 特定要 素 のクラスの スタイル

[.クラス名]        + [宣言ブロック] すべての要素のクラスの スタイル

特定の要素に適用させる時は[要素名]に続いて[ドット+クラス名]とし、すべての要素を対象にするときは、セレクタの最初がドットに なり ます。

クラスを使用するときは、適用する要素にclass属性でクラス名を指定します。

このページの最初へ

目 次にクラスでスタイルを適用
  1. [div要素とspan要素]により目次がdiv要素の中に作ってあるものとします。
  2. CaScadeS を起動して[スタイル規則を新規作成]で[次に指定するセレクタに該当する要素に適用されるスタイル]を選択して、下のコンボボックスに [div.index]と入力して、[スタイル規則の作成]ボタンをクリックします。
  3. 左ペインのsample.cssのリストにdiv.indexが加わりました。indexがクラス名です。
  4. 左ペインの枠線タブをクリックして、[上:種類:]の三角▼ボタンをクリック、[線(solid)]を選択、[幅:]を開き [thin]を選択、[色:]を開いて緑色を選択。
  5. [ボックス]タブをクリック、[浮動表示:]を右、[最少幅:]を20%、[最大幅:]を25%にして[OK]ボタンをクリック。
  6. ページエリアに戻って、目次の枠線の中(div要素)で右クリックし(HTMLタグモードで[目次]についているDIVタグを右 クリック)、[詳細プロパティ]をクリック。
  7. [プロパティの詳細編集]ウインドウの[HTML属性]タブで、下の[属性]コンボボックスを開き、[class]を選択し、右 の[値]テキストボックスにクラス名を[index]と入れ[OK]ボタンをクリックします。

これで、目次は右に寄せて表示できましたが、左右に10%の余白を取っているul要素を入れ子にして使っていますので、レイアウトが乱 れています。これを調整します。

ページエリアを[HTMLタグ]モードにして、CaScadeS を起動してul要素のクラスを次のように作ります。

  1. [スタイル規則を新規作成]で、[次に指定するセレクタに該当する要素に適用されるスタイル]を選択して、下のコンボボックスに [ul.h2]と入力して、[スタイル規則の作成]ボタンをクリック。
  2. [ボックス]タブで、[余白(margin):]の上:と左:、[枠内余白(padding):]の上:と左:をともに[0%] にして[OK]ボタンをクリック。
  3. ページエリアに戻り、「例会の報告」のULタグを右クリック、[リストのプロパティ]をクリック、[詳細編集]ボタンをクリック します。
  4. [プロパティの詳細編集]ウインドウの[HTML属性]タブで、下の[属性]コンボボックスを開き、[class]を選択し、右 の[値]テキストボックスにクラス名を[h2]と入れ[OK]ボタンをクリックします。
  5. さらにCaScadeS を起動し、[ul.h3]のスタイルを[ボックス]タブで、[余白(margin):]の上:を[0%]左:を[1em]、[枠内余白 (padding):]の上:と左:をともに[0%]にして、[テキスト]タブで[フォントサイズ:]を[少し小さい]にして、[リスト]タブで[リスト のマーカーの種類]を[中抜き丸]にして[OK]ボタンをクリック。
  6. ページエリアに戻り、「会長の挨拶」「鐘は鳴る」「KompoZer」のそれぞれのULタグを右クリック、[プロパティの詳細編 集]ウインドウで[h3]のクラス名を設定する。
  7. 同様にして、「最近のICT事情」「Excelでデーターベース」を[h4]というクラス名で[ボックス]タブは[h3]と同 じ、[リスト]タブで[四角]、[テキスト]タブで[小さい]の設定する。

KompoZer のページエリアの[ビュー]では、リンクは効きませんしスタイルも設定が忠実に反映されていないこともあります。編集ツールバーの[閲覧]ボタンをクリッ クし、外部ブラウザを起動して表示させることができます。

スタイルシートについては、もっと複雑です。別のページでもう 少し詳しく触れたいと思います。
ここまでのサンプルファイル sample6.html

画 像の挿入

KompoZer では、インターネットで通常使われている画像ファイル、gif・jpg・png のファイル形式をサポートしています。画像処理機能はありませんので、別に画像処理ソフトを用意してHTMLファイルに挿入できる画像ファイルにしておき ます。

画像ファイルを作成中のHTMLファイルと同じフォルダに保存するのが、最もわかりやすい方法です。必要であれば他のフォルダにおいて 相対参照したり、他のサイトの画像をURL(正しくはURI)で絶対参照することもできます。

  1. 画像を入れる行にカーソルを置き、編集ツールバーの[画像]をクリック。
  2. [画像のプロパティ]ダイアログボックスの[URI]タグで、[画像のURI]のテキストボックスに画像のURIを指定します。
  3. 同じサイトの画像を表示する場合は、テキストボックスの右の[ファイルの選択](フォルダを開いているアイコン)をクリックし て、画像を指定します。([相対URLを使用する]チェックボックスにチェックが入る。)
  4. [ツールチップ]には、画像の補助情報を書き加えます。title属性に書き込まれます。
    [代替テキスト]には、画像を説明する文章を必ず入力します。入力しないと入力を促すウインドウが出ます。
  5. [大きさ]タブをクリックして、[実物の大きさ]を選択すると、ページに画像本来の大きさで表示されます。
  6. 必要により[表示]タブをクリックして、画像周辺の余白の設定、テキストの回り込みや位置の設定が出来ます。
    「画像をページの左に表示し文章を右に回り込ませたい」などのときは、

以上の手順では、1.のカーソルを入れた場所により、書式ツールバーの段落の書式を選択で指定したブロック要素の中にimg要素が入り ます。img要素はインライン要素ですから、body直下に置くことはできません。

また、画像を正確にページの中央に表示させることは、align属性がHTML4.01の厳格型 strict では廃止されていますので難しく、スタイルシートで左右の余白(margin)を適当に設定することになります。

挿入した画像の設定を変更するときは、画像を右クリックしてショートカットメニューの[画像のプロパティ]をクリックすると、画像を挿 入するときと同じ[画像のプロパティ]ダイアログボックスが表示され、編集できます。

表 の作り方

Webページで[表]は、table要素(テーブル)を使います。「文章のレイアウトのためにテーブルを使うべきではない」と言われて います。レイ アウトはスタイルシートで設定すべきですが、Q&Aなどでtable要素でページのレイアウトを設定する方法を示していることがありま す。その方 が簡単の場合がありますが、安易に追従しないようにしましょう。

表は領域を縦に区切った「列」と、横に区切った「行」で枡目(セル)が作られます。「列」はtd要素で、「行」はtr要素で区切りま す。

ド ラッグして表を作る

  1. 表の列数と行数をあらかじめ決めておく。(後で変更できます)
  2. 編集ツールバーの[テーブル]をクリック。(またはメニューバーの[テーブル][挿入][テーブル])
  3. [テーブルの挿入]ダイアログボックスの[簡易設定]で、マウスで左上から必要な列数・行数をドラッグして選択する。
  4. 右下のセルでダブルクリックする。

それぞれのセルにテキストを入力すると表が出来ます。

数 値を入力して表を作る

  1. 表の列数と行数をあらかじめ決めておく。(後で変更できます)
  2. 編集ツールバーの[テーブル]をクリック。(またはメニューバーの[テーブル][挿入][テーブル])
  3. [テーブルの挿入]ダイアログボックスの[詳細設定]で、列数と行数、テーブルの横幅、枠線の太さを入力
  4. [OK]ボタンをクリック。

表の枠線が出来るので、それぞれのセルにテキストを入力する。

このページの最初へ

文 字列を入力してから表を作る

要素*テキスト****ボックス
*フォントサイズ*前景色*フォントウェイト*行揃え*左余白
h1*とても大きいxx-large*#006600*太字*中央*-
h2*大きい x-large*#204900*太字*左*10%
h3*140%*#2baf00*太字*左*10%
h4*少し大きい large*#279f00*太字*左*10%

上の二つの方法では、各セルに文字をキーボードから入力したり、コピー貼り付けをするのが少し大変です。

すでに表のデーターがある場合は、少し手を加えて利用する方法があります。セルをカンマで区切られたCSVファイルはそのまま使えま す。 CSV以外でもたとえば右のような表のデータのようにテキ ストエディタで加工して使用できます。[*](アスタリスク)はセルの区切りに使っています。表に使っていない文字で区切ることもできます。タブ(Tab キー)は使わない方が良いようです。

  1. KompoZer のページエリアで表を入れるところに空白行を作り、カーソルを置きます。
  2. 区切り文字付テキストをコピーしてカーソルの位置に貼りつけます。
  3. 貼り付けた部分を選択してメニューバーの[テーブル][選択文字列からテーブルを作成])をクリックします。
  4. [テーブルへの変換]ウインドウで、[その他]を選択して、テキストボックスに区切りに使った[*](アスタリスク)を入力しま す。
    CSVファイルをつかうときは、[カンマ]を選択します。
  5. [区切り文字を削除する]のチェックボックスにチェックを入れます。
  6. [OK]ボタンをクリック。

表 の整形

以上で表はできますが、もう少し手を加えます。 この例の場合はまずセルを統合します。

  1. ページエリアの下部の[編集モードツールバー]で、[HTMLタグ]を選択します。
  2. 1行2列目の「テキスト」のセルを右クリックし、[このセルを右と桔合]をクリック。
  3. 2.をさらに2回繰り返す。
  4. ショートカットメニューの[テーブルのセルのプロパティ]をクリック、[テーブルのプロパティ]ダイアログボックスの[セル]タ ブで、[内容の配置]の[水平方向]のリストボックスを[中央]に、[セルの種類]を[見出し]に設定。
  5. 1行1列目の「要素」のセルを右クリックし、ショートカットメニューの[テーブルのセルのプロパティ]をクリック、[テーブルの プロパティ]ダイアログボックスの[セル]タブで、[セルの種類]を[見出し]に設定、[詳細編集]ボタンをクリック。
  6. [テーブルのプロパティ]の[THML属性]タブで、下の[属性]リストボックスを開き、[rawspan]をクリックします。 [値]に[1]が入りますが、下のセル1個をこのセルに結合するのですから[2]に変更します。
    どういう訳か2行目に空のセルが挿入されますので、[編集モードツール バー]で、[ソース]を選択し挿入された空のセルのタグ[<td></td>]を削除します。

は表(テーブル)の幅・位置などで す。

  1. ページエリアの下部の[編集モードツールバー]で、[HTMLタグ]を選択します。
  2. [TABLE]を右クリックしてショートカットメニューの[テーブルのセルのプロパティ]をクリック。
  3. [テーブルのプロパティ]ダイアログボックスの[テーブル]タブで、大きさの[幅]のテキストボックスの[100]を[75]% に、[テーブルの配置]のリストボックスは[中央]を選択。
  4. 1行目2行目と1列目は見出しになりますから、「要素」「テキスト」セルで設定したように、該当のセルごとに[セルの種類]を [見出し]に設定します。
  5. 表の表題(caption要素)の位置を設定するには、[テーブルのプロパティ]ダイアログボックスの[テーブル]タブで、 [テーブルの表題 (caption)]のリストボックスで[テーブルの上に]などを選ぶとできますが、表題のテキストを入力する場所がわかりません。[詳細編集]ボタンを クリックして属性リストボックスに[caption]と入力して、[値]にテキストを入力することになります。
  6. 同じように、[summary属性]で非視覚ブラウザのためにテーブルの目的や構造について情報を提供する配慮が必要です。 summary属性は属性リストボックスのリストに用意されています。

まだほかにもテーブルに設定するものが沢山あります。

ここまでのサンプルファイル sample7.html

このページの最初へ

フォー ムの利用

Webページでない普通のアプリケーションでは、テキストボックスやオプッションボタン・チェックボックスなどのコントロールを配置さ れたところにデータを入力し、コンピューターの中でプログラムにより処理されます。

Webページで「フォーム」は、[form要素]を使って作られたところにWebページ閲覧者が入力し、ブラウザでサーバーにデータを 送り、サーバーの中で処理できるようにする仕掛けを作ります。サーバーの中でCGI(Common Gateway Interface)によりプログラムが起動され、その結果をブラウザに送り返します。

[form要素]だけでは何もできませんが、その中に[input要素]でいろいろなコントロールを使い、ページの閲覧者がページの設 置者に接触できます。 Webページ閲覧者はサーバーの中の動作には直接関与しません。

具体的には、

などのことができますが、少し敷居が高くサーバーの中で動作するスクリプト(CGI)を用意しなければなりません。自作できればよいの ですが、Webで提供されているフリーソフトを利用することになります。

ともかくフォームを形作る

ここでは、一先ずCGIを使わないでページを読んだ感想をメールで送るフォームを作ってみますが、動作しない場合があるそうで、実用に は使えません。

form要素
  1. フォームを作るところにカーソルを置き、編集ツールバーの[フォーム]をクリック。
  2. [フォームのプロパティ]ダイアログボックスで、[名前]にフォームの名前を入力。
  3. [送信先URL]に[mailto:xxxxx@xxxxx.xxx.xx]と mailto: + 送信先アドレス を入力。

    Webページにメールアドレスを記載すると、迷惑メール業者 が収集して利用しますので、好ましくありません。CGIで別ファイルにしたり、メールアドレスを文字実体参照に変換して記載するなど工夫します。文字実体 参照変換については、http://kinran.jp/bbsmail/index.htmlを 参照

  4. [メソッド]に[post]を選択。
  5. [OK]ボタンをクリック。

以上で[form要素]ができました。[mailto:xxxxx@xxxxx.xxx.xx]は普通のリンク[a要素]の[href 属性]でもメールソフトを起動させることができます。フォームでは、Webページの中で入力されたデーターをメールで送るのですが、CGIを使わないと データーを送ることはできないようです。ここではフォームの形を作ります。

入力フィールド

form要素の中にはブロック要素だけが入ります。テキストボックスやチェックボックスなどの入力フィールドはインライン要素ですか ら、div要素の中に入れます。kompoZerでは何もない所にdiv要素を作るのは面倒ですので、入力フィールドを作ってからdiv要素で囲います。

選択リスト
  1. form要素の中にカーソルを置き、編集ツールバーの[フォーム]の右にある▼ボタンをクリック。
  2. リストの[選択リスト]をクリックし、[一覧選択のプロパティ]で[一覧の名前]で適当な名前を入力。[高さ]に適当な数字(2 以上)を入力すると広く表示される。
  3. [選択肢を追加]ボタンをクリック、選択肢の[文字列]の入力を繰り返し一覧のリストを作る。
チェックボックス
  1. チェックボックスを置くところにカーソルを置き、「編集ツールバーの[フォーム]の右にある▼ボタンをクリック。リストの [フィールド]をクリック
  2. [入力フィールドの種類]の右の▼ボタンをクリック。チック ボックスをクリック。
  3. [フィールド設定]の[フィールド名]に名前を入力。[OK]ボタンをクリック。
  4. できたチックボックスの後に選択する項目のテキストを入力する。
テキスト入力エリア
  1. テキスト入力エリアを置くところにカーソルを置き、編集ツールバーの[フォーム]の右にある▼ボタンをクリック。リストの [フィールド]をクリック
  2. [文字列入力エリア]ウィクリック。
  3. [文字列入力エリアのプロパティ]の[フィールド名]に適当な名前、[行数]に入力エリアの行数、[列数]に入力エリアの幅(半 角文字数)を入力。
送信ボタン
  1. ボタンを置くところにカーソルを置き、編集ツールバーの[フォーム]の右にある▼ボタンをクリック。リストの[フィールド]をク リック
  2. [入力フィールドの種類]の右の▼ボタンをクリック。送信ボ タンをクリック。
  3. [フィールド設定]の[フィールド名]に名前を入力。
  4. [値]に[クリックすると送信します]と入力し、[OK]ボタンをクリック。
div要素で囲う

form要素の中に作った、select要素、input要素、textarea要素は、何れもインライン要素ですから、直接form 要素の中に入れることができませんので、div要素で囲います。

選択リスト、チェックボックス、テキスト入力エリア、送信ボタンをそれぞれ関係のテキストを含めて選択し、書式ツールバーの[段落の書 式を選択]で、[汎用ブロック(div)]を選択します。

ここまでのサンプルファイル sample8.html

このフォームは機能しません

これでフォームは形はできたのですが、このままでは機能しません。サーバーに転送してもInternet Explorer では、送信ボタンを押しても何も起きません。Firefox ではメールソフトが起動し宛先のアドレスの入ったメール作成画面が開きますが、選択リスト・チェックボックス・テキスト入力エリアに入力した内容は入りま せん。

ブラウザに入力したものがサーバーに送られ、サーバーの中でメールが作られ発送されるには、サーバーの中でプログラムを動かさなければ なりません。そのためにはPerlなどの開発言語で作られたCGI(Common Gateway Interface)を使うことになります。

サーバーやレンタルの条件によりCGIを使えない場合がありますので、事前に確認する必要があります。CGIを最初から作るのは開発言 語の知識がなければなりません。フリーソフトとして提供されているものをテンプレートとして利用することができますが、自分の用途に合わせるのは簡単では ありません。

KompoZer の使用とは離れますので、別に勉強することにします。

このページの最初へ

サイトマネジャーを使う

今まで非表示にしていたのですが、サイトマネジャーを使うとローカルのパソコン(サーバーでない自分のパソコン)でも、(リモート) サーバーでも、フォルダ構成をツリー状に表示出来ますので管理しやすくなります。

再度マネジャーを表示させるには、メニューバーの[表示][表示切替え][サイトマネジャー]をクリックするか、ファンクションキーの [F9]を押します。

ローカルパソコンのフォルダ

パソコンの中をリモートサーバーの中と同じフォルダ構造にしておくと、管理がし易くなります。

  1. サイトマネジャーの[サイトを編集]か、メニューバーの[編集][公開サイトの設定]をクリック。
  2. [公開設定]ダイアログボックスの[サイト名]テキストボックスに、サイトの名前を入力。
    サーバーと区別するために XXXX_Local などと入力するとよ い。
  3. [ログインの情報][サーバーのアドレス]のテキストボックスに、ローカルのフォルダのパスを入力する。[ディレクトリ選択]ボタンをクリックしてフォルダを指定する。 file:///D:/My% 20Documents/… と表示される。
  4. 他の項目は空欄のままにして[OK]ボタンをクリック。

[公開設定]ダイアログボックスは、サーバーの管理をする前提で作られているので、各項目やヒントは、ローカルのフォルダー・ファイル を管理する時に適していないが、適当に読み変えます。サイトマネジャーの上部にあるドロップダウンリストで、[すべて]を選ぶとhtmlファイルだけでな く画像ファイルなどもツリー状に表示されます。ツリーのタイトルバーの右にある小さいアイコンをクリックすると、ファイルサイズ・更新月日を表示させるこ とができます。

htmlファイルをダブルクリックすると、ページエリアに表示され編集できます。今までのファイルを開くときに、[ファイル][ファイ ルを開く]で開くよりも、サイトと同じフォルダ構成の中から開くほうが簡単で分かりやすいと思います。また、次の「リモートサーバーのホルダ」で直接編集 する方法と違い、FTPソフトを使うなど二度手間になりますが、安心して確実に操作できます。

リモートサーバーのフォルダ

前の「ローカルパソコンのフォルダ」と同じ所でFTPサーバーにアクセスする設定をします。

  1. サイトマネジャーの[サイトを編集]か、メニューバーの[編集][公開サイトの設定]をクリック。
  2. [公開設定]ダイアログボックスの[サイト名]テキストボックスに、サイトの名前を入力。
  3. [サーバー情報]にサイトのURLを入力。
  4. [ログインの情報]にFTPサーバーのURLを入力し、[ユーザー名][パスワード]を入力。
  5. 必要により[パスワードを保存]にチェックを入れ、[OK]ボタンをクリックします。

以上の操作でサイトマネジャーにサイトの名前が表示され、開く(ダブルクリックする)とFTPサーバーに接続してサイトの中のフォルダ構造が見えるはずです。

FTPサイトに接続できない場合は、セキュリティソフトのファイアウォールでKompoZerが外部との通信が許可されているか確かめます。また、プロバイダなどからの文書により、[公開設定]の内容に間違いがないか確かめます。FTPサーバーのURLは、フリーソフトFFFTPの設定では[ftp.…]ですがKompoZerでは[ftp://ftp.xxx…]となります。

サイトの中が見えれば直接編集出来ます。そして、サーバーに編集したファイルを送るのは、編集ツールバーの[公開]を使います。

このページの最初へ

サーバーへファイルを転送

前項でサーバーの中身が見えれば転送するための設定ができていますので、サイトマネジャーでファイルを転送(アップロード)することができます。

ページエリアに開いておくと直ちに転送します。リモートサーバーのファイルを編集したときはこの方法が手軽です。

  1. サイトマネジャーで転送するHTMLファイルを選択してダブルクリックすると、ページエリアにページが表示されます。
  2. 編集ツールバーの[公開]をクリックすると、直ちに転送が始ります。
  3. ローカルのファイルを選択したときは、リモートサーバーのファイルを選択したときよりも転送時間がかかります。

サイトマネジャーで選択しただけで[公開]をクリックすると設定画面が出ます。

  1. サイトマネジャーで転送するHTMLファイルを選択して、編集ツールバーの[公開]をクリック。
  2. [ページの公開]ダイアログボックスの[公開]タブで[サイト名]にリモートサーバーを選んで、[設定]タブのすべての項目が入力されていることを確認します。
  3. [公開]タブで、[ページタイトル]にtitle要素の内容を、[ファイル名]にファイル名を入力します。
  4. [このページのサイト内でのサブディレクトリ]に、ページを入れるフォルダのフルパスを入力します。
  5. 画像やスタイルシートのCSSファイルも転送するときは、[画像などの関連ファイルも含める]のチェックボックスにチェックを入れて、転送するフォルダを指定します。
  6. [公開]ボタンをクリックすると転送を始めます。

4.のサブディレクトリ(フォルダ)を間違うと、間違った所へ転送されます。FTPソフトで転送したほうが確実のようです。

削除するときは FFFTP などの FTPソフトを使用することになります。

サイトマネジャーは改良中で次のバージョンでもっと使いよくなるらしいです。[公開](ファイルの転送)は別のFTPソフトを使ったほうが無難と思います。

このページの最初へ


 連絡はメー ルで  start update: 2008-9-24