|
|
© 2014 abhp.net All Rights Reserved. | |
スタイルシート（ CSS ） とは 書き方 |
スタイルシート（ CSS ）とはスタイルシートとは、ホームページ、ブログのデザインについて、個別に指定するのではなく、ページのヘッダー部とか別のファイルに、デザインの指定だけをまとめて記述してある部分、および、その記述方式を指します 両者を特に区別して呼びたい場合、スタイルシートを各ページのヘッダー部に書く方式を『内部スタイルシート』、独立したファイル（CSSファイル）に書き出しておき、それを各ページから呼び出して使用する方式を『外部スタイルシート』といいます 外部スタイルシートで使用するスタイルシートファイルを、「 CSS （ファイル）」 （ Cascading Style Sheets カスケーディング スタイルシート （ファイル））といいます ※．厳密に言えば、「 CSS 」 は、スタイルシートを記述するための言語の事なのですが、今では、広く、スタイルシート、および、スタイルシートファイルの事を指すようになっています ファイルの拡張子は、通常、「 ～.CSS 」にします 文字の大きさとか色とかを、CSSファイルとして分離することにより、ページ本体は、コンテンツ主体に記述でき、また、共通CSSファイルとして作っておけば、そのファイル内容を変更するだけで、サイト全体の見栄えを一括して変更できる、という利点があります スタイルシート（ CSS ） 基本文法
スタイルシートの書き方 外部スタイルシート と 内部スタイルシート 記述方法の違いスタイルシートのスタイル設定記述は、ヘッダー部に記述する内部スタイルシートも、外部スタイルシートのCSSファイルとも同じですが、ヘッダー部に記述する内部スタイルシートの場合、スタイル設定記述の前後をstyle タグで囲う必要があります
例えば、<h1>タグ文字の大きさ、色を指定したいような場合、下記のように記述します
「 h1 」の部分を セレクタ、「 font-size 」の部分を プロパティ （属性）、「 100% 」の部分を 値 （属性値）と言います プロパティ、値を複数指定したいときは、「 ; 」（セミコロン）で区切って指定します スタイルシート コメントの書き方コメントは、前後を、「 /* 」と「 */ 」で挟んで記述します 同一の対象に対して複数の異なる指定をした詩は、後から指定した方が有効になりますので、その規則を利用して、設定変更を行うような際、もとの指定をそのままに、変更後の指定を後ろに記述していけば、コメントの様に履歴を残すこともできます 外部スタイルシートを使用する際は、ホームページビルダー付属の「CSSエディター」で開いてみた際の文字化けを防ぐ為、「@charset "UTF-8";」 を指定します
外部スタイルシート（CSSファイル） ファイル名ファイル名は任意ですが、例えば、「 style.CSS 」とかのファイル名で、「 CSS 」フォルダ等に保存します 外部スタイルシート（CSSファイル）の呼び出し方各ページから呼び出す際は、各ページのヘッダー部の任意の場所に、下記の一文を追記しておきます 絶対URL指定は、ブラウザで見る分には問題ないのですが、ホームページビルダーの「ページ編集」画面には、設定内容が反映されませんので、相対URL指定がおすすめです
「 @import 」文を利用して、下記のように記述することも可能です 「 " 」（ダブルクォーテーション）は、付けても、付けなくても可です
CSS2では、下記のような書き方もサポートされました
ただし、「 @import 」文は、他のタグ指定とかとの併用はできません つまり、下記のような書き方は、不可です
|
|||||||||||||||||||||||||||||||||||||||||||||||||||