Google
 
GoLive CSでのCSS(スタイルシート)
CSS(カスケーディング・スタイルシート)により自由にフォントのサイズや書体、行間隔などをDTPソフトのように細かく指定することが可能になります。GoLiveを使う事によりCSSの書式を特別に学ばなくてもホームページを作る事が出来ます。また、GoLiveではCSS1仕様の主要な部分をカバーしているとの事、しかしそのやりかたを詳しく説明している本がなかなkありません。私が参考にしているのはソーテック社のGoLiveCSスーパーリファレンスforMacintosh版 吉岡ゆかり著です。説明されている内容だけではとても理解することができせん。具体的な事例がほとんど記述されていないからです。
自分で勉強した具体例をここに記したいと思います。
HTMLでそのまま背景画像を指定すると、普通は繰り返し(タイリング)画像がページ全体に表示されます。そこで1つだけ背景画像をページの上の中央に表示したい時はどうするか。CSS(スタイルシート)を使用すればそれが実現する。

実際にCSSで作成した例

まずウインドウ右上のCSSエディッタを開く
「マークアップエレメントに適用するスタイルを作成」のアイコンを押さえるとメニューが出てくるのでbodyを選択左にbodyと出てくるのでダブルクリックする

上段にある背景プロパティの画像のところでURLを選択して背景画像を指定する。繰り返しの所を1回のみ。横と縦の所をセンターにしている。位置も自由に設定できる。バアック全体の色も指定できる。今回はなしである。

記述例
body { color: black; background-image: url("Mac-mini.JPG"); background-repeat: no-repeat; background-position: center }

urlの()内は写真へのパスを入力

CSSで文字を点滅させる

実際にCSSで作成した例

まずウインドウ右上のCSSエディッタを開く
フォントプロパティで右下の装飾から一番右のテキスト装飾(点滅)を選ぶだけ

CSSで行間を指定する

実際にCSSで作成した例

まずウインドウ右上のCSSエディッタを開く
新規クラスタスタイルで名前を半角英数字で付ける
フォントプロパティで行の高さで希望の数字を入力。あとはCSSスタイルを適用のところで作成したクラスタスタイル名が表示されているので指定したい文字を選択してチェックを入れる。インラインスタイルマークアップ

TOP
HTML エレメントスタイルの作成(マークアップエレメントに適用するスタイルを作成)

CSS は、強力な機能を備えていますが、その 1 つは、HTML エレメント(タグ)の階層に基づいて Web ページのプロパティを変更できることです。エレメントスタイルを使用すると、ドキュメントをさまざまな方法で表示することができ、CSS がサポートされていないブラウザで表示する場合にも、下位互換性が維持されます。CSS がサポートされているブラウザでは CSS で使用できる拡張スタイルでの表示が可能であり、CSS がサポートされていない他のブラウザでは HTML に基づくスタイルと構造で表示されます。

次の 2 つのエレメントスタイルを使用することができます。
・ 標準エレメントスタイルを使用すると、ページ内の特定エレメントのすべてのインスタンスのスタイルを変更できます。例えば、テキストプロパティが 36 ポイントのスタイルを作成して、<h1> タグを表す「h1」という名前を付けると、そのタグ(見出し 1 のスタイル)が適用されたすべてのテキストが 36 ポイントで表示されます。
・ コンテクストエレメントスタイルを使用すると、別のエレメントにネストされている特定エレメントのすべてのインスタンスを変更できます。例えば、<h1> タグを表す「h1」と、<i> タグを表す「i」という 2 つの文字を含む名前を付けてスタイルを作成し、スタイルにライムカラーを割り当てると、<h1> 内の <i> タグ(イタリックスタイル)で囲まれたテキストがライムカラーで表示されます。この例での、適切なスタイル名は「h1 i」で、かぎ括弧は名前に含めません。「h1,i」のようにスタイル名にカンマを挿入すると、<h1> または <i> の開始タグと終了タグに囲まれたテキストにスタイルが適用されます。

