- 1. CSS の基本形
- CSS の基本的な指定の仕方を説明します。尚、ここでは外部スタイルシートについては述べません。又、タグ中に直接指定する方法も取り上げません。<head>〜</head> 間に指定する方法のみ説明します。
<head>
<style type="text/css">
<!--
body {...}
h1 {...}
-->
</style>
</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">
<!--
body {color:red;}
h1 {color:blue;
text-align:center;}
-->
</style>
</head>
<body>
<h1>おはようございます。</h1>
今日もいい天気ですね。
</body>
と書いた場合、以下のようになります。
おはようございます。
今日もいい天気ですね。
詳しい指定の仕方などは次項に書きます。
基本的な書き方は以上です。注意点としては</style>を忘れると画面が真っ白になってしまう所です。<!--〜-->で囲まれた部分はコメントアウトですので、ソースには表示されますが、HTML で見た時には表示されません。
CSS に対応していないブラウザで見た人のために、こうしておきます。
基本は
<head>
<style type="text/css">
<!--
body {...}
h1 {...}
-->
</style>
</head>
</style>を忘れずに。
では、以下のような文章を CSS で指定して作ってみてください。
,
テスト 1
新年あけましておめでとうございます
今年も一年、よろしくお願いします。
見出しは、色を#0000ff、フォントサイズを18pxに。
本文は、色を#000000、フォントサイズを13pxにして下さい。
以下にテキストエリアを用意していますので、必要なところに書き込んだ後、コピーしてメモ帳に貼り付け、test1.html と名前をつけて保存してから、ブラウザで見て、同じように出来ているか確認してください。
- 2. CSS の要素とセレクタ
- タグにどのようにしてスタイルを指定するのかの基本はわかってもらえたと思います。しかし、例えば、<div>にスタイルを指定してしまうと、<body>中の全ての<div>に効果が現れてしまい、困ると言うような時もあります。
そんな場合、タグにクラス名をつけることで解決します。よく似た方法で、ID をつける方法もありますが、クラスはスタイルの集合につける名前で、複数のタグに同じクラス名を指定することが可能ですが、ID はそれぞれの要素につける名前で、ひとつのドキュメント中に、複数の要素が同じ ID を持つことは許されません。
ですから、良く使うであろうクラスについて説明します。
<head>
<style type="text/css">
<!--
body {color:red;}
h1.oha {color:blue;
text-align:center;}
h1.bye {color:green;
text-align:right;}
-->
</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">
<!--
body {color:red;}
div {color:blue;
text-align:center;
background-color:#ffff00;}
p {width:350px;
border:solid 2px #ff0000;
padding:1em;
color:#ffffff;
background-color:#444444;
text-align:left;
margin:10px;}
-->
</style>
</head>
<body>
<div>おはようございます。
<p>今日もいい天気ですね。<br>
さようなら</p><br>
</div>
</body>
これはこのようになります。
おはようございます
今日もいい天気ですね。
さようなら
同じ効果を、複数のタグにつける場合は、以下のように書きます。
<head>
<style type="text/css">
<!--
body {color:red;}
div,p {color:blue;
text-align:center;
background-color:#ffff00;}
-->
</style>
</head>
<body>
<div>おはようございます。</div><br>
<p>今日もいい天気ですね。<br>
さようなら</p><br>
</body>
これはこのようになります。
おはようございます
今日もいい天気ですね。
さようなら
同じクラス名を複数のタグに使いたいときは、以下のようにします。
<head>
<style type="text/css">
<!--
body {color:red;}
.oha {color:blue;}
.bye {color:green;}
-->
</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;}
としておいて、
<div class="menu">メニュー</div>
<div class="body">本文</div>
のようにする。
[2] 複数のタグに同じ効果をつけるときは、カンマで区切る。
div,p {color:red;
background-color:#ffffcc;}
としておいて、
<div>メニュー</div>
<p>本文</p>
のようにする。
[3] 同じクラス名を、色々なタグに使いたいときは、.クラス名で指定する。
.menu {color:blue;}
.body {color:green;}
としておいて、
<h1 class="menu">メニュー</h1>
<div class="body">本文</div>
<h2 class="menu">メニュー</h2>
<p class="body">本文</p>
のようにする。
- 3. サンプル
- サンプルソースを載せておきます。
<html>
<head>
<title>色々</title>
<style type="text/css">
<!--
body {background-color:#ffffcc;
color:#0000ff;
font-size:1em;
font-weight:bold;
line-height:150%;
margin:1em;
padding:10px;}
div.menu {width:300px;
border:solid 2px #ff0000;
text-align:left;
font-size:150%;
font-weight:bold;
padding:15px;
background-color:#005599;
color:#000000;}
div.body {color:#000099;
text-align:left;}
a:link {color:#ff0000;}
a:visited {color:#88ffff;}
a:hover {color:#ffffff;
background-color:#000000;
padding:2px;
text-decoration:none;}
a:active {color:#008888;}
h1,h2 {text-align:center;}
.kolam {background-color:#ffffff;
color:#000000;
font-size:12px;
padding:1em;
text-align:left;
border:double 6px #000000;
width:200px;}
-->
</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. 参考サイト
- より詳細に解説されているサイトの紹介です。