• ・・凡例・・
  • 使用例
  • スタイル
  • ソースコード
  • HPBを使う

スタイルシート?聞き慣れない言葉ですが、御存知ですか?

オフィス(ワードやエクセル)には「スタイル]があり、表題や図などの表示形式(文字フォントやサイズ、フレームを付けるなど)を指定することができます。スタイルは、個別に設定することもできますが、標準スタイルを決めておくと文書の形式が簡単に整います。(段落ごとにフォントやサイズを指定すると大変ですね)

HTML文書でもこのようなスタイルを用いて、表示画面の体裁を整えます。

スタイルの種類

HTML文書では、タグで囲まれた"要素"(例 p要素 <P>テキスト</p>)を記述していきます。この要素にスタイルが設定され、ブラウザはそれを参照しながら、画面に表示していきます。

スタイルには、ブラウザが標準で準備している既定スタイルと文書で指定された文書の独自スタイルがあります。独自スタイルが設定されていない場合には、ブラウザは既定スタイルを利用します。

よく使うスタイル("要素")の種類
スタイル 記述内容の性質・意味
標準段落(<p>) 通常の文章
見出し段落(<h1>から<h6>) 見出し・・・大見出しから小見出し
引用文 他の文献からの引用文

その他に、画像・ハイパーリンク・テーブルなどのスタイルがあります。

ブラウザ既定のスタイルを確認する。

ブラウザの既定スタイルを確認しましょう。

