tack Developers Group Homepage!

〜BlueGriffonでウェブページ制作〜

class属性を作成する準備：

メニュー‐[パネル]から[スタイルプロパティ]をチェックする。ウィンドウの右に「スタイルプロパティ」操作パネルが出ます。

選択範囲を指定して選択しますが、table内でなければpタグは指定されているはずですのでそれを使います。それ以外で文字列を部分的に選択する場合は spanタグを使います。選択範囲を指定して、書式メニューのSpan(もしくは、ウィンドウの左端の縦のツールバーの一番上「＜＞」のボタンを押しプルダウンしたリストからspan)を指定し、選択範囲をpもしくはspanでくくることができます。

他に、ウィンドウ下部のタグ階層リストから、該当するタグを指定することもできます。 bodyに適用させたい場合はクリックすればbodyが選択されます。エディタ内でカーソル移動をすると下部のタグ階層リストに階層が反映されているのがわかります。span などを挿入した場合、そのタグ階層リストに反映されます。そしてそのタグ階層リストにはclass属性も表示されますので今の状態を確認できます。クリックすればその範囲選択をしてくれます。

ではclass属性の作成です。「スタイルプロパティ」タブから[スタイルの適用先：]のコンボボックスをプルダウンします。出てくるリストから[クラスを指定する]をクリックして選び、すぐ右に出るコンボボックスに自由なclass名を入力します。それから各プロパティを指定していきます。

「スタイルプロパティ」でプロパティを指定します。

決定キーはありません。変更はリアルタイムにソースに反映していきます。ですから、各プロパティの設定はひとつづつ行い取り消すときはctrl+zで戻ってください。常にctrl+zを使うのが安全です。要らないプロパティの設定が残ってしまわないようにするためにもそのほうが安全です。並行してソースをチェックしてください。

既にあるclass属性の再指定：

再指定したいclass属性を、既存のタグに付けるか、部分的な範囲選択で新しい範囲をタグでくくって付けるかがあります。まず既存のタグの場合、pや bodyや、tableなどの決まった範囲選択ですが、エディタのカーソル位置などで下部のタグ階層リストに反映させてそのタグを選択してください。

新しい範囲の場合、選択範囲をspanなどでくくって下部のタグ階層リストに反映させてから指定します。タグ階層リストのタグはクリックするとその範囲を範囲選択してくれます。

ではclass属性を再指定する方法ですが、class属性の再指定の場合は、上部ツールバーのすぐ下の5つ並んだコンボボックスの左から3番目の「選択範囲に適用するクラスを選択」のコンボボックスをプルダウンするとソースに記載されている既にあるclass名のリストが出ますので、それをクリックして指定してください。それで完了です。しかし忘れずにソースボタンでソースコードを表示し変更内容を確認しましょう。

class属性の再編集：

エディタ内のクリックなどをしてカーソルを該当classの場所まで移動。下部のタグ階層リストに反映された「タグ名+" ."+class名」をクリック。すると「スタイルプロパティ」にclass属性の設定が展開されます。

注意事項1：

2つ以上のp(Paragraph)をまたいでspanは設定できません。構造的に考えれば合点がいきます。class属性を指定するのはbody, tableを除けば、pタグが最大単位です。pタグを全て含むならばdivを使い、それ以外は最大はpタグ単位で指定することに注意してください。

注意）

Wysiwyg編集では見た目に同じ表示になっていてもソースがめちゃくちゃになっている場合がとても多いです。例えばエディタ内でカット・アンド・ペーストを繰り返すような編集をするとソースがめちゃくちゃになります。小まめにではなく”常に”ソースを確認して、[すべての文字スタイルを削除]機能を使ってタグをクリンナップしながら編集します。

タグからclass属性を削除：

pについたclass指定は「すべての文字スタイルを削除」で消せません。ウィンドウ上部のコンボボックス、左から3番目、クラス指定されている場合はここにclass名が表示されているので、これを削除してエンターを押すとタグ部分のclass指定が消えます。

順を追って説明しますと、まず、消したいスタイル部分にマウスカーソルを置きます。すると、ウィンドウ左下のタグ階層リストに、「タグ名+" ."+class名」で表示されますので、それをマウスでクリックします。するとエディターのタグ範囲が選択状態になると思います。最後に、ウィンドウ上部のコンボボックスの、見えているclass名を削除しエンターを押します。すると文字スタイルが解除されると思います。

(... 2022R04-0723-SAT-2047)
(... 2022R04-0724-SUN-0917)
(... 2022R04-0724-SUN-1332)
(... 2022R04-0725-MON-1350)

(... 2022R04-0810-WED-1322)

< BACK TO "htmlstudy002.htm">

<<< classmake_study_01_001.html >>>