Home|1|2|3|4|5|6|7|8|

index

1.スタイルシートの設定
2.外部スタイルシートの使用
3.「素材ビュー」を使用したスタイルシートの挿入
4.行間・文字間の調整
5.「文字レイアウトタブの解説
6.サムネイル画像の作成

スタイルシート（CSS＝Cascading Style Sheet)

スタイルシートの設定

スタイルシートを使えば、画像や文字をページ上のどこでも好きな位置に配置したり、複数のページを統一したフォーマットで表示できるなど、さまざまなレイアウト設定を行なうことが出来ます。
ここでは、「見出し2」にスタイルを設定する例を紹介します。

操作手順

1.「見出し2」にする段落を選択し、
2.ツールバーにある「段落の挿入・変更」の▼を押して「見出し２」を選択します。
3.「見出し2」の段落上で、右クリックし「スタイルの設定」をクリックします。

●「スタイル編集」の画面の説明
▼＜HTMLタグにスタイルを設定＞
ここで設定したスタイルは、ページ内の同じタグに摘要されます。
ここで、「見出し２」にスタイルを設定しておけば、ページ内の全ての「見出し２」に同じスタイルが摘要されます。

▼＜クラスやIDによるスタイルの設定＞
「見出し2」にスタイルを設定し、さらに「見出し2」を細分したい場合に使用します。
例えれば、タンス（仮に見出し２とします）と引き出し（これがクラスやIDになります）の関係になります。

▼＜現在のタグのみにスタイルを設定＞
選択されたタグのみにスタイルを設定します。

ここでは、「見出し２」に同じスタイルを設定するので
4.＜HTMLタグにスタイルを設定＞の所にある「編集」をクリックします。
5.「カラーと背景」タブをクリックします。


6.「前景色」（文字の色を設定します）の所にある▼をクリックして「白」を選択します。
7.「後景色」（段落に設定される背景の色になります）も同様の操作を行い「緑」を選択します。
8.「レイアウト」タブをクリックします


●「レイアウト」タブをクリックして、ボーダー（枠）の幅や色、線の種類、マージン（間隔）やパディング（枠から文字までの距離）などを設定することが出来ます。
9。今回は、以下のような設定をしました。

表示例

見出し2

ｈｔｍｌソース

スタイルシートの設定が、<Head>・・・</Head>の間に記述されます。

<STYLE type="text/css">
<!--
H2{
color : #ffffff;　　　　　　文字の色です
background-color : #009900;　　　背景の色です
padding-top : 5px;　　　　　上の枠から文字までの距離です
padding-left : 5px;　　　　　左の枠から文字までの距離です
padding-right : 5px;　　　　　右の枠から文字までの距離です
padding-bottom : 5px;　　　　　下の枠から文字までの距離です
border-top-style : ridge;　　　上の枠線の種類です
border-right-style : ridge;　　　　右の枠線の種類です
border-bottom-style : ridge;       下の枠線の種類です
border-left-style : ridge;　　　　　左の枠線の種類です
border-color : green green green green;　
}
-->
</STYLE>
<body>
<h2>見出し２</h2>
・・・・

外部スタイルシートの挿入

●一度設定したスタイルシートは、ほかのページでも使用することが出来ます。
レイアウトを統一する為には、スタイルを記述したファイル（外部スタイルシート）を作成しておき、スタイルを摘要したいページで、そのファイルを参照すれば、設定したスタイルを使用することが出来ます。

作成手順　（外部スタイルシートの作成）

●先ほど作成した、「見出し2」のスタイルシートを使用して、「外部スタイルシート」を作成します。

1.「HTMLソース」タブをクリックします。
2.表示されたソースから、「　H2｛　」から「　｝　」までを選択して、「右クリック」で、「コピー」をクリックします。
3.メモ帳を起動します。
4.メモ帳が開いたら「右クリック」で、「貼り付け」を選択します。
5.このファイルを保存します。
●メニューから「名前を付けて保存」を選択し、拡張子に「.css」と入力し、「保存」をクリックします。
●保存場所は、探し易いようにスタイルシートを参照する「ｈｔｍｌファイル」と同じ場所が良いでしょう。

外部スタイルシートの摘要

1.スタイルシートを摘要する「ｈｔｍｌファイル」を開きます。
2.ツールバーから「スタイルシートマネージャーの表示・非表示」をクリックします。
3.「スタイルシートマネージャー」の画面にある「リンク」をクリックします。

4.現れた「外部スタイルシート」の画面で、＜参照＞をクリックして、保存してある拡張子に「.css」とあるファイルを選択し「OK」をクリックします。

