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

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

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

1. 全般的なこと

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

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

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

2. IE用簡単CSSハック

CSSハックは使わないに越したことはないですが、IEに関してはなかなか新バージョンへの乗り換えも進まないし、ある程度仕方ない部分もありますね。

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

この場合、IE9だと赤に、IE8だと緑に、IE7だと黄色に、IE6だとオレンジになります。CSSハックはたくさんありますがこれだけでも結構使えると思います。

3. iPhone用CSSハック

iPhone用に一部レイアウトを変更したい場合などに。

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

androidでも使えるかは、端末を持っていないので不明。標準はwebkit系だと思うのでいけるかも。お分かりの方教えてください。

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

「行の高さ（line-height）」を指定する場合は、「サイズ（font-size）」の後にスラッシュ（ / ）を入れ、その後に記述します。

font-size、line-height、font-familyは順番を守る必要がありますが、その他順番は自由です。

7. padding、marginを一括で指定する

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

4つだと上、右、下、左。3つだと上、左右、下、2つだと、上下、左右、1つだと全部。って感じになります。

2. 文章に関すること

1. 最初の行にだけスタイルを適用する

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

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

雑誌の記事っぽくなります。wikipediaのトップページみたいな感じです。

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

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

下のようにCSSを指定すると、pタグではなくその中に入ったタグ（今回の場合bタグ）全てにに適用されます。

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;
}

以前text-align:centerで真ん中によらないと悩んだこともありました。

2. 上下中央揃えにする

上下中央揃えってIEのおかげで意外と面倒です。IE以外でしたら単純にdisplay:table-cell;を使えばいいわけですので、ほとんどIE用の記述（オレンジの部分）となってます。

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

htmlもIEのおかげで面倒になってます。

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

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

floatで横に並べた高さが違うボックスをきれいにそろえます。

.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. 最低限表示する高さを指定

divなどで最低限表示する高さを指定します。

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

下2行はIE6対策です。

5. hrに背景画像を使う

仕切り線を表す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>

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

borderを使うとリストに仕切り線を入れることができます。

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

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

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

8. リストをボタン化する

リンクをボタンのようにします。このブログでもサイドバーで使っています。先ほどの上の線を消すものと組み合わせるといい感じになります。

#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. ページ送りナビゲーション風なリスト

先ほどと似ていますが display:inline-block; を使うことで、ヤフーで検索した際のページ番号のようなものが作れます。

#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

IEはほとんどCSS3に対応していないので使いづらいのですが、IE独自のfilterを使って同じような効果を出せるものもありますので紹介します。

なお、filterは幅が成行きだと機能しないようですので、同時にwidthを指定する必要があります。

1. 要素を回転させるtransform

指定した要素を回転させることができます。

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

上からSafari、Chrome用、Firefox用、IE用となっています。上2つは回転する角度を、一番下は1から4の数字で90度ずつ回転します。

実際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);
}

上からSafari、Chrome用、Firefox用、IE用となっています。

上2つは右側へのずれ、左側へのずれ、影のぼかし具合、影の色という順番で指定します。下はcolorが影の色、directionが角度、strengthが幅となっています。

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に対応させる

CSS3非対応のIEでも対応することができます。利用できるプロパティは以下のとおりです。ジェネレータもあるので簡単に設置できます。

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image

show CSSにチェックを入れるとコードが表示されるわけですが、PIE.htcをダウンロードするのと、アップした場所の指定だけ気をつけてくださいね。

behavior: url(PIE.htc);

おまけ. IE6対策に関すること

IE6はCSSの解釈が間違えているわけですが、それなりにシェアもあり無視するかどうかは意見が分かれるところだと思います。

このブログは基本無視ですが、最低限カラム落ちだけは避けようということでCSSで2つだけ注意しています。

1. border、padding使用時のボックス幅がおかしい

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

このようにCSSを指定した場合、最新ブラウザではボックス全体の幅は112pxとなりますが、IE6では全体で100pxとなります。

【対策】　widthとpadding、borderを一緒に使わない

div#box1{
	width:100px;
}

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

このように分けて指定し、box1の中にbox2が入るようにすると解決です。

2. floatで回り込むとmarginが2倍になってしまう

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

このように指定した場合、通常は20pxですが、IE6の場合40pxとなります。

【対策】　marginとfloatを使うときはdisplay:inline;を忘れずに

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

IE6の場合margin-leftが40pxになりますが、display:inline;を追加すると通常通り20pxとなります。

floatでボックスを回りこませてmarginで間隔を開けるときはdisplay:inline;をお忘れなく。

---

分かっているつもりでも意外と奥が深いCSS。ご参考になれば幸いです。