CSS（スタイルシート）の記述方法

ＣＳＳの記述方法は３通りありますが、これからＣＳＳでデザインするという方は外部ＣＳＳで記述し、リンクする方法をおすすめします。今までＨＴＭＬファイル内で記述してきた方も、外部ＣＳＳに切り替えた方がよいと思います。

基本的にＣＳＳファイル（拡張子.css）は、テキストファイルなのでメモ帳などのテキストエディタで記述しますが、ホームページビルダーやDreamweaver などではソフト上から指定することができます。そのため、ＣＳＳの知識がない方でも、ソフトの使用方法をマスターすれば作成することができます。

基本的にＣＳＳでスタイルを指定する場合は、 ｛プロパティ　：　値｝　という形で指定し、複数のプロパティを指定する場合は　；（セミコロン）で区切って指定します。
ここでは、３通りの記述方法を例を挙げて簡単に説明します。

特定のタグ内にＣＳＳを記述する方法
<head>～</head> 内で指定する方法
外部CSSファイルでスタイルを指定する方法

　特定のタグ内にＣＳＳを記述する方法

まずは、特定のタグ内にＣＳＳを指定する方法を説明します。この方法で記述すると、記述されたタグ内のみにスタイルが適用されます。

（例）　<p> タグに 10px の余白・フォントサイズを 12px ・フォントカラーを赤にする場合

<p style="padding : 10px ; font-size : 12px ; color : red ; ">

上記ように、開始タグ内で　style=" プロパティ : 値 "という形で指定し、複数指定する場合は ; （セミコロン）で区切ります。

こうすることで、指定した <p>タグ内のみに指定したスタイルが適用されます。こうすれば、一つのタグのみに個別のスタイルを指定したい場合には有効ですが、直接ＨＴＭＬタグ内に記述するためＨＴＭＬファイルが頻雑になります。

後ほど説明しますが、<head>～</head> 内で指定する方法や外部ＣＳＳファイルで指定する場合にはｉｄ属性やｃｌａｓｓ属性で指定することで同様の効果が得られるのでそちらを使用することをおすすめします。

また、ホームページビルダーで特定のタグ内にＣＳＳを記述する場合は指定するタグで右クリックをして、「スタイルの設定」→「現在のタグのみにスタイルを設定（編集４）」を選択し、スタイルを指定することで指定したタグに例のようにスタイルが記述されます。

ＣＳＳをあまり意識しないでホームページビルダーを利用している場合は、上記のようにスタイルを指定している場合も多いと思いますので、後ほど解説する外部スタイルシートに切り替えることをおすすめします。

▲ページTOPへ戻る

　<head>～</head> 内で指定する方法

次に、ＨＴＭＬファイル内の <head>～</head> の間で記述する方法を説明します。
この場合は <head>～</head> の間に以下のタグを記述し、  でコメントアウトされた部分に適用するスタイルを記述します。

以下に具体例を挙げて説明します。
（例）　ページ内の全ての <p> タグに 10px の余白・フォントサイズを 12px ・フォントカラーを赤にする場合

上記のように、
指定するタグ名｛属性：値｝
という形で記述します。こうすることでページ内全て <p> タグにスタイルが適用されます。

<head>～</head> 内で記述する方法で、特定のタグのみにスタイルを指定したい場合は、ｉｄ属性、またはｃｌａｓｓ属性を利用します。

（例）　特定の <p> タグに 20px の余白・フォントサイズを 14px ・フォントカラーを黒にする場合

上記のように、ｉｄ属性で指定する場合は ＃ｉｄ名、ｃｌａｓｓ属性で指定する場合は．ｃｌａｓｓ名と記述し、スタイルを指定する <p> タグに以下のように適用するｉｄを指定します。

※（id で指定する場合）
<p id="abc">

※（id で指定する場合）
<p class="abc">

ｉｄとｃｌａｓｓはもたらす作用はほとんど同じですが、ｉｄは同一ページ内で一つのｉｄを一度しか使えないという制約があります。ｃｌａｓｓは使用数の制限はなく、同一ページ内で同じｃｌａｓｓを何度でも使用することができます。

