< htmlstudy002.htm > < indextable01.htm > < index.html >
<<< add_class_attribute_01_001.html >>>
2023R05-0421-FRI-1636
指定pタグ内にクラス属性を生成しそこにスタイルを入力::
pタグを選択:
エディタ内の目的のpタグ内にカーソルを置くと、左下で横向きに展開された<body>から始まるタグリストが更新されます。エディタ内のカーソルを置く位置を変えて左下タグリストに目的の<p>を出します。左下タグリストの<p>をクリックすると、エディタ領域内の目的の<p>の適用範囲内の文字列が全て反転されます。それで目的のpタグなのかどうかわかりますし、その範囲もわかります。
クラス名入力:
そして、上方のドロップダウン・コンボボックスの(左から3番目)class名のボックスに、class名を入力します。ただ何故か今の状態がおかしいのか記述しても文字は見えません。入力してEnterを押すと登録されます。左下のタグリストに<p .classname>のようにclass名が表示されます。あと、右のパネル内のドロップダウンにも反映されます。
スタイル入力:
次に、右のパネルの、スタイルプロパティーのスタイル適用先を[クラスで指定する...]を選択後、その右のドロップダウンリストで入力したクラス名を選択しします。それでやっとスタイル設定を開始します。各スタイルを入力します。
再利用:
class属性の再利用は、指定したいエディタのp範囲にカーソルを置きます。すると、左下に展開された<body>から始まるタグリストに<p>が出てきます。そのタグリストの<p>をクリック選択しエディタ内のp範囲を反転させ、上記のドロップダウン・コンボボックスの(左から3番目)class名のボックスのドロップダウンリストより目的のclass名を選択するとスタイルが適用されます。