CSSの知識をもっと深める30+2の小技テクニック集

今回は数が多くなったので目次を作りました。クリックすると該当するところまでスクロールします。

ここからは各部分の解説となります。

1. 全般的なこと

1. 複数のクラスを指定する

クラスは空白で区切ると複数指定することができます。

<p class="border background padding"></p>

2. IE用簡単CSSハック

color: red; /* 全てのブラウザ */
color : green¥9; /* IE8 とそれ以下のバージョンに対応 */
*color : yellow; /* IE7 とそれ以下のバージョンに対応 */
_color : orange; /* IE6　に対応 */

@media screen and (max-device-width: 480px) {
 #iphone { color: red;  }
}

iPhone用にレイアウトを作り替えるときなどで、CSSを外部ファイルにする場合は、以下のようにします。

<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />

4. borderを一括で指定する

border:1px solid #336699;

top,right,bottom,leftすべて同じの線の場合は一括で指定できます。

また、線の太さ(border-width)、種類(border-style)、色(border-color)も一括で指定できます。

5. backgroundを一括で指定する

background: #ffffff url(bg.png) repeat-y right top fixed;

• background-color
• background-image: url
• background-repeat
• background-position
• background-attachment

6. fontを一括で指定する

font: italic normal bold 80%/150% "ＭＳ Ｐゴシック";

• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family

padding: 10px 5px 8px 3px; /* 上:10px 右:5px 下:8px 左:3px */
padding: 10px 5px 8px; /* 上:10px 右:5px 下:8px 左:5px */
padding: 10px 5px; /* 上:10px 右:5px 下:10px 左:5px */

p:first-line{
  font-weight:bold;
  color:red;
}

2. 最初に現れる文字にだけスタイルを適用する

p:first-letter{
  font-weight:bold;
  font-size:32px;
}

3. 中の要素に対してスタイルを適用する

p *{color:green;}

<p>Pタグには適応されず、<b>中にあるタグ全てに適用されます。</b></p>

4. 文章内の最初の文字を1文字下げる

text-indent: 1em;

5. 2行目以降の文字を1文字下げる

text-indent: -1em;
padding-left: 1em;

6. 長い単語やURLを途中で折り返す

英語の場合、空白やハイフンが現れるまで折り返さず枠をはみ出ても表示されちゃいます。

aaaaaaa@aaaaaaaa_aaaaaaaaaaa.aaaaaaaaaa/aaaaaaaaaaaaaaaaa

そんな場合以下のスタイルでうまいこと折り返してくれます。

word-wrap: break-word;

このブログではpreタグに使ってます。トラックバックのURLなんかもこれで解決かも。

7. 長い単語やURLの表示を途中でやめる

.ellipsis{
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}

8. 単語を途中で折り返さない

タグクラウドはフォントの大きさをspanタグで指定していることが多いので、以下のように指定してあげます。spanじゃない場合は変更してみてください。

div span{
white-space: nowrap;
}

3. レイアウトに関すること

1. divを中央揃えにする

#container{
  width: 200px;
  margin: 0 auto;
}

div.vertical div{
  display:table-cell;
  vertical-align:middle;
  display:inline¥9;
  zoom:1¥9;
}
.vertical2{
height:100px;
}

<div class="vertical">
  <div>上下真ん中に表示されます</div>
  <div class="vertical2"></div>
</div>

3. 高さの違うボックスをきれいにそろえる

.box{
  overflow:hidden;
}
.contents1{
  float:left;
  padding-bottom:10000px;
  margin-bottom:-10000px;
}

.contents2{
  float:left;
  padding-bottom:10000px;
  margin-bottom:-10000px;
}

<div class="box">
  <div class="contents1">内容</div>
  <div class="contents2">内容</div>
</div>

ちなみに10000pxという数字は特に意味のあるものではありません。

4. 最低限表示する高さを指定

.min{
  min-height:100px;
  height:auto !important;
  height:100px;
}

