• ツイート

基本的なことやちょっと変わった意外な使い方などCSSに関する小技テクニックをたくさん紹介していきます。知っていることも多いかと思いますが、新しい発見もあるかもしれませんので復習を兼ねてぜひご覧ください。

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

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

1. 全般的なこと

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

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

<p class="borderbackgroundpadding"></p>

2. IE用簡単CSSハック

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を外部ファイルにする場合は、以下のようにします。

<linkmedia="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 */

2. 文章に関すること

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

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

2. 上下中央揃えにする

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

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

#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

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となります。

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となります。

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

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

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