初級 CSS 解説｛初心者向けの、ごく簡単な、スタイルシートの使い方の説明です。｝

｜ SINFONIA の世界 TOP ｜レンタル掲示板比較表｜レンタルサーバー比較表｜ GMASK 使用法｜
｜ FFFTP 使用法 | 初級 CSS 解説 | 独自アイコンに変更する方法｜ IE の Cookieの設定方法｜

SINFONIAの世界 TOP > PC ネット関係 > 初級 CSS 解説

初級 CSS 解説

ホームページの各ページを構成するのは、基本的に HTML ですが、それを装飾するには、カスケーティングスタイルシート（CSS）を使うことが一般的で、推奨されています。

スタイルシートのことを、全て列挙するのは大変ですので、初心者の方が、使えるような内容で、説明したいと思います。
中級者以上の方には、当たり前の内容になっていると思いますので、突っ込まないで下さいね（笑）。

尚、不明点がある方、間違いなどを発見された方は、SINFONIA 質問掲示板か、メイン掲示板の方に、書き込みください。
また、上級者の方、よろしく、ご指導ください。

CSS の基本形
CSS の要素とセレクタ
サンプル
参考サイト

1. CSS の基本形

CSS の基本的な指定の仕方を説明します。尚、ここでは外部スタイルシートについては述べません。又、タグ中に直接指定する方法も取り上げません。<head>～</head> 間に指定する方法のみ説明します。

基本的に上記のように<head>～</head>間に指定します。
例えば、

div { color:red; }
とした場合、
div { ... } の div を div要素のセレクタ（selector）
color:red を宣言（declaration）
color を属性（property）
red を値（value）
<div> をdiv要素の開始タグ
</div> をdiv要素の終了タグ

と、言うのが正しい表現だそうです。（とほほのWWW入門より引用）

ただし、ここではわかりやすいように、上記の例ですと、<div>（もしくはdiv タグ）に、color:red のスタイルを指定とさせてもらいます。

基本的に、

タグ {指定するスタイル;}

と言う形になります。<head>～</head>間で指定したタグを<body>～</body>に書くと、効果が現れます。

<head>
<style type="text/css">

</style>
</head>
<body>
<h1>おはようございます。</h1>
今日もいい天気ですね。
</body>

と書いた場合、以下のようになります。

おはようございます。

今日もいい天気ですね。

詳しい指定の仕方などは次項に書きます。
  基本的な書き方は以上です。注意点としては</style>を忘れると画面が真っ白になってしまう所です。で囲まれた部分はコメントアウトですので、ソースには表示されますが、HTML で見た時には表示されません。
  CSS に対応していないブラウザで見た人のために、こうしておきます。

基本は

</style>を忘れずに。

では、以下のような文章を CSS で指定して作ってみてください。

テスト 1

新年あけましておめでとうございます

今年も一年、よろしくお願いします。

見出しは、色を#0000ff、フォントサイズを18pxに。
本文は、色を#000000、フォントサイズを13pxにして下さい。

以下にテキストエリアを用意していますので、必要なところに書き込んだ後、コピーしてメモ帳に貼り付け、test1.html と名前をつけて保存してから、ブラウザで見て、同じように出来ているか確認してください。

解答

ページトップへ

2. CSS の要素とセレクタ

  タグにどのようにしてスタイルを指定するのかの基本はわかってもらえたと思います。しかし、例えば、<div>にスタイルを指定してしまうと、<body>中の全ての<div>に効果が現れてしまい、困ると言うような時もあります。
  そんな場合、タグにクラス名をつけることで解決します。よく似た方法で、ID をつける方法もありますが、クラスはスタイルの集合につける名前で、複数のタグに同じクラス名を指定することが可能ですが、ID はそれぞれの要素につける名前で、ひとつのドキュメント中に、複数の要素が同じ ID を持つことは許されません。
  ですから、良く使うであろうクラスについて説明します。

<head>
<style type="text/css">

</style>
</head>
<body>
<h1 class="oha">おはようございます。</h1>
今日もいい天気ですね。
<h1 class="bye">さようなら</h1>
</body>

上の例ですと、h1 に、oha と言うクラスと、bye と言うクラスをつけて使い分けています。
ではこれがどのように効果が現れるかと言うと。

おはようございます。

今日もいい天気ですね。

さようなら

となります。クラス名をつけることで、一種類のタグに色々な効果を指定することが出来ます。しかも、指定したクラスを後で修正する時、変更するのは<head>～</head>間だけでよいので便利です。

● 実際に指定してみる

では実際に何を指定するかですが、たくさんありすぎて全てをここに書くことは出来ません。よく使いそうなものだけを列挙してみましょう。
より詳しくは、参考サイトのリファレンスなどをご覧下さい。

フォントに関するもの

font-size; 大きさ。px,mm,pt,em などで指定。
font-weight: 太さ。normal（規定値）, bold などで指定
font-color: 色。色コードなどで指定。
font-style: normal（規定値：通常）, italic（イタリック）, oblique（斜め）のいずれかを指定。
font-family: フォントを指定。MS ゴシックなどで指定。

背景に関するもの

