|   | ☜  | 11  12  13  14 | ☞ |

CSS エディタCSSエディタのアイコン

CSS ファイルの新規作成と編集ができます。

CSS エディタとは

「CSS エディタ」とは、ホームページ・ビルダーに付属している CSS ファイル作成ツールです。「CSS エディタ」 を利用して、スタイルシートで利用することのできる CSS ファイルを新規作成し、編集することができます。また、「ホームページ・ビルダー」 でも同様の操作を行なうことができます。

CSS ファイルを利用すると、デザインと HTML 文書を別々のファイルで管理することができるため、ページのデザイン統一やデザイン変更を容易に行なえるようになります。

CSS エディタでは以下のようなことができます。

CSS ファイルの編集だけなら、ホームページ・ビルダーのメニューから起動するスタイルシートマネージャでもできるし、同じくスタイルエクスプレスでも編集できる。どうしても CSS エディタを使わなければならないというケースにまだ遭遇していない。しかも、 CSS エディタで編集し保存した CSS ファイルが、サイト転送の時に更新されたファイルとして見なされなく転送対象とならないことを経験しているので、使用にあたっては注意が必要です。

注意アイコン

CSS エディタで編集したスタイルシート ファイルは、サイト転送時の更新されたファイルに選ばれないことがあります

CSS エディタで編集したスタイルシートファイルは、ファイルの中が変更になっているにもかかわらず、「前回の転送以降に更新されたファイル」 に選ばれないことがあります。この現象はホームページ・ビルダーを開いたまま、スタイルシート ファイルを更新→サイト転送を複数回行おうとすると発生するようです。ホームページ・ビルダーをいったん閉じて再度立ち上げての後の最初のサイト転送には選ばれます。

ページトップへ戻る

CSS エディタを起動する

次のいずれかの方法でCSS エディタを起動する

ホームページ・ビルダーのメニューバーから 「ツール」 → 「CSS エディタの起動」 を選択します。

Windows の「スタート」 → 「すべてのプログラム」 (または「プログラム」) → 「IBM ホームページ・ビルダー 14」 → 「ツール」 → 「CSS エディタ」 を起動します。

「CSS エディタ」が起動します。

ヒントのアイコン

スタイルシートマネージャからの編集

メニューバーから 「表示」 → 「スタイルシート マネージャ」 を選択し、表示される 「スタイルシート マネージャ」 ダイアログで、スタイルシート ファイルを選択し、<CSS エディタで編集> をクリックすることでもスタイルシート ファイルを編集することができます。

  • スタイルシートマネージャからの編集

ウィンドウの説明

セレクタ リスト ビュー (ウィンドウの左側)

ルール編集ビュー (ウィンドウの中央)

プレビュー (ウィンドウの右側)

ページトップへ戻る

CSS ファイルを新規に作成する

CSS ファイルを新規に作成します。ここでは操作例として、HTML タグを利用し文字色を設定します。

① CSS エディタを起動し、メニューバーの 「ファイル」 から 「新規作成」 を選択します。

ヒントのアイコン

「ファイル」 から 「新規作成」 の操作

CSS エディタを起動すると新規 CSS ファイルが作成されるため、この操作は必要ありません。

② 左側のセレクタリスト ビューより、［タイプセレクタ］ を右クリックし、表示されるメニュから 「追加」 を選択します。

③ ［HTML タグのスタイルを設定］ が選択されていることを確認し、［HTML タグの候補］ から ［段落 P］ を選択します。

④ ［色と背景］ タブをクリックし、［前景色］ の右横にある ▼ ボタンをクリックし、表示されるメニューから文字色で設定したい <青色> を選択します。

⑤ ［OK］ ボタンをクリックし、「スタイルの設定」 ダイアログを閉じます。

⑥ ［プレビューを更新する］ ボタンをクリックし、設定したスタイルを確認します。

⑦ メニューバーの 「ファイル」 から 「名前を付けて保存」 を選択し、作成した CSS ファイルを保存します。

