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

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


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



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


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


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

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



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


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


スタイルシート( CSS ) 基本文法



項目 内容
記述例 h1{
  font-size:100%;
}
説明 h1 CSSの基本文法では、「セレクタ」、「プロパティ」、「値」の3つが記述されます
セレクタ
font-size
プロパティ
100%




スタイルシートの書き方 外部スタイルシート と 内部スタイルシート 記述方法の違い



スタイルシートのスタイル設定記述は、ヘッダー部に記述する内部スタイルシートも、外部スタイルシートのCSSファイルとも同じですが、ヘッダー部に記述する内部スタイルシートの場合、スタイル設定記述の前後をstyle タグで囲う必要があります

※. 外部スタイルシート(CSSファイル)に記述する場合、<style>タグは不要です
※. 外部スタイルシート(CSSファイル)を更新しても、ホームページビルダーの「サイトの公開」では、CSSファイルがアップロードされない場合があります
その場合、「FFFTP」等、外部ツールを用いてアップロードします (「不要ファイル 削除方法 ( FFFTPミラーリング )」参照)


例えば、<h1>タグ文字の大きさ、色を指定したいような場合、下記のように記述します


分類 記述例
外部スタイルシート h1{
  font-size:100%;
  color:
#ff0000;
  background-color:
#ffffff;
}
h1{
  font-size:
100%;color: #ff0000;background-color: #ffffff;
}
内部スタイルシート <style type="text/css">
<!--
h1{
  font-size:100%;
  color:
#ff0000;
  background-color:
#ffffff;
}

-->
</style>
<style type="text/css">
<!--
h1{
  font-size:
100%;color: #ff0000;background-color: #ffffff;
}

-->
</style>


h1 」の部分を セレクタ、「 font-size 」の部分を プロパティ (属性)、「 100% 」の部分を 値 (属性値)と言います

プロパティ、値を複数指定したいときは、「 ; 」(セミコロン)で区切って指定します



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



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

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

外部スタイルシートを使用する際は、ホームページビルダー付属の「CSSエディター」で開いてみた際の文字化けを防ぐ為、「@charset "UTF-8";」 を指定します


分類 記述例
外部スタイルシート @charset "UTF-8";
/* 複数の指定行がある場合、前の行はコメントです */
h1{
  font-size:100%;
  font-size:120%;
  color:
#ff0000;
  color: #000000;
  background-color:
#ffffff;
  background-color: #00ffff;
}
内部スタイルシート /* 複数の指定行がある場合、前の行はコメントです */
h1{
  font-size:
100%;
  font-size:120%;
  color:
#ff0000;
  color: #000000;
  background-color:
#ffffff;
  background-color: #00ffff;
}




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


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




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



各ページから呼び出す際は、各ページのヘッダー部の任意の場所に、下記の一文を追記しておきます

絶対URL指定は、ブラウザで見る分には問題ないのですが、ホームページビルダーの「ページ編集」画面には、設定内容が反映されませんので、相対URL指定がおすすめです


分類 指定例
相対URL指定 <link rel="stylesheet" href="../css/CSS_000000.css" type="text/css">
絶対URL指定 <link rel="stylesheet" href="https://abhp.net/css/CSS_000000.css" type="text/css">



「 @import 」文を利用して、下記のように記述することも可能です
" 」(ダブルクォーテーション)は、付けても、付けなくても可です

<style type="text/CSS">
<!--
@import url("<link rel="stylesheet" href="https://abhp.net/css/CSS_000000.css" type="text/css"> ");
-->
</style>



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

<style type="text/CSS">
<!--
@import "https://abhp.net/css/CSS_000000.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>

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

© 2014 abhp.net All Rights Reserved.

参考情報


【CSS】displayの使い方を総まとめ!inlineやblockの違いは?

ページTOP
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP