まずはここからCSSの基本を押さえる!

html内直接指定、<style>タグ、外部CSS


まずはhtmlの中に直接CSSを指定する方法です。[例1<p><span style=""color:#ff0000;"">例文</span>です。</p>]各タグに続けて『style=""""』で中にcssを記載します。この記載方法だと修正は個別にする必要があるのでCSSのメリットはあまりありませんが、携帯サイトなどでまだ必要な指定方法なので覚えておいてください。 次は<head>内にCSSをまとめて記載する方法です。[例2【<head>】<style type=""text/css"">span{color:#ff0000;}</style> 【<body>】<p><span>例文</span>です。</p>]この場合はページ内で同じスタイルを繰り返し使用できます。 最後は外部CSSです。[例3【<head>】<link rel=""stylesheet"" href=""style.css"" />【<body>】<p><span>例文</span>です</p>【style.css】span{color:#f0000;}]CSSファイルへのリンクを張れば、どのhtmlでも同じCSSを使用できるのです。




自分だけのルールを設定できるclassとid


span {color:#ff0000;}のように、htmlのタグに対してCSSを指定する方法ももちろん便利ですが、ここではさらに『class』と『id』の説明をします。 [例【<head>】#subtitle{text-align:center;background-color:#00ff00;} .readtext{color:#ff0000;}【<body>】<h2 id=""subtitle"">タイトル</h2><p class=""readtext"">例文です。</p><p class=""readtext"">例文2です。</p>] CSS内ではclassは頭に『.(ドット)』、idは『#』をつけます。html内では.や#をつけないので注意してください。classもidも、独自の名前をつけてそこにCSSを指定できる、という点では共通しています。違いは『同じ名前のidはhtml内に1回だけ、classはhtml内で何度でも使える』と覚えておいてください。