ホームページビルダーの操作
外部CSSの作り方とCSSエディッタの操作

CSSを書く場所は、3か所。

  • タグに直接スタイルを設定する
  • ページにCSSを書く
  • 外部にCSSを作成する

今回は、ホームページビルダーでの、外部スタイルシートの設置方法。
そして、ホームページビルダーの付属ツールCSSエディタの使い方を説明します。


ホームページビルダー 外部スタイルシートの作り方

ホームページビルダーでは、スタイルシートマネージャを使って簡単に外部スタイルシートを作成出来ます。

スタイルシート操作画面

  1. 【スタイルシートマネージャ】を開きます。
  2. 【スタイルシート情報】より、いま作成しているページを選択
    • 画像左側の【スタイルシート情報】の下の赤の囲みの部分を見てください。
      ここには、いま作成している、ページの名前が表示されています。
      例えば、indexページなら、index.htmlとなっています。
      開いた時は、青で反転しているので、わかりやすいと思います。
      ※新しいページの名前をまだつけてない!という場合は、そのままで大丈夫。
  3. 【外部スタイルシートの追加】を押す
  4. 出てきた小窓ボックスの【参照】を押す。
    • 「参照」の左側の空白の部分には、なにも入れなくてOKです。

 

外部スタイルシート操作画像

出て来た小窓ボックスで、「ファイルを保存する場所」と、「ファイル名」を設定します。

  1. 画像上の緑色の囲みのところで、保存先を選びます。
    • 保存場所は、いま作成中のサイト内にします。
      私は、CSSというフォルダーを作りそこに入れています。
  2. ファイル名は、何でもOKです。
  3. 設定が終わったら【開く】を押します。

 

外部スタイルシート追加操作画面

↑↑↑出て来たダイアログボックス【外部スタイルシートの選択】に、
先ほど設定した、ファイルの場所とファイル名が入っています。
これで、問題がなければ、【OK】を押します。

 

外部スタイルシート追加操作画面

↑↑↑上の画像のように、いま作成中のファイル直下に作成したCSSファイルがあれば、完成です。
↓↓↓下記の画像にのように、ソースにもCSSへのリンクが入っています。
HPB操作画面

スタイルシートは、同手順で、いくつも追加することが出来ます。

 

作成した外部CSSに、スタイルを書く

外部スタイルシート操作画面

  1. 【スタイルシート情報】から、作成した【スタイルシートファイル】を選びます。
  2. 新たなスタイルを書く場合は、【追加】をクリックします。
  3. 既存のスタイルを変更する時は、【編集】をクリックします。


 

「CSSエディタ」を使って、スタイルの作成&編集

「CSSエディタ」はホームページビルダーの付属ツールです。
外部スタイルシートを使用した際は、この「CSSエディタ」ツールを使うと、スタイルの新規作成・編集等が便利です。

「CSSエディタ」の開き方

スタイルシートマネージャ操作画面

  1. 【スタイルシートマネージャ】を開く
  2. 【スタイルシート情報】から目的の【外部スタイルシートファイル】を選択
  3. 【CSSエディタで編集】をクリック

ツールバーの【ツール】からも開けます。が、ちょっと手間がかかるので、上記方法をオススメします。

「CSSエディタ」の画面

HPB-CSSエディタ操作画面

デフォルトでは、縦3列の構成になっています。(多分^^;)
画像左から、

  • セレクタ リスト(セレクタ一覧)
  • スタイルの部分
  • プレビュー(書いたスタイルのプレビュー)

となっています。

尚、この構成は、ツールバーの【表示】より、【セレクタリスト】の部分と【プレビュー】の部分は、非表示に出来ます。

※プレビューは、上手く表示されない場合があるようです。
例:子孫セレクタを使った場合(#header h1 ←こんなのね)表示されませんでした。
スタイルシートの表示は、ホームページビルダーのページ編集画面(これもあてにならないので^^;)、最終的には、ブラウザで確認しましょう。

スタイルを書いてみよう!
CSSファイルでの文字コードの指定 @charsetの挿入

@charsetとは、CSSの文字コード宣言です。
文字コード宣言についての詳細説明は、今回省きますが、
CSSでも、フォントなど日本語で書くプロパティもありますし、CSS内のコメントは、日本語で入れる(と思う)ので、最初に、文字コード宣言を行います。
文字コードは、HTMLで用いたものと同じものを使います。

HPB-CSSエディタ操作画面

【セレクタ リスト】から、どの項目でもいいので選択し、青く反転させ、【右クリック】し、【メニュー】を出し、【@ブロック】→【@charset】を選択します。

HPB-CSSエディタ操作画面

ダイアログボックスが出るので、「文字コード」を選びます。
HTMLで書いているものと同じものを選び、【OK】を押します。

ちなみに、私は、画像の通り「Shift_JIS」を使っています。

HPB-CSSエディタ操作画面

↑↑↑このように、入りました。
@charsetは、このスタイルシートの一番上(最初)に、記載するものです。
「CSSエディタ」では、常に一番上に表示されるようになっています。
設置を忘れていると保存する際に、つけなさいよ!!と、警告が出ます^^;

文字コードを変更したい場合は、【セレクタリスト】の【@charset】を選択し【右クリック】すると【編集】がメニュー内にあるので、選択し変更します。

スタイルを書いてみよう!
新規スタイル設定・BODYのスタイルを書く

HPB-CSSエディタ操作画面

セレクタリストから、【タイプセレクタ】を選択し、反転させて、右クリックでメニューを出します。
【追加】をクリック。
※@charset以外なら何を選んでもOKです。

HPB-CSSエディタ操作画面

好きなスタイルを指定してください。
操作方法は、関連記事 → → →スタイルシートマネージャの操作

HPB-CSSエディタ操作画面

↑↑↑こんな風に入ります。

既存スタイルの編集や削除

スタイルシートマネージャを使用する

HPB-CSSエディタ操作画面

編集するスタイルのセレクタを【セレクタリスト】から選び、右クリックし、【編集】選ぶと、スタイルシートマネージャが開きます。

HPB-CSSエディタ操作画面

直接入力でスタイルシートを編集する

CSSエディタのスタイル部分を直接編集します。
その際、カラーだけは、右クリックで候補が開きます。

↓↓↓カラーコードをドラッグし右クリックする。
HPB-CSSエディタ操作画面

CSSには、コメントを挿入しておくと便利

コメントは、半角のスラッシュとアスタリスクで囲みます。
これに囲まれている中身は、読みとられません。
開始 → /* */ ← 終了

/*コメント*/

/*
なんちゃらかんちゃらテンプレート
サイトマップ用CSS
2013/08/04作成
*/

↑↑↑複数行で書いてもOK

/*———-HEADER———-*/

↑↑↑記号を使ってもOK

/*
#header{
padding-top : 30px;
padding-left : 50px;
}
*/

↑↑↑一時的に適応したくないスタイルを囲んでもOK

CSSエディタでの操作

HPB-CSSエディタ操作画面
コメントを挿入したい所に、カーソルを置き、ツールバーの【編集】から【/**/の入力】を押します。

また、【右クリック】からメニューを開き→【選択】→【/**/の入力】からも入力出来ます。

「*」の前後に半角スペースを入れるのか?
入れなくて問題ないそうです。
が……私は、なぜか、反応しないことが何度かあったので、前後に半角スペースを入れています。

/* *********************
    ヘッダー
*********************** */

 


 
 

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Post Navigation