マウスポインタが上に置かれると色が変わるハイパーテキストリンクを作成するには、リンクタグを表す <a> タグに分類されるコンテクストエレメントスタイルを使用します。CSS エディタで、新規エレメントスタイルボタンまたは CSS エディタのメニューから、a:hover を選択します。

HTML エレメントベースのスタイルを作成するには:
1 CSS エディタで、次のいずれかを実行します。
・ 新規エレメントスタイルボタン をクリックします。
・ CSS エディタで、新規エレメントスタイルボタンのメニューから、タグを選択します。

メニューに HTML タグを追加するには、新規エレメントスタイルボタンのメニューからスタイルの見本を編集を選択します。詳しくは、CSS エディタの使用を参照してください。
・ CSS エディタで既存の HTML エレメントスタイルを選択し、編集/複製を選択します。
2 CSS エディタで新規スタイルを選択し、「セレクタとプロパティ」タブ を選択します。手順 1 でタグを選択していない場合は、「セレクタ」テキストボックスに HTML エレメント(タグ)名を入力します。同じプロパティを複数のエレメントに適用する場合は、各エレメント名をカンマで区切って入力します。

エレメントスタイルでは、小なり(<)記号と大なり(>)記号を除いた HTML 開始タグが使用されます。例えば、h2 は第 2 レベルのヘッダに、p は段落に、td はテーブルのセルに、文字 a はハイパーテキストのリンクに使用されます。HTML エレメントスタイルに名前を付けてテーブルとテーブルコンテンツのスタイルを設定する方法について詳しくは、カスケーディングスタイルシート(CSS)を使用した、テーブルとテーブルコンテンツの書式設定を参照してください。

<body> タグ、<div> タグ、および <td> タグ(テーブルのセル用)を表す HTML エレメントスタイルを作成し、1 つのページのすべてのテキストの共有プロパティを設定することができます。新規 HTML エレメントスタイルを 1 つ CSS エディタに追加して、CSS スタイルインスペクタの基本設定オプションの名前テキストボックスに「td, body, div」と入力します。
3 CSS エディタで、選択したスタイルにスタイルのプロパティを追加します。詳しくは、スタイルプロパティの定義を参照してください。


追加したプロパティは、そのタグがページ内のどこで使用されていても、そのスタイル名に基づいた名前の HTML エレメントに常に自動的に適用されます。
CSS エディタA. エレメントスタイル名 B.スタイルのプロパティ C. TD スタイルがページ内のテーブルセルのテキストに自動的に適用されます。
クラススタイルの作成

クラススタイルは、ページ内の任意の選択範囲や、ほとんどすべての種類のコンテンツ(テキストブロック、テーブルのセル、画像、回り込みなど)に適用することができます。クラススタイルの一般的な使用法としては、見出し、引用、注意事項、その他の特別な情報(テキストの他の部分よりも目立たせる必要のあるアイテムなど)を区別するためのスタイルを設定します。また、クラススタイルを使用して、1 つの単語にさまざまなフォントサイズやフォントカラーを指定するなど、印刷上の効果を与えることもできます。

クラススタイルを作成するには:
1 CSS エディタで、次のいずれかを実行します。
・ 新規クラススタイルを作成ボタン をクリックします。
・ 既存のクラススタイルを選択して、編集/複製を選択します。
2 CSS エディタで新規スタイルを選択し、「セレクタとプロパティ」タブ をクリックします。「セレクタ」テキストボックスに、先頭にピリオドを付けた英数字名を入力します(例:.myboldclass)。

重要:クラススタイル名の先頭には、必ずピリオドを付ける必要があります。そうしないと、スタイルがエレメントスタイルに変更され、使用できなくなります。
3 CSS エディタでスタイルのプロパティを追加します。詳しくは、スタイルプロパティの定義を参照してください。