[CSS]よく利用するスタイルシートの指定 -General Style

Post on:2007年3月22日

General Style -テキストの装飾関連

テキストの装飾としては、アクセントカラー、エラーカラー、大文字・小文字に関するスタイルシートを設定してます。

.accent1{
  color:#006633;
}
.error1{
  color:#ff0000;
}
.trans1{
  text-transform:uppercase;
}
.trans2{
  text-transform:lowercase;
}
.trans3{
  text-transform:capitalize;
}

カラーの指定は、サイトによって異なります。
カラースキームが多い場合は、.accent2, .accent3 と増えます。

主に、.trans1を使用することが多いです。
音声ブラウザなどを考慮した場合、データを大文字のみで記述すると支障があるためです。

General Style -行揃え・フロート関連

行揃え、フロート関連は、単に行揃えとフロートを設定しているのみです。

.align1{
  text-align:left;
}
.align2{
  text-align:right;
}
.align3{
  text-align:center;
}

.float1{
  display:block;
  float:left;
}
.float2{
  display:block;
  float:right;
}

行揃えの指定は、ブロック要素に対してのみ有効なので、使用には注意します。

フロートは、IEなどでマージンが倍になってしまうバグがありますが、このGeneral Styleではその対処は行いません。

General Style -ブロック関連

ブロック関連は、主にimgとdivに使用する指定です。

.imgFix{
  display:block;
  font-size:0%;
  line-height:0%;
}
/**/
.imgFix{
  zoom:1;/* for hasLayout */
}
/**/

.clrFix:after{
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
.clrFix{
  overflow:hidden;
}
/**/
* html .clrFix{
  zoom:1;/* for hasLayout */
  overflow:visible;
}
/**/

一部の指定は「スタイルの初期化」と重複していますが、General Style単体でも支障の無いように重複させています。

General Style -アシスト関連

アシスト関連には、音声ブラウザと印刷用の指定を行っています。

.assist1{/* for voice */
  position:absolute;
  top:-10000px;
  left:0px;
  width:600px;
}
.assist2{/* for print */
  display:none;
}

このアシスト用のクラスは全く使用しない場合もありますが、使用しない場合でも特に支障はないので記述しています。
要件によっては、記述が大きく変更する場合もあります。

General Style -リスト関連

リスト関連のみ、命名規則が少し異なります。
他のものは数字を使用し、そのもの自体を現していませんが、リストのみ命名がそれを現してします。
リストの場合は、後で変更するといった場合が今までに無く、またその都度どのマークを使用するかを判断した方が効率が高いので、このようにしています。

.listStyleDisc{
  padding:0 0 0 2.5em;
  list-style:disc;
}
.listStyleCircle{
  padding:0 0 0 2.5em;
  list-style:circle;
}
.listStyleDecimal{
  padding:0 0 0 2.5em;
  list-style:decimal;
}
.listStyleDisc li,
.listStyleCircle li,
.listStyleDecimal li{
  margin-top:0.4em;
}