（９）スタイルシートを使ったページ･デザイン
 スタイル・シートとは |
||
| もともとHTMLは文書の構造を定義するものとして登場し、その見栄えを整える機能は副次的なものでした。それを補うものとして、HTMLにページをより美しくするためのタグを追加する代わりに、スタイル・シート（Cascading
Style Sheet)が考え出され、近年徐々に発展してきました。
言い換えれば、本来文書の論理構造を記述するHTMLからスタイル指定を分離する」というのがスタイルシートの目的の一つです。 現在、Internet ExplorerやNetscape Navigatorがこの機運に沿ってスタイル・シート機能への対応を進めていますが、十分な実装や標準化が進んでいないのが現状です。 それでも、このスタイル・シートが普及してきている理由は： （１）編集するに当たって、HTMLだけでデザインまでこなしてしまうより分かりやすい
といった点が挙げられるからでしょう。 |
||
| スタイル・シートの利用例 |
||
| （１） | フォントの指定 フォントの書体、太さ、大きさ、色、や行間隔がよりきめ細かく指定できる |
|
| （２） | 背景の指定 背景の色、背景画、背景画の敷き詰め方、スクロール方法などを指定する |
|
| （３） | 文章の表示 単語間の間隔、文字間の間隔、下線･上線・取消線・点線等、文章の縦・横方向の位置、均等割付、インデント、禁則処理の強さ、ルビの表示方法などを指定する |
|
| （４） | 余白と境界線の指定 上下左右の余白、上下左右の境界線、境界線の種類や太さなどをよりきめ細かく指定することが出来る |
|
| （５） | リストの表示の指定 行頭記号、行頭記号に使用する画像、行頭記号の表示位置を指定する |
|
| （６） | フィルタ テキストや画像に陰を付ける、半透明にする、グラデーションをかける、その他の効果をつける |
|
| （７） | その他 テキストの回りこみ、文書を右から左ひ表示、テーブルの枠線の表示方法、マウスを載せたときのカーソルの形状、入力欄での日本語変換（IME)の動作のON/OFFなどなどの指定 |
|
| スタイル・シート使用上の注意点 |
||
| （１） | スタイル・シートが利用出来ない環境がある（中でも古いバージョンのNetscapeで) | |
| （２） | ブラウザによって動作が異なる（中でも古いバージョンのNetscapeでは対応が不安定) | |
| （３） | ページを保存すると見栄えがおかしくなることがある（特に外部スタイル・シートに注意） |
|
| スタイル・シートの設定方法には３通りのやり方があります |
||
| （１） | HTMLのタグの属性としてスタイルを設定する スタイル属性が記述されているタグにのみ効果が及ぶ局所的なスタイル設定 |
|
| （２） | 内部スタイル・シートとしてスタイルを設定する HTML頁のヘッダー・セクションにスタイル・シートを定義し、同一頁内の条件が一致する全てのタグに指定されたスタイルが適用される |
|
| （３） | 外部スタイル・シートとしてスタイルを設定する HTMLとは別のファイルとして保存されるスタイル・シートで、それを参照している全ての頁の条件が一致している全てのタグに設定しているスタイルが適用される。 HTMLファイルからの参照は<link>タグでなされる。 このスタイル・シートは一つのサイト全体の統一的なデザインには非常に有効的です。 |
|
| ホームページ・ビルダーによる内部スタイル・シートの作り方 見出しＨ２の色と太さを指定する例は以下の通りです。 |
||
| ① | 編集対象ページをレイアウト・モードの編集状態にし、サンプルのテキストを入力する。 下の例では「内部スタイルシートの作り方」と見出し文字列を入力し、段落書式窓で<h2>タグの設定をしておく。
|
|
| ② | 次に、メニュー・バーから「表示」 → 「スタイル・マネジャー」 → 「スタイル・マネジャーダイアログ」を表示する。
|
|
| ③ |
「スタイル・マネジャー」ダイアログの下段中程にある「追加」ボタンをクリックして、「スタイルの設定」ダイアログを開く。
スタイルの指定の対象は、 通常は①のタグに指定する。この例でもＨ２というタグにスタイルを指定することを選択する。 次に、「色と背景」タブで「前景の色」の「緑」を選択する。 ＯＫボタンをクリックすると、「スタイルシート・マネジャー」ダイアログに戻る。
真ん中のペインのＨ２タグをダブル・クリックすると、右側「プロパティ」ペインに今上で指定したＨ２のスタイルが表示されます。 最後に、「閉じる」ボタンをクリックすると、最初の頁編集画面に戻り、Ｈ２の色が緑に変わったことが判ります。字の太さに就いては、「プレビュー」モードにすれば判ります。
|
|
| ④ | ここで、内部スタイル・シートの仕組みを理解する為に、今スタイルが規定された頁を「ＨＴＭＬソース」モードに切り替えてみます。
この状態でのソース・コードは次の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 上のソース・コードでお判りのように、スタイル・シートはヘッダー・タグの<HEAD>と</HEAD>の間に
|
|
| ホームページ・ビルダーによる内部スタイル・シートの定義を変更する方法 |
||
| 一度設定したスタイルは、後から簡単に変更することが出来ます。これを利用すれば、本文のソースに手を付けることなく、CSSエディタ・ウィンドウだけで書式やレイアウトの変更が出来るようになります。 |
||
| ① | 対象ファイルを編集状態にして、メニュー・バーから「表示」 → 「スタイル・マネジャー」 → 「スタイル・マネジャーダイアログ」を表示します。 |
|
| ② | 変更対象の項目を選択します。 今回は<Ｈ2>を変更しますので、これを選択します。
「スタイル・マネジャー」ダイアログの下段中程にある「編集」ボタンをクリックして、「スタイルの設定」ダイアログを開く。変更したい項目のタブを選択して、新しいスタイルを指定し、ＯＫボタンをクリックすれば、「スタイルシート・マネジャー」ダイアログの「プロパティー」ペインで変更したスタイルが確認出来ます。 |
|
| ③ | 「閉じる」ボタンをクリックして、最初の頁編集画面に戻り、変更を確認します。スタイルの正確な確認は、その頁を一旦保存してから、「プレビュー」モードで行います。 |
|
|
ホームページ・ビルダーによる外部スタイル・シートへの作成とその利用 |
|
| サイト内の各々のＨＴＭＬファイルとは別個の外部ファイル作成しておいて、それを複数のHTMLから共通のスタイルとして利用する事ができます。これを利用すれば、HTML本体には修飾の為の情報を最低限に抑えることが出来、新しくページを増やしたり、既存のページの表現を変更したりすることが簡単に、然も一挙に実行出来ます。 |
||
| ① | 対象となるページを編集状態にしておいて、メニュー・バーから「表示」 → 「スタイル・マネジャー」 → 「スタイル・マネジャーダイアログ」を表示する。
左側のペイン下段にある「外部スタイルシートの追加」ボタンをクリックすると、「外部スタイルシート選択」ダイアログが表示されるので、空欄にこれから作成する「外部スタイルシート名」を入力し、挿入のタイプがリンクになっていることを確認の上、ＯＫボタンをクリックっする。
上の例では「out_common」という名前を付けた。 すると、再度「スタイル・マネジャーダイアログ」が表示され、下のように左側のペインに「out_common（link）」という名前が登録されているのが見える。
|
|
| ② |
その名前（この例ではout_common）をクリックすると、「ＣＳＳエディター編集」ボタンが現れますので、それをクリックすると、下の図のような「ＣＳＳエディター」ダイアログが表示されます。 |
|
| ③ | 前にも述べたように、スタイルの指定の対象は、 ① ＨＴＭＬのタグに指定する場合、 ② クラスに指定する場合、と ③ ＩＤに指定する場合があるが、 今回の例は① ＨＴＭＬのタグにスタイルを指定するので、左側ペインの「タイプセレクタ」を右クリックして現れるメニューの「追加」を選択してクリックすると、下図のような「スタイル設定」ダイアログが表示される。
|
|
| ④ | 「スタイル設定」ダイアログでのスタイル設定の仕方は、前に説明した「内部スタイルシート」の作成と全く同じように行われます。
この場合の例では、サイト内の各頁に共通に使うＢｏｄｙの背景色と見出しＨ２の字体の色を設定します。
上の図のようにＢｏｄｙの設定の後に、続けてＨ２の設定を行います。
全てのタグ（タイプとも言う）のスタイル指定が終わったら、ＯＫボタンをクリックすると下図のように
スタイルが設定された「スタイルシート・マネジャー」が表示されます。表示された各々のＢｏｄｙやＨ２などのタグをクリックすると、右側ペインのプロパティ欄に実際のスタイル・コードが表示されます。 「スタイルシート・マネジャー」の右下段の「閉じる」ボタンをクリックすれば、この外部スタイルシートの作成は完了で、このスタイルシトが適用された編集画面に戻ります。 念のため、「ビジュアル・サイトビュー」画面で、左側の「ビュー一覧」の「サイト・ビュー」で「トップ・フォルダ」をクリックすると、下の画面に今作成した外部スタイルシート「out_common.css」が登録されている筈です。 |
|
|
編集中のHTMLファイルに外部スタイル・シートを適用する（Ｌｉｎｋする） |
|
| 編集中のHTMLファイルから別途に作成された外部スタイル・シートへリンクを設定すると、共通の外部スタイル・シートのスタイルをその頁に適用することが出来ます。この方法で一つのサイトに共通したスタイルを設定出来ます。 |
||
| ① | HTMLファイルを編集状態にして、左側の「ビュー一覧」の「サイト・ビュー」で「トップ・フォルダ」をクリックすると、下の画面に作成した外部スタイルシート「out_common.css」が表示されます。
|
|
| ② | その外部スタイルシート「out_common.css」を選択し、下段の「挿入」ボタンをクリックすると、左側の編集中のＨＴＭＬファイルにリンクが張られて、その外部スタイルシートで規定されているスタイルが」適用されます。
左側の編集中のＨＴＭＬファイルは即座にそのスタイルが適用された内容に変更されます。 |
|
| ③ | 念のために、編集中のＨＴＭＬファイルを「ＨＴＭＬソース」モードに切り替えてみますと：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
|
| ④ | 外部スタイルシートが適用されたＨＴＭＬファイルを「プレビュー」モードで表示してみると、期待したとおりのスタイルが適用されていることが確認されます。
|
|
|
外部スタイル・シートの変更 |
|
| メニュー・バーから「表示」 → 「スタイル・マネジャー」 → 「スタイル・マネジャーダイアログ」を表示します。
「スタイル・マネジャーダイアログ」の左側のペイン「スタイルシート情報」には、既存の外部スタイルシートが登録されていますので、それを選択してクリックすると最下段に「ＣＳＳエディタで編集」ボタンが現れます。そのボタンをクリックすると、「ＣＳＳエディタ」が表示されますので、外部スタイルシートを新規に作成した時と同様に編集・変更が出来ます。この場合、勿論スタイルの指定の対象を、 外部スタイル・シートにそのサイトの全てのＨＴＭＬページの共通の統一的なスタイルを設定しておけば、サイト全体のスタイルを簡単に然も一挙に変更することがｆ出来ます。 |
||
|
クラス指定とＩＤ指定のスタイルシートの作成
これらは特定のＨＴＭＬタグに対するスタイルではなく、書式のフォントとか色などのクラスに適応したり、書式のＩＤ番号を振ってその番号で適応するスタイルです。 |
|
| ① | 「スタイル・マネジャー」から「スタイル設定」ダイアログを表示しますと、その左上の欄で： ① ＨＴＭＬのタグに指定するか ② クラスに指定するか ③ ＩＤに指定するかを 選択するようになっています。 |
|
| ② | 編集すべきＨＴＭＬファイルを開いた状態でスタイルを設定する文字列等のオブジェクト（Element）をドラッグ選定してから、メニュー・バーの「編集」 → 「スタイル設定」 → 「スタイル設定」ダイアログを表示します。 |
|
| ③ | 「スタイル設定」ダイアログの最下段に「定義済みＩＤ番号」と「定義済みクラス名」を指定する欄がありますので、それぞれの欄の右端の下向き▽をクリックして、リストから設定すべきＩＤ番号かクラス名を選択してから、ＯＫボタンをクリックしますと、編集すべきＨＴＭＬファイルに即スタイルが適応されます。 まだＩＤ番号やクラス名が付けられていないElement（Box）にはその欄にＩＤ番号やクラス名を入力すればよい。但し、それらのElementは必ずBoxとしての体をなしていなければいけません。即ち、<p>とか<h3>のようなタグで囲まれていなければなりません。 |
|
| ④ | スタイルを解除したい時は、「スタイル・マネジャー」画面で、解除したいクラス或いはＩＤを選択してから、「削除」ボタンでクラス或いはＩＤ名を削除すればよい。 | |
 |
 |
 |