趣味でいろんな事やってます。今はテンプレートやカスタマイズ方法 HTML CSSについて書いています。『完成!』とか『クリア!』と達成感を味わいたい。 そんなこんなで へたのヨコズキ 趣味紹介ページです。
 
 
 
 
 
 
スポンサーサイト
 
 
【--/--/-- --:--】
 
 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


 賞金クリックランキング ブログランキング・にほんブログ村へ FC2ブログランキング 人気ブログランキング
 
 
 
▲TOP
 
 
 
 
ID、クラス、要素、にスタイルシート
 
 
【2006/03/10 12:41】
 
 
スタイルシートを指定していく上で 要素に指定したり ID名やクラス名を付けたブロックに指定していく方法があります。
例を出して説明しています。

ここまで書くのちょっと大変でした(;´▽`A``
自分で勉強する分は問題なかったのに 説明しようとすると格段に難しくなりますね
HTMLでのIDやクラス付け
クラス名やID名は HTMLでつけていきます。
(基本はHTMLでもスタイルシートでも英字は小文字です)
例)
<div id="ID名">~</div>
<span class="クラス名">~</div>
<table class="クラス名">~</table>

クラス名もID名も要素それぞれにつけることが出来ます。
<p>要素や<td>などにも付けていく事ができます。

IDやクラスにスタイル設定
クラス指定した部分にスタイルシートを設定していきます。
;(セミコロン)は区切るために必要なので 最後のスタイル設定の後ろには付きません

例)
#ID名 {
color:#666666;
font-size:12pt
}

.クラス名 {
color:#666666;
font-size:12pt
}

要素名(pとかdivとか){
color:#666666;
font-size:12pt
}

上の例)のように IDの場合は#を前につけて クラス名の場合は.(ピリオド)を前につけて指定します。

クラス名やID名と要素を組み合わせて指定することもできます。
例)
div#ID名 {
color:#666666;
font-size:12pt
}

p.クラス名 {
color:#666666;
font-size:12pt
}

別の要素やクラス、IDなどを 同じスタイル指定したい場合は
,(カンマ)で区切って指定します。
例)
p,div {
color:#666666;
font-size:12pt
}

p div, div#ID名, p.クラス名 {
color:#666666;
font-size:12pt
}

要素と要素を組み合わせる事もできます。
例)
div p {
color:#666666;
font-size:12pt
}

この場合 DIVの中あるPでブロック指定された部分にスタイルが設定されます。

他にも組み合わせ方があって あまり使った事ないですが紹介します。
コンテンツ量が凄く多いサイト様には有用かもしれません。
例)
div > p {
color:#666666;
font-size:12pt
}

この場合 DIVのすぐ中にPでブロック指定された部分にスタイルが設定されます。

例)
div + p {
color:#666666;
font-size:12pt
}

この場合 DIVのすぐ後にPでブロック指定された部分にスタイルが設定されます。

タグに直接スタイル設定する事も出来ます。
<要素(div,p,tdなど)style="指定したいスタイル">~</要素>
例)
<div style="color: red; background-color:#000000">~</div>

よくHTMLの小技を乗せているサイトさまのページで紹介しているタグにはこの指定方法が多く用いられているようです。
自分で判るようになれば まとめてページ全てを指定できますので
仕組みがわかれば簡単にできるようになりますよ(*´∇`*)
スポンサーサイト

 賞金クリックランキング ブログランキング・にほんブログ村へ FC2ブログランキング 人気ブログランキング
HP作成 >> コンピュータ
 
 
 
▲TOP
 
 
 
 
この記事に対するコメント
 
 
 
 
 
▲TOP

 
 
 
 
この記事に対するコメント投稿
 
 















 
 
 
▲TOP

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。