HPB19 | HPB18 コンテンツ一覧
ホーム > HPB19 > スタイルシート( CSS ) とは 書き方
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

スタイルシート( CSS ) とは 書き方


スタイルシート( CSS )とは



スタイルシートとは、ホームページ、ブログのデザインについて、個別に指定するのではなく、ページのヘッダー部とか別のファイルに、デザインの指定だけをまとめて記述しておく部分、および、その記述方式を指します


両者を特に区別して呼びたい場合、スタイルシートを各ページのヘッダー部に書く方式を内部スタイルシート、独立したファイル(CSSファイル)に書き出しておき、それを各ページから呼び出して使用する方式を外部スタイルシートと言うこともあります


外部スタイルシートで使用するスタイルシートファイルを、「 CSS (ファイル)」 ( Cascading Style Sheets カスケーディング スタイルシート (ファイル))と呼びます

厳密に言えば、「 CSS 」 は、スタイルシートを記述するための言語の事なのですが、今では、広く、スタイルシート、および、スタイルシートファイルの事を指すようになっています

ファイルの拡張子は、通常、「 ~.CSS 」とします


文字の大きさとか色とかを、CSSファイルとして分離することにより、ページ本体は、コンテンツの充実に力を注ぐことができ、また共通CSSとして作っておけば、そこを変更するだけで、サイト全体の見栄えを一括して変更できる、という利点があります




スタイルシートの書き方



スタイルシートの書き方は、通常のヘッダー部に記述する内部スタイルシート、外部スタイルシートのCSSファイルとも同じで、例えば、<h1>タグ文字の大きさ、色を指定したいような時は、

h1{
font-size:100%;
color:
#ff0000;
background-color:
#ffffff;
}


または、

h1{
font-size:100%;color: #ff0000;background-color: #ffffff;
}


のように記述します
外部スタイルシート(CSSファイル)の場合、<style>タグは不要です


h1 」の部分を セレクタ、「 font-size 」の部分を プロパティ (属性)、「 100% 」の部分を 値 (属性値)と言います
プロパティ、値を複数指定したいときは、「 ; 」(セミコロン)で区切って指定します



スタイルシート コメントの書き方


コメントは、前後を、「 /* 」と「 */ 」で挟んで記述します

同一の対象に対して複数の異なる指定をした詩は、後から指定した方が有効になりますので、その規則を利用して、設定変更を行うような際、もとの指定をそのままに、変更後の指定を後ろに記述していけば、コメントの様に履歴を残すこともできます

h1{
/* 複数の指定行がある場合、前の行はコメントです */
font-size:
100%;
font-size:120%;
color:
#ff0000;
color: #000000;
background-color:
#ffffff;
background-color: #00ffff;
}




外部スタイルシート(CSSファイル) ファイル名


ファイル名は任意ですが、これを例えば、「 style.CSS 」とかのファイル名で、「 CSS 」フォルダとかに保存します




外部スタイルシート(CSSファイル)の呼び出し方



各ページから呼び出す際は、各ページのヘッダー部に、

<link rel="stylesheet" href="https://サイト名/CSS/style.CSS" type="text/CSS">


の一文を追記しておきます



「 @import 」文を利用して、下記のように書くことも可能です

<style type="text/CSS">
<!--
@import url("https://サイト名/CSS/style.CSS");
-->
</style>


" 」(ダブルクォーテーション)は、付けても、付けなくても可です



CSS2では、下記のような書き方もサポートされました

<style type="text/CSS">
<!--
@import "https://サイト名/CSS/style.CSS";
-->
</style>



ただし、「 @import 」文は、他のタグ指定とかとの併用はできません
つまり、下記のような書き方は、不可です

<style type="text/CSS">
<!--
@import url("https://サイト名/CSS/style.CSS");
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
body{
line-height : 170%;
}
-->
</style>





ホームページビルダー使用上の問題



実際にスタイルシートファイル(CSS)の設定が見栄えに反映されるのは、ページ閲覧者が、ブラウザでページを表示したときです
つまり、ホームページビルダーでページを作っている際は、見た目に反映されません

ホームページビルダーのよさは、ブラウザー表示時に近い状態を見ながら、それを直観的に編集できるところにあるのに、あまりに違った状態を見ながらの編集は、ホームページビルダーの良さをなくしてしまいます

残念ですが、スタイルシートは、各ページのヘッダー部に書くしかありません
ヘッダー部に直接書いておけば、スタールシートの内容が反映された状態を見ながらページを編集できます

目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > HPB19 > スタイルシート( CSS ) とは 書き方
   

© 2014 abhp.net All Rights Reserved.
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP