Home / Index / Prev / Next

14.罫線を引く

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

構成ツールバーの横罫線アイコンをクリックすると、罫線を引くことができます。

横罫線(Horizontal Rule)は、<hr>タグで指定します。<hr>タグには終了タグはありません。
<hr>
罫線にカーソルを当てて、ダブルクリックすると [横罫線のプロパティ] ダイアログボックスが開き、横罫線に関する設定を行うことができます。
画面が [標準] モードだと罫線を範囲指定できないので、うまくダイアログボックスを開けない場合がありますが、そんな時は、[HTML タグ] モードに切り替えてから、hrアイコンをダブルクリックす れば簡単に開くことができます。
横罫線のプロパティダイアログ
[幅(W)]
罫線の幅(width)を %(ウィンドウに対する割合)かピクセル数で指定します。

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

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

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

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

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

こ の罫線のソースは、こうなります。
<hr style="margin-left: 0px; margin-right: auto; width: 50%; height: 10px;"
noshade="noshade">
「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 で指定するとこうなります。
<hr align="left" width="50%" size="10" noshade="noshade">
配置は align プロパティで、プロパティ値 left、center、right を指定しますが、HTML では、この3つしか指定できないところがポイントです。CSS の場合は、margin プロパティで、プロパティ値に % やピクセル数を使えば詳細に指定することができるので、レイアウトをより細かく設定することができます。

Home / Index / Prev / PageTop / Next
© 超初心者のためのホームペー ジ作成講座