そのため、同一ページ内で複数回使用する可能性がある場合は、ｃｌａｓｓ属性で記述した方がいいでしょう。

ホームページビルダーで <head>～</head> の間で記述する場合は、指定するタグで右クリックし、「スタイルの設定」→「ＨＴＭＬタグにスタイルを設定（編集１）」を選択し、適用するスタイルを指定します。こうすることで <head>～</head> の間にスタイルが記述されます。もちろん最初に説明した<STYLE>～</STYLE>も自動的に記述されます。

ホームページビルダーでｉｄやｃｌａｓｓを指定する場合は、指定するタグで右クリックし、「スタイルの設定」→「クラスやＩＤによるスタイルの設定」を選択し、クラス名・ＩＤ名を記入し、クラスの場合は「編集２」を、ＩＤの場合は「編集３」を選択し、適用するスタイルを指定します。

▲ページTOPへ戻る

　外部CSSファイルでスタイルを指定する方法

外部スタイルシートとは拡張子 .css のテキストファイルで、メモ帳などのテキストエディタで記述します。もちろん、ホームページビルダーの機能でも作成・編集することができます。

記述方法は先に説明した「<head>～</head> 内で指定する方法」とほとんど同じで、<STYLE> タグと  のコメントアウトの部分を省いたものです。

ＣＳＳを外部ＣＳＳとすることでＨＴＭＬファイルの軽量化にもつながり、複数ページで同じデザインにする場合にも複数のページから一つのＣＳＳファイルにリンクするだけで済み、ページ作成の効率も上がります。また、<head>～</head> の記述が少なくなり、コンテンツ部分をＨＴＭＬソースの上部に記述できるためＳＥＯ対策にもなります。

以下に、外部ＣＳＳファイルの記述方法とＨＴＭＬファイルからのリンク方法の具体例を示します。

（例）　外部ＣＳＳファイル「 abc.css 」へリンクして、全ての<p> タグに 10px の余白・フォントサイズを 12px ・フォントカラーを赤にする場合

{
padding : 10px ;
font-size : 12px ;
color : red
}

メモ帳などのテキストエディタで上のように記述して、「 abc.css 」というファイル名で保存します。
そして、ＨＴＭＬファイルの <head>～</head> の間に以下のように記述することで、外部ＣＳＳファイルとリンクされ、スタイルが適用されます。

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

ホームページビルダーから、外部ＣＳＳファイルを作成・編集する場合は「スタイルシート・マネージャー」を使用します。「スタイルシート・マネージャー」はツールバーから直接呼び出すか、ツールバーの「表示」→「スタイルシート・マネージャー」と選択することで呼び出せます。

「スタイルシート・マネージャー」から外部ＣＳＳファイルへリンクする場合は「スタイルシート・マネージャー」の「リンク」ボタンをクリックし、リンクす外部ＣＳＳファイルを選択します。また、新規の外部ＣＳＳファイルを作成する場合は「リンク」ボタン右側のプルダウンから「外部スタイルシートの新規作成/リンク」をクリックし、ファイル名を記入し「ＯＫ」ボタンをクリックします。

外部ＣＳＳファイルを編集する場合は「スタイルシート・マネージャー」の「スタイルに一覧」から外部ＣＳＳファイルを選択し、「編集」ボタンをクリックすると「外部スタイルシートのスタイルの一覧」が開くので、編集したいタグ、またはクラス・ＩＤを選択し「編集」ボタンをクリックすれば編集画面が開きます。

これからホームページビルダーで外部ＣＳＳファイルでを作成しようという方は、まずは「<head>～</head> 内で指定する方法」ですべてのスタイルを指定した後に、ホームページビルダーのＨＴＭＬソースを開きスタイルを指定した部分を切り取り、外部ＣＳＳファイルへ貼り付けるなどした方が作業がスムーズに進むと思います。

▲ページTOPへ戻る

ホームページ作成
ホームページ作成情報 TOP	HPビルダーのススメ
HPビルダーの注意点	HTMLの知識について
CSSについて	CSSの記述方法
ホームページに動きをつける	アップロード・FTP
レンタルサーバーの選び方