2011　
05
12

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

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

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

1. 全般的なこと

  1. 複数のクラスを指定する
  2. IE用簡単CSSハック
  3. iPhone用CSSハック
  4. borderを一括で指定する
  5. backgroundを一括で指定する
  6. fontを一括で指定する
  7. padding、marginを一括で指定する

2. 文章に関すること

  1. 最初の行にだけスタイルを適用する
  2. 最初に現れる文字にだけスタイルを適用する
  3. 中の要素に対してスタイルを適用する
  4. 文章内の最初の文字を1文字下げる
  5. 2行目以降の文字を1文字下げる
  6. 長い単語やURLを途中で折り返す
  7. 長い単語やURLの表示を途中でやめる
  8. 単語を途中で折り返さない

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

  1. divを中央揃えにする
  2. 上下中央揃えに表示する
  3. 高さの違うボックスをきれいにそろえる
  4. 最低限表示する高さを指定
  5. hrに背景画像を使う
  6. 画像の下に文字を回り込ませない
  7. リストの一番上の線を消す
  8. リストをボタン化する
  9. ページ送りナビゲーション風なリスト
  10. HタグとPタグを横並びに表示する

4. CSS3のIE対策

  1. 要素を回転させるtransform
  2. ボックスに影をつけるbox-shadow
  3. 要素の透明度を指定するopacity
  4. RGBAカラーモデルで色を指定する
  5. CSS3 PIEでIEをCSS3に対応させる

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

  1. IE6はborder、padding使用時のボックス幅がおかしい
  2. IE6はfloatで回り込むとmarginが2倍になってしまう

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

1. 全般的なこと

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

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

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

2. IE用簡単CSSハック

CSSハックは使わないに越したことはないですが、IEに関してはなかなか新バージョンへの乗り換えも進まないし、ある程度仕方ない部分もありますね。
CSS
color: red; /* 全てのブラウザ */
color : green¥9; /* IE8 とそれ以下のバージョンに対応 */
*color : yellow; /* IE7 とそれ以下のバージョンに対応 */
_color : orange; /* IE6　に対応 */

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

3. iPhone用CSSハック

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

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

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

【追記】androidには適用されないとの情報をいただきました。ありがとうございました。
sample
iPhoneで見ると赤くなります。

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

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

4. borderを一括で指定する

CSS
border:1px solid #336699;

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

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

5. backgroundを一括で指定する

CSS
background: #ffffff url(bg.png) repeat-y right top fixed;
以下の順で一括して指定しています。
  • background-color
  • background-image: url
  • background-repeat
  • background-position
  • background-attachment
必要のない指定は省略することもできて、並べる順番も特に決まりはありません。

6. fontを一括で指定する

CSS
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. 最初の行にだけスタイルを適用する

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

:first-lineを指定することで、最初の行にだけ適応されます。今回の場合1行目だけ赤い太字になり、2行目からは元に戻ります。

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

雑誌の記事っぽくなります。wikipediaのトップページみたいな感じです。
CSS
p:first-letter{
  font-weight:bold;
  font-size:32px;
}
sample

最初の文字にだけ適用されます。

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

下のようにCSSを指定すると、pタグではなくその中に入ったタグ（今回の場合bタグ）全てにに適用されます。
CSS
p *{color:green;}
html
<p>Pタグには適応されず、<b>中にあるタグ全てに適用されます。</b></p>
sample

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

ちなみに、*（アスタリスク）だけにすると全てのタグに適用されます。

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

日本語の文章は最初の一文字を開けることが多いですが、そんな時スペースでっていうのもなんだかな〜という方に。
CSS
text-indent: 1em;
sample

このように最初の一文字が下がります。空白で下げるのは煩わしい、かっこ悪いと思われる方にはいいと思います。

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

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

※このように2行目以降が1文字下がります。注意書きや箇条書きっぽくするときなんかに便利かもしれないです。

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

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

aaaaaaa@aaaaaaaa_aaaaaaaaaaa.aaaaaaaaaa/aaaaaaaaaaaaaaaaa

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

CSS
word-wrap: break-word;
sample

aaaaaaa@aaaaaaaa_aaaaaaaaaaa.aaaaaaaaaa/aaaaaaaaaaaaaaaaa

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

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

先ほどの同じ例で、今度ははみ出た部分を省略して「...」としてみます。
CSS
.ellipsis{
width: 300px;
white-spce: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
sample

aaaaaaa@aaaaaaaa_aaaaaaaaaaa.aaaaaaaaaa/aaaaaaaaaaaaaaaaa

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

タグクラウドなんかで、タグ名が途中で折り返して見にくいという場合はこちらを。
CSS CSS3 Javascript Google jQuery PHP Yahoo wordpress ドロップダウン メニュー テンプレート まとめ ブログ ソーシャルブックマーク ブラウザ ロゴ スライドショー

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

CSS
div span{
white-space: nowrap;
}
sample
CSS CSS3 Javascript Google jQuery PHP Yahoo wordpress ドロップダウン メニュー テンプレート まとめ ブログ ソーシャルブックマーク ブラウザ ロゴ スライドショー

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

1. divを中央揃えにする

最近はモニターもワイドなものが多くて幅も色々なので、ウェブサイトは真ん中に表示した方がいいですね。
CSS
#container{
  width: 200px;
  margin: 0 auto;
}
このようにdivが真ん中に表示されます。
以前text-align:centerで真ん中によらないと悩んだこともありました。