CSS ファイルを作成するだけではページに反映されません。ホームページ・ビルダーにて、ページと CSS ファイルをリンクを設定する操作が必要です。詳しくは次項 「既存のスタイルシート ファイルを利用する」 を参照してください。

ページトップへ戻る

既存の CSS ファイルを使用する

既存のスタイルシート ファイルにリンクを設定することで、編集中のページにスタイルを適用する方法を説明します。

① 編集中のページで、メニューバーから 「表示」 → 「スタイルシート マネージャ」 を選択します。

② ［外部スタイルシートの追加］ ボタンをクリックします。

③ ［参照］ ボタンをクリックします。

④ 使用したいスタイルシート ファイルを選択し、［開く］ ボタンをクリックします。

⑤ ［挿入のタイプ］ で ［リンク］ を選択し、［OK］ ボタンをクリックします。

⑥ ［閉じる］ ボタンをクリックし、「スタイルシート マネージャ」 ダイアログを閉じます。

ヒントのアイコン

［ページの属性］ ［スタイルシート］ タブからもリンクを設定できます

メニューバーから 「編集」 → 「ページの属性」 を選択し、表示される 「属性」 ダイアログの ［スタイルシート］ タブでもスタイルシート ファイルにリンクを設定することができます。

ページトップへ戻る

CSS ファイルを編集する

スタイルシート ファイルを CSS エディタで編集する方法を説明します。

① メニューバーから 「編集」 → 「ページの属性」 を選択します。

② ［タグ］ ボックスの右横にある ▼ ボタンをクリックして ［ページのプロパティ］ を選択します。

③ ［スタイルシート］ タブをクリックします。

④ ［リンクされた外部スタイルシートの一覧］ から編集するスタイルシート ファイルを選択します。

⑤ ［編集］ ボタンをクリックします。

⑥ 表示されるポップアップメニューから ［編集］ をクリックします。

⑦ 左側のツリービューから変更したいセレクタの種類を選択し、左の ［＋］ をクリックします。

⑦ 一覧から編集したいセレクタ名をダブルクリックします。

⑧ スタイルを適宜設定します。「タグに共通スタイルを設定する」、「タグを特定せずにスタイルを設定する」を参照してください。

⑨ ［OK］ ボタンをクリックし、ダイアログを閉じます。

⑩ ［プレビューを更新する］ ボタンをクリックし、設定したスタイルを確認します。

⑪ メニューバーから 「ファイル」 → 「上書き保存」 を選択します。

⑫ ダイアログ右上の × ボタンをクリックしてダイアログを閉じます。

⑬ ［OK］ ボタンをクリックします。

ページトップへ戻る

CSS ファイル内の文法をチェックする

CSS エディタでは、編集中の CSS ファイル内の文法をチェックすることができます。

① 文法をチェックしたい CSS ファイルを開いておきます。

② メニューバーの「ツール」から「CSS 文法チェック」を選択します。

③ 再度メニューバーの「ツール」から「CSS 文法チェック」を選択し、エラー内容が修正されたかを確認します。

ページトップへ戻る

CSS ファイル内のソースを整える

CSS エディタでは、CSS ファイル内のソースのインデントをそろえたり、改行を加えることで見た目を整えることができます。

① ソースを整えたい CSS ファイルを開いておきます。

② メニューバーの 「ツール」 から 「ソースの整形」 を選択します。

ヒントのアイコン

ソース整形のオプション

ソースのインデントなどは 「ツール」 から 「オプション」 ダイアログの設定に沿って行われます。

  • ソース整形のオプションを設定する
ヒントのアイコン

HTML ソースの整形

HTML ソース画面で右クリックし、表示されるメニューから ［ソースの整形］ を選択して整形した場合に、「ツール」 ⇒ 「オプション」 画面の ［出力文字］、［文字下げ］ の設定内容で整形されます。参照：「ツール」 ⇒ 「オプション 」 ⇒ 「ソース編集」 タブ

ページトップへ戻る

|   | ☜  | 11  12  13  14 | ☞ |