 |
 |
 |
 |
||||||||||||||||||||||||||||||||||||||||
| First Creation : 2006/05/24 Last Update : 2006/05/25 |
|||||||||||||||||||||||||||||||||||||||||||
| Top > Menu - Technical Notes > このサイトのスタイルシート | |||||||||||||||||||||||||||||||||||||||||||
CSS 実験室 Ver. 3.0h2h3h4div.intro 中の各種タイトル 文書 と デザインを分離する。それがスタイルシート（CSS）。 div クラスインデントdiv class="indent"インデントしてます。20px。 次に <br> で改行してみます。
div class="indent2"ちょっと大きめにインデントしてます。40px。 div class="indent3"なかなか大きくインデントしてます。60px。 div class="indent20"ちょっと特殊なインデントをしてます。20%。 ところで、そろそろ div class="indent20" と書くのが面倒になったので、今後は div.indent20 のように省略します。 div.blankこのすぐ上↑に、単独で div.blank が入っています。20px。 使用例：<div class="blank"></div> このように、単独で div.blank を用いることで、縦に間隔を取ることができます。見出し等の後に文章を書き、その次の見出しの間に div.blank を置くと見栄えがします。こんな↓かんじで。 div.blank2↓すぐ下に入ってます。40px。 div.blank3↓すぐ下に入ってます。60px。 見出しp.title1ああああ p.title2ああああ p.title3ああああ 強調・注意などem & strongem を使うと文字を強調することができます。 さらに強調したい場合は strong を使うともっと強調することができます。 h2 見出しh3 testh4 testh5 testh6 testh6.title1p test test test test test test test test test test test test test test test test test test test test test test test test test test test test test p test test test test test test test test test test test test test test test test test test test test test test test test test test test test test p test test test test test test test test test test test test test test test test test test test test test test test test test test test test test h6.title2p test test test test test test test test test test test test test test test test test test test test test test test test test test test test test p test test test test test test test test test test test test test test test test test test test test test test test test test test test test test p test test test test test test test test test test test test test test test test test test test test test test test test test test test test test h6.title3p test test test test test test test test test test test test test test test test test test test test test test test test test test test test test p test test test test test test test test test test test test test test test test test test test test test test test test test test test test test p test test test test test test test test test test test test test test test test test test test test test test test test test test test test test ※ p.kome コレをやると頭出しインデントするんだ。ほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらほらオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラ オラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラオラ 継承についてテーブルの背景色を例にテーブルに限らず背景色を指定する時は、タグに対してではなく、新たにクラスを作って指定した方がいい。なぜならタグに指定した背景色は、継承されたクラスで無効にすることができないからだ。 具体的に書くと次のような内容となる。 1. 例えば th の文字に #FF0000、背景に #FFFFFF を指定したとしよう。th {
color: #FF0000;
backgroung-color: #FFFFFF;
}
2. 貴方は th の新たなクラス th.title1 を作り、フォントサイズを 18px、フォント色は th と同じ赤、背景を無色にしたいと考えた。body の色、もしくは壁紙を透過させたいと思ったからだ。 th.title1 に font-size と color だけ設定し、background-color を設定しなければ無色になるのだろうか？ th.title1 {
font-size: 18px;
color: #FF0000;
}
プレビューするとどうなる？ 3. 結論th.title1 は、フォントサイズ 18px、フォント色 #FF0000 になるものの、背景色は無色にならず #FFFFFF になってしまう。 CSS (Cascading Style Syyt) の名前が示す通り、th.title1 のクラスは、それ以前に定義された th タグの設定を継承してしまったためである。 つまり、th.title1 は、
フォントカラーは重複した設定になるので、より美しく th {
color: #FF0000;
backgroung-color: #FFFFFF;
}
th.title1 {
font-size: 18px;
}
th.title1 は、これだけでいい。 th.title1 に対して、背景色を #AAAAAA のように設定し直すことは可能なのだが、取り去ることはできない。（方法があるのか？） なので、h1 td th p などのタグそのものには、背景色等を指定しない方が良いと思われる。背景色を変えたい場合は、新しいクラスを作成し、クラスに背景色を指定すると良い CSS になる。 tabletable.normal の th と td
ただの table だと、線が出ない
テーブルの中と外の空白中のリスト
外の（テーブルを使わない）リストp 単なる段落です。比較用です。
p 単なる段落です。比較用です。
|
|||||||||||||||||||||||||||||||||||||||||||
  |
|||||||||||||||||||||||||||||||||||||||||||
 |
|||||||||||||||||||||||||||||||||||||||||||