下2行はIE6対策です。

5. hrに背景画像を使う

hr {
  background-image: url(back.png);
  height: 15px;
  border:0;
}

6. 画像の下に文字を回り込ませない

このように画像の右側の文章を配置した場合、文章が長くなると画像の下に文章が回りこみます。
 これはこれでいいと言う人もいるかと思いますが、回り込ませない方法もありますので、紹介してみます。
 どのようにするかは次のとおりです。特に問題ないですかね。
文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。

.content {
  padding: 0 0 0 180px;
  position: relative;
}
.content img {
  position: absolute;
  left: 10px;
  top: 10px;
}

<div class="content">
  <img src=".gif" alt="image" border="0" width="150" height="80" />
  <p>ここに文章を入れます</p>
</div>

普段なら文章が長くなると、画像の下に文章が回りこみますが、この方法だと画像の下に文字が回りこまずに、そのまま下に続きます。
画像の大きさに合わせてpaddingを調整するといいと思います。
今回の場合画像が150pxのものを使い、文章は左から180pxあけて表示しています。
文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。

7. リストの一番上の線を消す

li {
  padding: 3px;
  border-top: 1px solid #336699;
}

けど、全体を枠で囲むときなんかは上の線がだぶってしまうので消した方がいいと思います。そんな時は以下のコードで一番上の線だけ消せちゃいます。

ul {
  _zoom: 1;
  overflow: hidden;
}
ul li {
  margin-top: -1px;
  border-top: 1px solid #336699;
}

#menu{
  list-style-type: none;
}
#menu a {
  background-color:#336699;
  color:#fff;
  display: block;
  width: 200px;
  padding:2px 10px;
}
#menu a:hover {
  background-color:#113366;
}

<ul id="menu">
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
</ul>

9. ページ送りナビゲーション風なリスト

#menu li{
  list-style-type: none;
  display: inline;
}
#menu a {
  text-decoration: none;
  background-color:#336699;
  color:#fff;
  display: inline-block;
  width: 20px;
  padding:2px 10px;
  text-align:center;
}
#menu a:hover {
  background-color:#002244;
}

<ul id="menu">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
</ul>

10. HタグとPタグを横並びに表示する

こんな感じでタイトルと日付を表示して、タイトルにだけHタグを付けてみます。

そのままだと日付が下の段にきてしまいます。

div h4, div p {
  display: inline;
}

<div>
  <h4>記事のタイトル</h4>
  <p>(2011.4.1)</p>
</div>

4. IEでも同じような効果が出せるなCSS3

.rotate {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

実際180度はあまり使いどころもないかもしれませんが、90度や270度はレイアウトのちょっとしたアクセントに使えそうです。

2. ボックスに影をつけるbox-shadow

指定するボックスに影をつけます。

.box-shadow {
  -moz-box-shadow: 2px 2px 3px #969696;
  -webkit-box-shadow: 2px 2px 3px #969696;
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
}

3. 要素の透明度を指定するopacity

指定したところの透明度を指定することができます。

.opacity {
  opacity:0.7;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

4. RGBAカラーモデルで色を指定する

RGBAカラーモデルは、RGBカラーモデルのred・green・blueに、alphaが加わったもので、alphaは色の透明度を表します。

.rgba{
  background: rgba(51, 102, 153, .4);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#88336699', endColorstr='#88336699');

IEでは#AARRGGBBの最初のAAは00（透明）～ ff（不透明）の範囲で透明度を指定し、RRGGBBは色を指定します。本来gradient()はグラデーションとして使うものです。

5. CSS3 PIEでIEをCSS3に対応させる

behavior: url(PIE.htc);

div#box{
 width:100px;
 border:1px solid black;
 padding:5px;
}

div#box1{
 width:100px;
}

div#box2{
 border:1px solid black;
 padding:5px;
}

div#box{
 float:right;
 margin-right:20px;
}

div#box{
 float:right;
 margin-right:20px;
 display:inline;
}