2. 上下中央揃えにする

上下中央揃えってIEのおかげで意外と面倒です。IE以外でしたら単純にdisplay:table-cell;を使えばいいわけですので、ほとんどIE用の記述（オレンジの部分）となってます。
CSS
div.vertical div{
  display:table-cell;
  vertical-align:middle;
  display:inline¥9;
  zoom:1¥9;
}
.vertical2{
height:100px;
}
htmlもIEのおかげで面倒になってます。
HTML
<div class="vertical">
  <div>上下真ん中に表示されます</div>
  <div class="vertical2"></div>
</div>
sample
上下真ん中に表示されます

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

floatで横に並べた高さが違うボックスをきれいにそろえます。
このように違う高さのボックスをならべると
もちろん下の位置がずれてきます。なんかかっこ悪いですよね。このような場合の対応法をこれから紹介します。
CSS
.box{
  overflow:hidden;
}
.contents1{
  float:left;
  padding-bottom:10000px;
  margin-bottom:-10000px;
}

.contents2{
  float:left;
  padding-bottom:10000px;
  margin-bottom:-10000px;
}
html
<div class="box">
  <div class="contents1">内容</div>
  <div class="contents2">内容</div>
</div>
このように違う高さのボックスも揃います
ちょっと強引な感じですがきれいにそろいます。両方のボックスを長くして、親のボックスからはみ出た部分は表示しないという感じです。（説明べたですいません。。）

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

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

divなどで最低限表示する高さを指定します。
CSS
.min{
  min-height:100px;
  height:auto !important;
  height:100px;
}

下2行はIE6対策です。

sample
このように中のコンテンツが少ない場合、高さが100pxになり、それ以下にはなりません。
sample
このように
中のコンテンツが
min-height
で指定した長さより
長い場合は、
中に
あわせて
divも
長く
なります。

5. hrに背景画像を使う

仕切り線を表すhrに背景画像を使うとちょっとおしゃれな感じになります。
CSS
hr {
  background-image: url(back.png);
  height: 15px;
  border:0;
}
sample
背景画像に「」こんな画像を使ってます。

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

kotekumo-f02.gif

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

CSS
.content {
  padding: 0 0 0 180px;
  position: relative;
}
.content img {
  position: absolute;
  left: 10px;
  top: 10px;
}
html
<div class="content">
  <img src=".gif" alt="image" border="0" width="150" height="80" />
  <p>ここに文章を入れます</p>
</div>
sample
kotekumo-f02.gif

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

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

borderを使うとリストに仕切り線を入れることができます。
CSS
li {
  padding: 3px;
  border-top: 1px solid #336699;
}
  • メニュー 1
  • メニュー 2
  • メニュー 3
  • メニュー 4
  • メニュー 5

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

CSS
ul {
  _zoom: 1;
  overflow: hidden;
}
ul li {
  margin-top: -1px;
  border-top: 1px solid #336699;
}
sample
  • メニュー 1
  • メニュー 2
  • メニュー 3
  • メニュー 4
  • メニュー 5

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

リンクをボタンのようにします。このブログでもサイドバーで使っています。先ほどの上の線を消すものと組み合わせるといい感じになります。
CSS
#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;
}
html
<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>
sample

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

先ほどと似ていますが display:inline-block; を使うことで、ヤフーで検索した際のページ番号のようなものが作れます。
CSS
#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;
}
html
<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>
sample

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

記事のタイトル(2011.4.1)

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

記事のタイトル

(2011.4.1)

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

CSS
div h4, div p {
  display: inline;
}
html
<div>
  <h4>記事のタイトル</h4>
  <p>(2011.4.1)</p>
</div>
sample

記事のタイトル

(2011.4.1)

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

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

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

1. 要素を回転させるtransform

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

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

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

sample
このように要素が丸ごと回転します。

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

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

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

CSS
.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が幅となっています。

sample
このようにボックスに影がつきます。

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

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

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

このように背景が半透明になります。
数値は赤字の方が 0〜1
紫の方がIE用で 0〜100　まで指定できます。
ともに数値が小さいほど透明になります。

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

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

CSS
.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()はグラデーションとして使うものです。

sample
RGBAカラーモデルで背景を指定しています。

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

CSS3 PIE

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。ご参考になれば幸いです。
このエントリーをはてなブックマークに追加　 　 　
カテゴリ：スタイルシート トラックバック(0) コメント(0)
CSS CSS3 まとめ
この記事に付いているタグの最新記事一覧
loading...
トラックバック ぜひどうそ
トラックバックURL：
コメントもどうぞ












カテゴリー
タグ
月別アーカイブ
06月  05月  04月  03月  02月  01月  12月  11月  09月  07月  06月  05月  04月  03月  01月  09月  08月  07月  06月  05月  04月  03月  02月  04月  03月  02月  01月