ページ内にスタイルシートを摘要するには、
5.スタイルシートを摘要する段落を洗濯して
6.ツールバーにある「段落の挿入・変更」の▼をクリックして
7.この場合「見出し2」をクリックします。

以上です。


ｈｔｍｌソース

リンクされた「外部スタイルシート」は、以下のようなソースになります。

<LINK rel="stylesheet" href="・・・.css" type="text/css">

素材ビューにある「スタイルシート」を使用する

操作手順

1.「素材ビュー」より「スタイルシート」を選択します
2.下に現れた「スタイルシートファイル」より何れかを選択し
3.「右クリック」現れるメニューから

4「スタイルシートテストモード」か、「スタイルシートのプレビュー」をクリックします。

●上の操作を行って、実際に適用する前に、プレビューで確認することが出来ます。
●「スタイルシートのプレビュー」をクリックした後は、「スタイルシートファイル」を選択すれば、連続してプレビューすることが出来ます。
プレビューの解除は、もう一度「スタイルシートのプレビュー」をクリックします。


5.使用する「スタイルシート」が決まったら、右クリックし「ページに挿入」をクリックします。

●一旦摘要したスタイルシートを削除するには、

「ｈｔｍｌソース」タブをクリックして、直接「スタイルシート」が記述されている部分を選択して削除します。

行間・文字間を調整する。

行間の間隔を調整するには、「スタイルシートを使用します。

操作手順


1.行間を変更する段落を選択します。（どの段落を選択したかは、選択した場所によって、画面の右上に表示される記号が変わります。）
●下の画像の場合は、＜H3＞見出し3が選択されたことを意味します。

2.次に右クリックし「スタイルの設定」をクリックします。
3.「文字のレイアウト」タブをクリックします。
＜HTMLタグにスタイルを設定＞の所にある「編集」をクリックします。
●下に説明を参照して設定を行って下さい。
4.設定が終了したら「OK」をクリックします。

[文字のレイアウト]タブ の説明（「スタイルの設定」の画面）

このページでは、行間、文字間、ワード間、インデント、垂直方向の配置、水平方向の配置を指定することができます。

[行間]フィールド（注３）

文字列の行と行の間隔を予約語、ピクセル、ポイント、インチ、センチ、ミリ、パイカ、文字の高さ、“x”の高さ、パーセント、倍で指定します。

[文字間] フィールド（注１）,（注２）

文字列の文字と文字の間隔を予約語、ピクセル、ポイント、インチ、センチ、ミリ、パイカ、文字の高さ、“x”の高さで指定します。

[ワード間] フィールド（注１）,（注２）

文字列の単語と単語を区切る空白の間隔を予約語、ピクセル、ポイント、インチ、センチ、ミリ、パイカ、文字の高さ、“x”の高さで指定します （日本語文字に対しては使用されません。）

[インデント] フィールド（注２）

最初の行のインデントを ピクセル、ポイント、インチ、センチ、ミリ、パイカ、文字の高さ、“x”の高さ、パーセントで指定します。

[垂直方向の配置] フィールド（注１）,（注４）

親エレメントに対する垂直方向の配置を予約語、またはパーセントで指定します。

[水平方向の配置] フィールド

水平方向の配置を 左揃え、中央揃え、右揃え、両端揃え の中から指定します。

（注1） このスタイルは、表示するブラウザによっては認識されません。

（注2） このスタイルは、[ページ編集] ビューでは表示されません。

（注3） このスタイルは、[ページ編集] ビューでは、フォントの高さより小さいものは表示できません。

（注4） このスタイルは、[ページ編集] ビューで一部表示できます。

サムネイル画像の作成

ホームページでは、「小さなサムネイル画像をクリックすると、大きな画像で表示される」といった仕組みが用いられています。
この仕組みをHPBで、設定しましょう。

操作手順

1.サムネイル画像を挿入したい場所にカーソルを移動して、
2.タスクメニューの「ページ部品の挿入」「サムネイルを挿入する」を選択します。
3.「サムネイル作成ウィザード」の画面に変わります。

4.「サムネイル」にする画像が保存されているフォルダを表示させ、その画像を選択します。
5.「追加」をクリックし「次へ」のボタンを押します。
6.次の画面で、「お勧め設定」を選択して
7.完了をクリックします。

　表示例（画面をクリックしてください）　　　　
＜ｈｔｍｌ　ソース＞

<TABLE cellpadding="0" cellspacing="0">
<TBODY>
<TR>
<TD align="center" valign="middle" width="128" height="128"><A href="gazW/HpB/aimtatemono3.JPG">
<IMG src="gazW/HpB/aimtatemono3_thumb_1.JPG" width="128" height="95" border="0"></A></TD>
</TR>
</TBODY>
</TABLE>

Home|1|2|3|4|5|6|7|8|