超初心者でも簡単！あなたもできるHP作成！− Make easily  
||　トップページ　||　HTML　||　Style Sheet　||　リファレンス　||　Web素材　||　Contact Us　||　サイトマップ　||　初めての方　||　
Style Sheet
スタイルシートについて 基本のページ ファイルの保存方法 スタイルシートの基本 見出しの書き方 表示位置を変える 段落・改行を入れる 画像を表示する 文字サイズと色の変更 テーブル(表)の基本 セルに文字を入れる セルの統合 セル内の位置を変える 文字の太さを変える リスト番号をつける リンクを張ってみよう！ All About
ホームページ作成 All About　JavaScript

スタイルシートについて

スタイルシートとは、HTML（タグ）だけでは表現できないWebページのデザインの部分を担当する言語です。
そもそもHTMLタグは「見出し」や「段落」など構造を定義するための言語なので、デザインをするための言語ではありません。
そのため自由にデザインをすることが難しく、テーブルタグなどで記述してデザインを整えていました。

少し前までのブラウザはスタイルシートに対応していませんでしたが、 最近ではほとんどのブラウザがスタイルシートに対応してきているので、 スタイルシートを使って自由なデザインでHPを作ることが出来るようになりました。

でも、基本はやはりHTMLタグなのでタグはしっかり覚えておいてくださいね。

スタイルシートを使えば、いままで出来なかったデザインが簡単にできるようになります。
その上、背景色を一括で変更したり、文字の色を一括で変更したりとデザインを簡単に変更することもできます。
この「Make easily」もスタイルシートを使って作成しています。

スタイルシートにはいくつか種類がありますが、HTML用のスタイルシートはCSSといいます。( Cascading Style Sheet の略）

スタイルシートを使う場合、記述方法には3つあります。

  1. ヘッダ方式　−　ヘッダにスタイルシートをまとめて記述する
  2. インラインスタイル　−　タグに直接記述する
  3. 外部スタイル　−　スタイルシートだけを別ファイルにして読み込ませる

CSSを使う場合、ブラウザの誤作動を防ぐために <head>　〜 </head> のタグの間に「このページはCSSを使いますよ」という宣言タグを記述しなければなりません。

1,2の場合は下のように記述します。

<meta http-equiv="content-style-type" content="text/css">
3.の場合は下のように記述して外部からスタイルシートファイルを読み込みます。
<link href="ファイル名.css" rel="stylesheet" type="text/css">
それぞれ混在して使用することもできますが、その場合優先順位に気をつけてください。

優先順位は
1インライン　→　2ヘッダ方式　→　3外部スタイル
の順で優先されます。

記述方法（クラスセレクタ）

インラインスタイル以外では記述方法にクラスセレクタ『 . 』及びIDセレクタ『 # 』という2つの方法があります。
「Make easily」では、『 . 』で指定するクラスセレクタを使って説明をしていきます。
このクラスセレクタを使えば、CSSを部分的に適用させることが出来るようになります。
ヘッダ方式記述例（headタグ内）
<style type="text/css">
<!--
.fonts {
color : red
}
-->
</style>
<!- -　　- ->(繋がっているように見えますが破線です)で囲むのは、スタイルシートに対応していないブラウザで見たときに誤作動しないようにスタイルシートタグをコメント化するためです。
記述例（bodyタグ内）
<span class="fonts">この文字は赤です</span>
ディスプレイ表示例
この文字は赤です
このように一見HTMLタグと変わらないように見えますが、 スタイルシートを使うとタグでは表現できないようなデザインも簡単にカッコ良く見せることができるようになります。

それではスタイルシートを実際につかってHPを作っていきましょう！

▲このページのトップに戻るTop