CSSの基礎知識
CSSは、HTMLをブラウザで見る際に、要素の表示方法を指定出来るものです。HTMLには文章構造と意味付けに専念してもらい、CSSが表示方法を担当する事で、非常に合理的になりました。
また、ユーザーエージェント（主にWebブラウザ）、WEBサイト制作者、ユーザがそれぞれ定義した CSS のもたらす効果を重ね合わせ（カスケード）ることが出来るのも特徴です。これによって、あらゆる人が自分の最も利用しやすい環境を自由に選べるようになります。CSS という新しい領域を覚えるのは大変かもしれませんが、長い目で見ると、Web制作がとても楽になる便利なもです。是非この機会に学んで行きましょう！
CSSの記述方法
CSSの記述方法は、一定の法則があるので一度慣れてしまえばとても簡単なものです。下記の簡単な例で解説します。
基本的この形を覚えておけばOKです！
「何の」 「どの部分を」 「どれくらい」変えるのかを書いてあげれば良いのです。
(例)複数指定がある場合
h1 {
clor: #ff0000;
font-size: large;
border: 1px solid #666666;
background-color: #ffff99;
}
１つのプロパティの値の指定が終了した後に【;】(セミコロン)を忘れずに入力しましょう。
CSSの記述方法と読み込み
CSSはヘッダーに直接記述する方法と、外部ファイルを読み込ませる方法があります。また、タグに直接付け足す事も出来ます。
ヘッダーに直接記述する場合
※バグ防止のためstyle内をコメントアウトします
<head>
<style type="text/css">
<!--
body {
color: #333333;
font-size: small;
background-color: #ffffff;
}
-->
</style>
</head>
外部ファイルを読み込む場合
<head>
<link href="読み込ませたいファイル名.css" rel="stylesheet" type="text/css" />
</head>
タグに直接書き込む場合
<h1 style=" color: #ff0000; text-align: center;">
CSSの特徴
CSSにはいくつかの特徴があります。これらを理解すれば、作業効率が格段に上がるはずです。
属性が継承される
ある要素の中に他の要素を入れると、親要素で指定した属性が子要素にも引き継がれます。
※ブラウザの仕様により例外アリ
<div style=" color: #ff0000;">
テキスト<span style="font-weight: bold;">テキスト</span>テキスト
</div>
この場合、spanでくくられた『テキスト』は赤の太字になります。
グルーピングが出来る
カンマ（,）を用いて、複数の要素の属性を一度に指定することができます。
h1, h2 { color: #ff0000; font-size: large;}
id名、class名で指定出来る
同じ種類のタグに、違うスタイルを指定したい場合には、名前を付けてそれぞれ別のスタイルを指定する事が出来ます。複数のページを同じ名前で管理したい場合などにも便利です。
idは『 #id名 』、classは『 .class名 』です。≫詳細はこちらで解説
#content { color: #ff0000; font-size: x-large;}
.sample { color: #0000aa; font-size: large;}
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
<p id="content">
id指定は1ページに一度だけ使用可能
</p>
<p class="sample">
class指定は1ページに複数使用可能
</p>
優先順位を指定する
『!important』を指定すると、通常指定するよりも優先度が強くなります。
h1 { color: #ff0000 !important;}
