CSSエディタを使ってみる

バージョン11から搭載されたCSSエディタの使い方について説明していきます。

今回は、ホームページ・ビルダー本体との連動を前提に話をします。

CSSエディタを使うケースは、個人的には以下の2点ではないかと思います。

• ホームページ・ビルダーで対応していないプロパティを使いたい
• CSSの吐き出しが汚いからすっきりさせたい

一からCSSを書くよりも、すでにあるCSSを編集するという使い方に向いているのではないかと思います。

3通りありますが、ホームページ・ビルダー本体との連携を考えるのであれば、一番ベストなのは、スタイルシートマネージャーから起動する方法です。

すでに(X)HTML+CSSでサイトを記述しているとします。スタイルは外部スタイルシートファイル内に記述しています。

CSSファイルを選択します。そうすると、現在適用されているCSSのルール情報が表示されます。

「CSSエディタで編集」ボタンをクリックします。

左がセレクタの一覧ツリー、真ん中がCSS編集画面、右がプレビュー画面です。

CSSエディタが起動した直後はプレビューが反映されていない状態ですので、「プレビューを更新する」ボタンをクリックします。

そうすると、現在のスタイルが表示されるハズなのですが……画像系にはあまり期待しない方がよいかもしれません。

CSSを編集したら、「プレビューを更新」で確認していくというスタイルになります。

なお、ホームページ・ビルダー付属のCSSエディタでは、HTMLファイルを指定して、プレビュー時に確認することも可能です。HTMLファイル自体は1度指定してやれば、「プレビューを更新」の都度に「参照」する必要はありません。

ホームページ・ビルダーの編集画面で確認できないスタイルはCSSエディタのプレビューでも確認できませんので、ご注意ください。

最終的には、ターゲットとするブラウザでの表示確認が必要となります。