HPBを立ち上げる → HTML文書の新規作成 → 適当な文字(例 ”ブラウザ既定のスタイルです。標準段落”を入力

プレビューで、表示形式を確認してください。

カーソルを文字列に置き、メニューバー「書式」 → 「段落」 → 段落種類 で段落を変え、プレビューで確認してください。

「段落」の種類
「標準」「見出し1」から「見出し6」、「アドレス」、「引用文」、「ベタ書き」の10種類あります。「アドレス」、「ベタ書き」は、通常、使用しません。

既定のスタイルの確認(IE11)

表示

既定のスタイルでは、文字色は黒、サイズの上下のマージンはそれぞれに設定、左マージンは0です。(引用文のみ設定)

これでは困りますね。文字の色・フォントの種類・サイズが固定されますし、その位置は引用文を除いて左よせになります。

既定のスタイルはブラウザで異なる場合があります。使用するブラウザで、表示形式が異なるのも厄介です。

既定のスタイルを変更する その1

既定のスタイルでは、思い通りのスタイルが表現出来ませんので、作成するホームページ独自の共通するスタイルを作成します。

そのメリット

  • ホームページのデザインが標準化出来る(変更も簡単です)
  • ブラウザの差がなくなる(どのようなブラウザでも同一の表示が可能)

標準段落のスタイルを変更する

先ほど作成したページ → 「標準」の文字列にカーソルを置く → メニューバー「表示」 → 「スタイルシートマネジャ」

[追加]をクリック → 以下のように設定

これで、標準段落のスタイルが、文字サイズは「大きい」・「太字」・「下線付き」に変更されました。

表示

  • 上段・・・既定スタイル
  • 下段・・・変更したスタイル

ソースプログラムを確認する

HPBのメニューバー下の「HTMLソース」タブをクリックしてください。ソースプログラムが表示されます。この中の<head>タグと</head>タグの間(head要素と呼びます)を見てください。

ソースプログラム

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
<!--
p{
font-size : x-large;
font-weight : bold;
text-decoration : underline;
}
-->
</style>

</head>
<body>
<p>ブラウザ既定のスタイルです。 標準段落</p>
</body>
</html>

独自スタイルは <style type="text/css"><!-- ・・・・・・ --></style>の中に記述されています。

スタイルの説明

p{  }  標準段落 pタグ へのスタイルの指定を示します。

{、 }の中にスタイルを指定します。

  • font-size : X-large;  フォントサイズを「大きい」
  • font-weight : bold;  太字
  • text-decoration : underline; 文字飾りはアンダーライン(下線)

左側にfont-size、font-weight 等の指定したい”項目名”(プロパティと呼ばれます)、続いて”:”(コロン)、その後に”値”の記述して、”;”(セミコロン)で終わります。

複数のスタイルを記述することができます。1行に記述してもいいですし、途中で行変えしてもOKです。その順番は任意です。このような形式で設定されたスタイルを「カスケードスタイルシート(CSS)」と呼びます。

既定のスタイルを変更する その2

その1で設定したスタイルをもう少し変更してみましょう。

その1のページを表示する → 表示 → スタイルシートマネジャ

ルール情報 pを選択 → [編集]

「フォント」タブ・・・サイズをブランクに変更(展開をクリック)

「色と背景」タブ・・・前景色(文字の色)を青に変更(展開をクリック)

「レイアウト」タブ・・・左方向にマージンを10文字分指定

これで、標準段落は、文字サイズは普通、アンダーライン、太字、青、左マージン10文字分のスタイルに変更されました。

表示

画面への表示

作成したページは、共通するルールで画面上に配置されます。

ブロック配置

特別な指定がない限り、ソースプログラムに記述された順番で、高さと幅があるブロックを並べるように、上から下に配置されます。

ブロック

段落や見出しは、ひとつのブロックです。

ブロック2と3は、特別な指定で横に並べています。

ブロックの大きさ・・・マージン・パッディング・境界線

配置

ブロックの高さや幅は、記述されている内容(コンテンツ)の高さ(height)と幅(width)、その上下・左右のマージン・パディング・境界線の幅で決まります。

なお、上下のマージンが指定されたブロックを配置する場合、隣接するマージンは大きいマージンが設定されます。(マージンの相殺)

ブロックに背景(色や画像)を設定できますが、マージン領域には表示されません。

ブロックの高さ
コンテンツの高さ+上下の(パディング+境界線の幅+マージン)
ブロックの幅
コンテンツの幅+左右の(パディング+境界線の幅+マージン)

パディング、マージン、境界線の幅などで、隣り合うブロックとの位置関係を調整していきます。

古いブラウザ(IE6など)では、パディング・境界線を含めた高さと幅になる場合があります。

スタイルシートとHTML

ホームページは、論理的に二つの部分で構成されています。

  • タグで記述されたHTMLと利用している写真などのオブジェクト
    ページで表現したい内容そのものです。
  • 内容を見やすくするためのスタイル(カスケードスタイルシート css)
    表現する媒体(例 画面で、印刷で)に応じて、表現形式を指定

ブラウザは、ページで指定されたcssを参照しながら、ページ内容を画面に表示していきます。cssで指定されていないスタイルは、ブラウザの既定スタイルが利用されます。

カスケードスタイルシート(Cascade Style Sheet・・・css)・・・英語の意味は”滝のように流れるスタイル”の意味です。ここではページに指定されたスタイルの総称と考えてください。

タグ・要素・属性

タグ

HTMLは、タグ(例 標準段落・・・<p>タグ)を利用して記述していきます。

例 <p>標準段落です。</p>

数多くの種類のタグがありますので覚えるのは大変ですが、ここではHPBを使用していきます。殆どの場合、HPBが自動生成してくれますので、ご安心ください。

要素

タグに囲まれた部分を”要素”と呼びます。・・・標準段落はp要素です。

「ブロックとして表示される要素(ブロックレベル要素)」と「行の一部として表示される要素(インライン要素)」があります。一般的な要素はブロックレベル要素です。

属性

スタイルは段落要素に与えましたが、この要素には別なスタイルをつけたい(例 赤字にする)場合などでは困りますので、別なスタイルを与える要素に、属性と呼ばれる設定をします。

属性の書き方(書式)
<p id="名前(ID アイディ名)"> ・・・・・ </p>
<p class="名前(クラス名)"> ・・・・・ </p>

例1 h1要素にID名 hajime を与える

<h1 id="hajime">大見出し</h1>

例2 p要素にクラス名 komidashi を与える

<p class="komidashi">標準段落</p>

ID名やクラス名で設定されたスタイルが、指定された要素に適用されます。

スタイルの設定方法は、次章スタイルシートの書き方で説明します。

特殊な要素(グループ化要素)

複数の要素をグループ化するための要素があります。

  • div要素・・・ブロックレベル要素のグループ化
  • span要素・・・インライン要素をグループ化(段落内の一部など)

グループ化することにより、グループ全体にスタイルを適用することができますので、よく利用されます。

例 複数の要素の文字の色を赤にする(div要素)
  文字列の一部の色を変えたい(span要素)

親子要素

要素の中にある要素を親子関係にある要素と呼びます。

例 p要素の中にあるspan要素

<p>ブラウザの<span>既定スタイルの確認</span>・・・標準  既定スタイルの変更</p>

p要素は”親要素”、span要素は”子要素”です。

<span>固定スタイルの確認</span> のみに別なスタイル(例 文字色を赤にする)を指定する場合などに利用します。

スタイルの一部は、親から子(孫へもあります)へと継承(inherit インヘリット・・・親で指定したスタイルが子が受け継ぐ)されます。

スタイルシートの書き方(書式)

スタイル  p要素に文字サイズ”大きい”を指定

書式    p{font-size: x-large; }

  • 最初にスタイルを適用する場所(セレクタ)を指定します。・・・p
  • 全体を{ }で囲みます。
  • "スタイルの種類(プロパティ)"と"値"を指定します。・・・font-size: x-large;
    font-size ・・・プロパティ : x-large・・・値
    種類(プロパティ) :(コロン) 値 ;(セミコロン) でひとつの単位です。プロパティと値は、すべて決められた用語(英語)を使います。
標準書式 セレクタ{プロパティ1:値1;・・・;プロパティn:値n;}

セレクタ

セレクタは、スタイルを適用する対象を指定します。

指定する方法
タグのスタイルを設定
pタグやh1タグ(見出し1)等に指定します。指定されたスタイルは、ページで共通に適用されます。
クラスのスタイルを設定
クラスで指定したスタイルを、特定の要素に設定します。”クラス”はスタイルの種類です。
クラスの書式 要素名.クラス名・・・要素名の後に.(ピリオド)、続いて名前(クラス名は英数字任意)
例 p.komidashi・・・komidashiのクラスが設定されたp要素のスタイルを設定
要素名を省略すると、p要素以外の要素にも適用されます。
IDのスタイルを設定
IDで設定したスタイルを、ページ内の特定のブロックレベル要素に指定します。
IDの書式 要素名#ID名・・・要素名の後に#(シャープ)、続いて名前(ID名は英数字任意)
例 div#hajime
要素名は省略してもかまいません。

HPBのスタイルシートマネジャでの指定方法

HPBで新規作成 → メニューバー「表示」 → スタイルシートマネジャ

[追加]をクリックしてください。

スタイルの設定ダイアログで以下のように設定します。

設定例1 pタグに設定

設定例2 p要素にクラス名 komidashi を設定

「クラスのスタイルを設定」を選び、クラス名を書き換えてください。最初に"要素名"+"."を、その後に名前を記述します。

設定例3 ID名 hajime を設定

ID名を書き換えてください。最初に"要素名"+"#"を、その後に名前を記述します。

少々ややこしくなってきましたが、ここでは、スタイルの設定方法に3種類あることを覚えてください。その利用方法は、追々説明していきます。

セレクタのグループ化・組み合わせ

セレクタのグループ化(同一のプロパティを複数のセレクタに設定)、セレクタの組み合わせ(親要素を指定してその子や孫要素のみに設定)等の指定方法もあります。

グループ化

セレクタ1,セレクタ2 {プロパティ:値}

セレクタをカンマでつなぐと、同じスタイルが設定できます。

例1 p,li {color:red;}
p要素とli要素に、文字色 赤 を設定
セレクターの組み合わせ

セレクタ1 セレクタ2 {プロパティ:値}

「セレクタの組み合わせ」で、特定の位置のある要素のみに適用されるスタイルを指定することができます。

例1 li dl {color:red;}
li要素の中にあるdl要素に文字色 赤 を設定
例2 div#hajime p{color:red;}
ID名 #hajimeがつけられたdiv要素の中にある p要素に文字色 赤 を設定
他の場所(#hajime以外)のp要素には適用されません。
例3 div.midashi p{color:blue;}
クラス .midashiが設定されたdiv要素の中にあるp要素に文字色 青 を設定
クラス .midashiが設定されていないp要素には適用されません。

スタイルの設定ダイアログのID名、クラス名の欄に、グループ化や組み合わせるセレクタを、そのまま記入してください。

ユニバーサルセレクタ

特殊なセレクタ・・・セレクタに”*”(アスタリスク・・・ユニバーサルセレクタ)を指定すると、すべての要素にスタイルが設定できます。文書のマージンやパッディング・フォント種類等の初期設定に利用します。

本サイトでは、マージン・パディング・境界線の初期設定(0px)とフォント指定をしています。

* {margin:0; padding:0; border-width:0px;font-family : Verdana,Helvetica,Arial,ヒラギノ角ゴProW3,Osaka,"MS Pゴシック",sans-serif;font-size : 100%;}

プロパティと値

スタイルの内容を指定します。スタイルは、スタイルの設定ダイアログの「フォント」以下のタブで指定します。

適用できるプロパティは場所(例 pタグ)により変わりますが、ほぼ共通するプロパティは次のとおりです。

  • ブロックレベル要素、インライン要素に共通・・・フォント・色と背景
  • ブロックレベル要素・・・文字のレイアウト・レイアウト・位置・その他
  • 特定のブロックレベル要素・・・リスト・テーブル

「IE拡張」は使用しないようにしてください。

タブをクリックすると、設定できるプロパティとその内容が表示されます。(使用しても効果のないプロパティも表示されますのでご注意ください)

プロパティと値の設定・・・共通する指定方法

タブで設定プロパティを切り替えられます。

「フォント」タブでは、「サイズ」等が”プロパティ”、選択項目が”値”です。

  • 選択・・・文字飾り(重複可)や文字の属性は、該当するチェックマークをクリック
  • プロダウンメニュー・・・予約語 をクリック
  • 予約語になっている場合・・・の上下の矢印をクリックすると”値”が選べます。

”値”の設定

値が予約語の場合には、プロパティは設定されません。予約語でその左側が「大きい」「自動」等の”値”がある場合には設定されます。(要するに何もしなければ、そのプロパティは設定されません)

予約語にしておくと、親要素の”値”が適用されます。

一括指定

上下左右に値を設定するプロパティでは、省略して、一括指定ができます。

例 マージンプロパティ(「レイアウト」タブ)

margin:5px; 上下左右のマージンを5pxに指定

margin:5px 7px 9px 11px; 上のマージン5px、右横7px、下9px、左11pxのマージン(時計回りです)

この設定は、HPBのスタイルシートマネジャーでは難しいため、スタイルシートのソースで編集します。

”値”の単位と指定方法

プロパティ ”値”の記述とその意味
色の指定 color:red;
background-color : #ff0000;

色の指定は、16進数RGB(6桁)や16進数RGB(3桁)、固有のカラー名で指定します。
例 赤
16進数RGB(6桁)・・・#ff0000
16進数RGB(3桁)・・・#f00
固有のカラー名・・・red
長さの指定 絶対単位や相対単位で指定します。
絶対単位
ポイント(pt 1ポイント 1/72インチ)、cm、mm、in(インチ)等
相対単位
ピクセル(px),文字の高さ(em この要素で指定された文字サイズ 小数点も可能・・・ 1.3em)、”x”の高さ(ex 英字小文字の高さ)、パーセント(% その要素で指定された文字の大きさ×%)
%指定 その要素で指定された大きさ×%を指定
width : 80%;
横幅は800pxの親要素内で指定すると、640pxの幅になります。

幅や高さ、文字サイズの指定は、相対単位か%で指定してください。但し、pxは相対単位になっていますが、画面の解像度に依存しますので、できるだけ使用しないようにしてください。

画面解像度・・・表示される画面の解像度は色々あります。よく使われているモニターの解像度は、1280ドット(px 横幅)ですが、高解像度(例 横幅1920ドット)のモニターもあります。pxで指定すると、表示文字のサイズが大きく変わります。

URIの指定

a要素やimg要素では、URIを指定する属性”href”,”src”があります。(画像・背景画像・リンク先)URIの指定方法は、以下の通りです。

1 絶対URIで指定
URIをすべて記述する。外部サイトへのリンクの場合に使います。
<a href="http://www.sturnus.net/">絶対URIの例です</a>
2 相対URIで指定
設定するページ(ファイル)からの相対位置(階層)で指定。サイト内のページにリンクする場合や画像の指定に使います。
例1 同じフォルダにある文書にリンク
<a href="index.html">相対URIでのリンクの例</a>
例2 同じサブフォルダcommonにある文書にリンク
<a href="common/lower.html">相対URIでのリンクの例 下位</a>
例3 上位フォルダーにある文書にリンク
<a href="../upper.html">相対URIでのリンクの例 上位</a>

上位にあるフォルダは ..(ピリオド2つ)で指定します。一つ上のフォルダでは、../ 二つ上のフォルダでは ../../ です。

フォルダ

フォルダの相対位置には注意してください。

作成中のHTML文書や画像類ははすべてフォルダ"homepage"にあります。

編集中の文書はフォルダ"middle"にある文書名です。

例1・・・同じフォルダにあるindex.htmlへリンク

例2・・・下位のフォルダ"common"にあるlower.htmlへリンク

例3・・・上位フォルダにあるupper.htmlへリンク

URIを指定したページからの相対位置です。

途中でページのフォルダ位置を変更した場合には、そのページで指定した相対URIをすべて変更する必要があります。

3 ID名で指定

HTML文書内には、ID属性でID名を与えることができます。

例 標準段落にID名"hajime"をつける。

<p id="hajime"> ~</p>

ID属性にはスタイルを指定することができますが、本来の目的は、文書内の位置を示す(アンカー フラグメント識別子とも呼ばれる)ことです。(ですから、同一文書内ではユニークな名前です)

ID名でも、URIを指定できます。URIでIDを指定すると、文書のID で指定された場所を表示することができます。

<a href="#hajime">ID名でのリンクの例 同一文書内</a>

<a href="index.html#hajime">ID名でのリンクの例 他の文書(index.html)にあるID名にリンク</a>

カラー指定

カラー値を設定するダイアログではドロップダウンメニューをクリックしてください。カラーパレットが表示されます。

ここにあるカラーを指定すると固有のカラー名(例 red)で値が設定されます。

その他のカラーを設定する場合には、「ユーザー定義」をクリックします。

ここで、「その他」をクリック

カラーパレットが表示されますので、カラーを指定してください。ここで指定すると、16進数6桁(例 #00ff00)で設定されます。

パソコンによっては、中間の微妙な色合いが表現できない場合があります。ウェブセーフカラーと呼ばれる116色から選んでおくと安全です。ウェブセーフカラーは、R・G・Bの値が、16進数2桁 00、33、66、99、cc、ff の6種類からなる116色です。
例 #0033ff  青

スタイルシートマネジャで設定した”プロパティ”と”値”は、全て英語で記述されます。スタイルシートを、ソースプログラムで修正する場合には、英語で記述する必要があります。慣れない間は、スタイルシートマネジャで設定や修正をしてください。

インライン要素(文字列や画像)の指定

文字列のスタイルは「文字のレイアウト」タブで指定します。

文字のスタイル
プロパティ ”値”の記述とその意味
行の高さ line-height : 1.3;
行の高さ・・・自動的に折り返される行や行替え(shift+Enterキー)した場合の行の高さです。段落上下のスペースはレイアウトで指定します。
単位は指定しないようにしてください。(倍で指定)
文字間 letter-spacing : 0.5;
文字間隔・・・指定しなければ詰めて配置されます。
ワード間 word-spacing : 0.5
英文のみ
インデント tex-indent : 1em;
段落1行目のインデント(字下げ)を指定。マイナス可
垂直方向の配置 vertical-align : middle;
垂直方向の配置(展開)・・・通常指定不要です。
水平方向の配置 text-align : center;
文字列の水平方向の配置・・・この場合には、センタリングされます。
連続した空白文字 white-space : pre;
ソースプログラムにある空白文字の処理を指定します。通常指定不要です。

行間だけは指定してください。

なお、行間を「倍」(無単位)以外に指定すると、行の途中で文字サイズを変えると正常に表示されませんので、ご注意ください。「行間を調整するなら単位はナシで」All About

英語の使い方・・・スタイルシートは英語で記述されます。その主要な用語は以下の通りです。
・left、center、right・・・水平方向の左・中・右
・vertical(バーティカル)・・・垂直方向
・height(ハイツ),width(ワイドス)・・・高さ・幅
・align(アライン)・・・整列する
・auto(オート)・・・自動

スタイルを利用する

HPBを立ち上げ、フォルダ"lesson"のsample_01.html  を開いてください。

フォルダlessonのダウンロードは、練習用ファイルのダウンロードから

クラスやIDを利用して、スタイルを設定する。

sample_01.htmlが開いたら、3行目をクリックしてください。

ソース

ピンクの枠が表示されます。ピンクの枠(フォーカス)が、段落の幅を示しています。

sample_01.html には、クラス(align_center センタリング)とID(#header)が準備されています。

/* センタリングの定義 */
.align_center{margin-left : auto;margin-right : auto;text-align : center;}

/* IDの指定 */
div#container{text-align : left;}
p#header{line-height: 2;font-size: 120%;color: blue;font-weight: bold;margin-left:2em;}

#headerは、見出し1と同じです。

クラスやIDを指定する

ビュー「タグ一覧」タブを利用する

3行目「クラスでセンタリングします。」の文字列をクリック → (画面右側にある)ビューを「タグ一覧」

タグ一覧

フォーカスのある文字列文字が選択されています。

その上にpがあり、この文字列はp要素であることを表示しています。

pをクリックしてください。

タグ一覧

pの属性が下に表示されます。

classの値をダブルクリックすると、プルダウンメニューが表示されますので、align_center を選んでください。

プルダウンメニュに表示されるクラスは、フォーカス要素(ここではp要素)に設定可能なクラスのみです。

(未指定)をクリックすると、クラスの設定は解除されます。

続いて、4行目をクリックしてください。

ビュー「タグ一覧」で、p要素を選び、idの値をダブルクリックして、#header を指定します。

これで sample_01.html の3行目と4行目にクラスとIDが設定されました。

サンプル

属性の変更ダイアログを利用する

フォーカスを確認してから右クリック → 属性の変更

[スタイル]をクリック

スタイルの設定ダイアログが表示されます。

ソースプログラムを確認する

ページ/ソース画面にして、ソースプログラムがどのように変わったか確認してください。赤字が追加されました。

<p>本サイト標準のスタイルが設定されたページです。</p>
<p>文書の本文全体をグループ化要素(&lt;div&gt;)で囲んでいます。</p>
<p class="align_center">クラスでセンタリングします。</p>
<p id="header">IDで、見出し1と同じスタイルにします。</p>

ソースプログラムを直接修正してもかまいません。

スタイルシートを組み込む

ここまでスタイルシートの書き方や編集方法を説明してきました。

sample_01.htmlのスタイルシートマネジャダイアログを見てください。

sample_01.html を開いて、HTMLソースにします。head要素があります。その中にstyle要素が定義されています。

<head>
<meta charset="UTF-8">
<title>サンプル_01</title>
<style type="text/css">
<!--
* {
margin:0; padding:0;
font-family: Verdana, Helvetica,Arial, "ヒラギノ角ゴProW3", Osaka,"MS Pゴシック", sans-serif;
font-size : 100%;
}
(中間省略)
p#header{
line-height: 2;
font-size: 120%;
color: blue;
font-weight: bold;
margin-left:2em;
}
.align_center{
margin-left : auto;
margin-right : auto;
text-align : center;
}
-->
</style>

</head>

このようなstyle要素で、ページの中に設定されています。

HPBで作成すると、style要素の最初に<!--、最後に-->が付加されますが、これは互換性のためで最新のブラウザでは不要です。

では、同じスタイルシートを新しいページで使いたい場合どうしたらよいのでしょうか?

この場合は、スタイルシートを外部の独立したファイルにして、ページでは、そのファイルを参照する形式にします。

なお、HPBのスタイルシートマネジャでは、埋込みと外部スタイルシートは、全く同様な方法で編集できます。

ソースプログラムのなかにstyleを直接埋め込むこともできます。
例 <p style="font-weight : bold;">ソース内のスタイル</p>
HPBのツールバーのアイコンを使うと、このような設定になりますが、この方法は将来利用できなくなりますので、本サイトでは、一切紹介していません。

スタイルシートを外部の独立したファイルにする

独立したスタイルシートにしておくと、「複数のページで同じスタイルが利用できる」・「スタイルの変更は1回で」等のメリットがあります。

最初に、埋め込んだスタイルシートを作成してください。ほぼ希望通りのスタイルシートになったら以下の手順で外部スタイルシートに変更します。

外部スタイルシートの作成

メモ帳にスタイルシートをコピーして、拡張子.cssの新しいファイルを作成し、ページには、そのファイルを利用するためのリンクを設定します。

具体的手順

埋め込まれたstyle要素を切り取る → メモ帳を開く → 貼り付ける → "<style type="text/css"><!--"と”--></style>”を削除 → 1行目に @charset "UTF-8"; を追加 → 名前を付けて保存 → 名前.css(拡張子 .cssで保存

名前は英数字で、拡張子は、.cssです。

sample_01.htmlで埋め込まれていたスタイルシートを、外部スタイルシートファイル sample_02.css  へ変えました。sample_02.cssをメモ帳で開き、確認してください。

外部スタイルシートを利用する

新規作成 → スタイルシートマネジャ → [外部スタイルシートの追加]をクリック

[参照]で保存したスタイルシートを指定

ソースプログラム

<head>要素に外部スタイルシートのリンクが作られます。

<head>
<meta charset="UTF-8">
<title>sample_01</title>
<link rel="stylesheet" href="sample_02.css" type="text/css">
</head>

hrefで外部スタイルシートを指定しています。この場合は、ページがあるフォルダ内のsample_02.cssです。

sample_01.html に埋め込まれていたスタイルシートを外部に変更したサンプルページは sample_02.html です。開いて確認してください。

外部スタイルシートを編集する

スタイルシートマネジャを表示します。

スタイルシート情報に外部スタイルシートが表示されます。修正したいスタイルシートをクリックすると、ルール情報に設定されているルールが表示されます。

ルールを選択 → [編集] スタイルの設定ダイアログで修正

スタイルシートを選択して「CSSエディタで編集」をクリックすると、スタイルシートを直接編集することもできます。