background-color: 背景色です。カラーコードなどで指定します。
background-image: 背景画像です。url()で指定します。詳しくは次項参照。
background-repeat: 画像の並べ方。詳しくは次項参照
background-attachment: スクロール時の背景の動作。詳しくは次項参照。
background-position: 背景の位置を指定する。詳しくは次項参照。

テキストに関するもの

text-indent: テキストの 1 行目のインデント（字下げ）の幅を指定。
text-align: テキストの横方向の配置。
text-decoration: テキストの装飾。下線とか、打ち消し線とか。

枠線、外側の余白、内側の余白

border: 枠線。スタイル色幅のように指定する。
margin: 外側の余白。px,em,mm などで指定する。
padding: 内側の余白。px,em,mm などで指定する。

その他、使いそうなもの

vertical-align: 縦方向の位置。
list-style-type: <li>で表示されるマーカーの形を指定する。
width: 幅、px,mm,% などで指定。
height: 高さ、px,mm,% などで指定。

指定項目がたくさんありすぎて、とても全部ここでは書けないので、とほほさんのリファレンスを参考にして下さい。

実際に上記項目を指定して見ましょう。

<head>
<style type="text/css">

</style>
</head>
<body>
<div>おはようございます。
<p>今日もいい天気ですね。<br>
さようなら</p><br>
</div>
</body>

これはこのようになります。

おはようございます

今日もいい天気ですね。
さようなら

同じ効果を、複数のタグにつける場合は、以下のように書きます。

<head>
<style type="text/css">

</style>
</head>
<body>
<div>おはようございます。</div><br>
<p>今日もいい天気ですね。<br>
さようなら</p><br>
</body>

これはこのようになります。

おはようございます

今日もいい天気ですね。
さようなら

同じクラス名を複数のタグに使いたいときは、以下のようにします。

<head>
<style type="text/css">

</style>
</head>
<body>
<h1 class="oha">おはようございます。</h1>
<span class="oha">今日</span>もいい<span class="bye">天気ですね。</span>
<h1 class="bye">さようなら</h1>
</body>

上の例ですと、h1 に、oha と言うクラスと、bye と言うクラスをつけて使い分けています。
ではこれがどのように効果が現れるかと言うと。

おはようございます。

今日もいい天気ですね。

さようなら

このように、まとめて指定することも出来ます。

[1] 各タグに個別にスタイルを指定したい時は、クラス名をつけて指定する。

div.menu {color:red;
background-color:#ffffcc;}
div.body {color:#ffffff;
background-color:#000000;}

としておいて、

のようにする。

[2] 複数のタグに同じ効果をつけるときは、カンマで区切る。

div,p {color:red;
background-color:#ffffcc;}

としておいて、

のようにする。

[3] 同じクラス名を、色々なタグに使いたいときは、.クラス名で指定する。

.menu {color:blue;}
.body {color:green;}

としておいて、

のようにする。

ページトップへ

3. サンプル

サンプルソースを載せておきます。

<html>
<head>
<title>色々</title>
<style type="text/css">

</style>
</head>
<body>
<div align="center">
<h1>色々</h1><br>
<div class="menu">
<a href="css.html" target="_blank">CSS 解説ページ</a><br><br>
<a href="kai.html" target="_blank">問題の答え</a></div><br><br>
<div class="body">
<h2>色々豆知識</h2>
  ブロックを中央寄せにして、そのブロックの中は文字を左寄せにしたい。<br><br>
<div align="center"><br>
<div class="left"><br>
  （CSS で、div.left {text-align:left;}としておくこと。）<br>
文章<br>
文章<br>
</div></div><br><br>
とすれば、たいていうまく行きます。<br><br>
<div align="right">
<div class="kolam">たまーに失敗します。理由は不明。あと、IEとネスケで見え方が違う事もありますので、CSS を使う場合、両方で確認した方がいいでしょう。</div>
</div> <br><br>
  また、スクロールバーの色はIEでは変えられますが、ネスケでは変えられませんのであしからず。

</div>
</body>
</html>

上記ソースをブラウザで表示させた物はこちらに。

では、以下のような文章を CSS で指定して作ってみてください。

テスト 2

CSSについて

CSSの基本を書いてみました。

1:aaa
2:bbb
3:ccc

メニューからお好きなコースを選んで下さい。

見出しは、色を#0000ff、フォントサイズを18pxで文章を中央寄せに。
本文は、色を#000000、フォントサイズを13pxに。
メニュー部分は、実線で2pxで#ff0000の枠線をつけ、内側の余白を5px、外側の余白を2pxにし、幅300px、太文字、文章は左寄せにし、背景色を#ffffccにして下さい。

以下にテキストエリアを用意していますので、必要なところに書き込んだ後、コピーしてメモ帳に貼り付け、test2.html と名前をつけて保存してから、ブラウザで見て、同じように出来ているか確認してください。

解答

ページトップへ

4. 参考サイト

より詳細に解説されているサイトの紹介です。

ページトップへ

初級 CSS 解説｛初心者向けの、ごく簡単な、スタイルシート の使い方の説明です。｝

おはようございます。

テスト 1

新年あけましておめでとうございます

おはようございます。

さようなら

● 実際に指定してみる

おはようございます。

さようなら

テスト 2

CSSについて

初級 CSS 解説｛初心者向けの、ごく簡単な、スタイルシートの使い方の説明です。｝