サイト内検索  

CSSエディタを使ってみる

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

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

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

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

CSSエディタの起動

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

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

スタイルシートマネージャー起動直後の画面

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

スタイルシートを指定した後のスタイルシートマネージャー画面

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

CSSエディタ起動後の画面

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

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

CSSエディタでプレビュー更新をした後の画面

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

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

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

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

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