Mozilla Composer Lecture

14.罫線を引く

リンク集を作ったところで、「スキー大好きっ！」はほぼ完成です。
ここからは、これまで説明しなかった Composer の機能について説明していきます。

構成ツールバーの横罫線アイコン

をクリックすると、罫線を引くことができます。

横罫線（Horizontal Rule）は、<hr>タグで指定します。<hr>タグには終了タグはありません。

<hr>

罫線にカーソルを当てて、ダブルクリックすると [横罫線のプロパティ] ダイアログボックスが開き、横罫線に関する設定を行うことができます。
画面が [標準] モードだと罫線を範囲指定できないので、うまくダイアログボックスを開けない場合がありますが、そんな時は、[HTML タグ] モードに切り替えてから、 hrアイコン

をダブルクリックすれば簡単に開くことができます。
横罫線のプロパティダイアログ

[幅(W)]
罫線の幅（width）を %（ウィンドウに対する割合）かピクセル数で指定します。

[高さ(G)]
罫線の高さ（height）をピクセル数で指定します。

[3D 表示]
チェックを入れると、罫線に影をつけて立体的に表示します。

[配置]
罫線の位置を選択します。左から右、右から左は変更できないようなので、変更したい時は、中央を経由して変更します。

[デフォルトとして使用(D)]
設定した大きさと配置で常に罫線を引けるようにします。同じ設定の罫線を、何回も使いたい時に便利です。

となるはずですが、実際にやってみると、引いてしまった罫線の幅と高さは変更できませんでした。
変更したい時は、[<HTML> ソース] モードで変更しましょう。

この罫線のソースは、こうなります。

「margin-left: 0px;」は、左の空白が0 ピクセル、つまり左に空白なしということなので、左に配置するということになります。
「margin-right: auto;」は、右の空白は自動ということなので、「ウィンドウの幅＝左の空白＋罫線の幅＋右の空白」となるように、右の空白が自動的に設定されます。片方（この場合は左）を指定すれば、反対側（右）は省略できますが、Composer はまめに指定してくれるようです。
罫線を中央に配置する場合、罫線はデフォルト（何も指定しない時）が中央なので、margin プロパティは不要です。
罫線を右に配置する場合は、「margin-left: auto; margin-right: 0px;」となります。
罫線の幅は width プロパティ、高さは height プロパティで指定します。
罫線はデフォルトで 3D 表示となり、3D 表示を中止する時に、noshade プロパティを記入します。プロパティ値 "noshade" は省略できます。

罫線を削除するには、罫線を指定して、Delete キーを押します。[標準] モードで罫線をうまく指定できない時は、[HTML タグ] モードにしてから削除してください。

HTML と CSS
罫線に関する設定のうち、3D 表示以外は CSS で設定されています。上の例をすべて HTML で指定するとこうなります。

配置は align プロパティで、プロパティ値 left、center、right を指定しますが、HTML では、この3つしか指定できないところがポイントです。CSS の場合は、margin プロパティで、プロパティ値に % やピクセル数を使えば詳細に指定することができるので、レイアウトをより細かく設定することができます。

Home / Index / Prev / PageTop / Next