スタイルシートの基本

Webの森.com ホームページ作成支援サイト
基本

スタイルシートとは

そもそもHTMLというものは、デザインを行うものではありません。
そこでデザインを目的に開発されたのが、スタイルシート (CSS) と呼ばれるものです。HTMLとスタイルシートを使用する事により、細かいデザインを記述する事ができます。スタイルシートの属性は右メニューからご覧頂けますが、非常に数が多い物になっております。ですので、当サイトでは良く使う初歩的な属性を解説していきます。まずは、スタイルシートの書き方や特徴について覚えていきましょう。

優先順位

スタイルシートの記述方法は3種類あり、それぞれ優先順位があります。
優先順位:高 - タグに直接記述する方法
優先順位:中 - HTML文書の中の<head>タグに記述する方法
優先順位:低 - 外部CSSファイルに記述する方法
記述方法は後で説明しますので、ここでは優先順位があるという事だけ覚えておいて下さい。

タグに直接記述

優先順位:高の方法の記述から説明いたします。
<タグ名 style="属性記述">要素</タグ名>
style="属性記述"でスタイルを指定しています。属性記述をする事により要素に様々な命令を行えます。参考にスタイルシートで書いた文字列を表示させて見ます。
<div style="font-size: 20px; color: #ff0000; font-weight: bold;">文字列</div>
文字列
このように表示させる事ができました。<div>タグに記述しましたが他のタグにも使用できるので色々試してみてください。属性の記述を見てみますと、
font-size: 20px; - フォントサイズを20pxで表示する
color: #ff0000; - フォントカラーを『#ff0000』で表示する
font-weight: bold; - フォントを太文字で表示する
という設定になっています。設定できる属性については右メニューの各項目をご覧下さい。

<head>タグに記述する

優先順位:中の方法の記述を説明いたします。記述は<head>〜<head>タグの中に記述します。
<head>
<style type="text/css">
<!--
   ここにスタイルの属性を記述する
-->
</style>
</head>
このようにすれば、ページ全体にスタイルの記述が適用されるようになります。参考例としてスタイルシートを<head>タグ内記述したページを用意しましたので、そちらの方をご覧下さい。IDやクラスについては後に説明いたします。

外部スタイルシート

優先順位:低の方法の記述を説明いたします。これはCSSファイルを作り、HTMLがそのファイルを参照する事により、スタイルが適用されるものです。複数のHTMLが参照する事ができますので、CSSファイルを変更する事により複数のHTMLを更新する事ができるメリットがあります。このようなスタイルシートの事を『リンキングスタイルシート』といいます。CSSファイルの作成方法ですが、テキストファイルなどの『名前をつけて保存』で『ファイル名.css』と記述する事で作成できます。HTMLに外部スタイルシートを参照させるには、
<head>
<link rel="stylesheet" href="CSSファイルのパス" type="text/css">
</head>
この記述を<head>〜<head>タグの中に記述する必要があります。こうする事により参照したHTMLファイルはスタイルシートを使う事ができます。

属性の記述

ここでは属性の基本ルールを説明いたします。まずはこちらをご覧下さい。
セレクタ { 属性:; }
まず、セレクタに指定できるのは、
@ タグ名
A クラス名
B ID名
になります。セレクタに、『body』や『div』などのタグ名を指定する事ができるという事です。クラス名やID名は後ほど説明します。
次に属性と値については、先ほど説明した『font-size: 20px;』これにあたります。複数のセレクタを一つに記述する事もできます。
セレクタ,セレクタ { 属性:値; }
,』(カンマ)でセレクタを区切る事により複数記述する事ができるのです。

クラスとID

クラス名とID名をセレクタとしたい場合は、適応したタグにクラス名やID名を指定する事で、そのタグにクラス名やID名に設定されたスタイルを適応される事ができます。
<head>
<style type="text/css">
<!--
   .test_class {font-size:20px;}
   #test_id {color:#ff0000;}
<-->
</style>
</head>

<body>
   <div class="test_class">
クラスです</div>
   <span id="test_id">
IDです</span>
</body>
セレクタのクラス名記述は名前の頭に『.』(ドット)をつけます。
タグへの記述は<タグ名 class="クラス名">と記述します。
セレクタのID名記述は名前の頭に『#』(シャープ)をつけます。
タグへの記述は<タグ名 id="ID名">と記述します。

参考サンプル

ここまでの3つの記述方法、タグやクラス名やID名での記述などを説明いたしました。
違いを分かりやすくする為にサンプルなどを比べて見てみましょう。
お願い
もしページの内容がお役に立てたら、ポチっと押して貰えると幸いです。

正当なCSSです!