トップページの中の セレクタの中の タイプセレクタ (E)

タイプセレクタ (E)

  • 最終更新:2009年7月 7日 13:22

タイプセレクタはCSS1で定義された、単純セレクタの一つです。
このタイプセレクタは文書ツリー内の全要素に適用させる事ができます。個別性も「1」とユニバーサルセレクタに続いて弱いため、各要素に基本となるスタイルを適用させ、ページによって子孫セレクタやクラスセレクタなどで上書きしてくといった使い方が多くなります。

対応ブラウザ
  • IE6対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

タイプセレクタのサンプル

h1 {
  font-size: 140%;
  color: #333;
  padding-bottom: 5px;
  border-bottom: 5px solid #ccc;
}

p {
  margin: 0 0 15px;
}

このように、各要素毎にそれぞれのスタイルを適用させる事ができます。
この他に、ユニバーサルセレクタのページで触れていた
各要素それぞれに必要な指定を予めおこなっておく方法が以下のスタイルになります。

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td {
  margin: 0;
  padding: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
  font-style: normal;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption,th {
  text-align: left;
}
q:before,q:after {
  content: '';
}
object,
embed {
  vertical-align: top;
}
hr,legend {
  display: none;
}
h1,h2,h3,h4,h5,h6 {
  font-size: 100%;
}
img,abbr,acronym,fieldset {
  border: 0;
}
li {
  list-style-type: none;
}

これは、ボクがdefault.cssとして使っているCSSファイルの中の一部ですが、リセットCSSなどと呼ばれていたりします。
恐らく制作会社によって予め使用するリセットCSSは決まっていたりすると思うので、自分なりに使いやすいスタイルを適用させたファイルを用意しておくと良いと思います。

また、リセットCSSに関してはThe Yahoo! User Interface Library (YUI)にて公開されていてすごい話題になってました。

YUIのリセットCSSをベースに色々やってみるのも良いかもしれません。

  • CSS HappyLife
  • underHat
著書(全て共著)

このページの上部へ