[CSS]スタイルシートをほんの少し軽量化する10のTips
Post on:2010年6月23日
sponsors
簡単に実践できるものから、ちょっと手間がかかるものまでスタイルシートをほんの少し軽量化する10+1のTipsを紹介します。
How to Micro-Optimize Your CSS
Tips 1：カラーコードを短く記述
プロパティにカラーを指定する際は、最も短い値を使用します。
軽量化前
カラーをRGB値で指定しています。
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> article { background-color: rgb(255,255,255); } </textarea> |
カラーを16進法で指定しています。
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> article { background-color: #ffffff; } </textarea> |
軽量化後
16進法を省略して記述します。
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> article { background-color: #fff; } </textarea> |
更に軽量化
使用するプロパティは「background」でも同じ効果が得られます。
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> article { background: #fff; } </textarea> |
Tips 2：重複しているプロパティをマージ
重複しているものをまとめます。
軽量化前
フォントまわりに同じ指定をしている箇所が複数あります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<textarea name="code" class="css" cols="60" rows="5"> #wrap p { font-family: Georgia, serif; font-weight: normal; line-height: 1.33em; font-size: 1.22em; } . . . p { font-family: Georgia, serif; font-weight: normal; line-height: 1.33em; font-size: 1.33em; } </textarea> |
軽量化後
同じ指定のものをマージします。
|
1 2 3 4 5 6 7 8 |
<textarea name="code" class="css" cols="60" rows="5"> p { font-family: Georgia, serif; font-weight: normal; line-height: 1.33em; font-size: 1.33em; } </textarea> |
Tips 3：可能な時はいつでもショートハンドを使用
フォントや背景やマージンやボーダーなど可能な時には、ショートハンドを使用します。
軽量化前
個々のプロパティを使用しています。
|
1 2 3 4 5 6 7 8 |
<textarea name="code" class="css" cols="60" rows="5"> p { font-family: Georgia, serif; font-weight: normal; line-height: 1.33em; font-size: 1.33em; } </textarea> |
軽量化後
複数のプロパティをまとめて、ショートハンドを使用します。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> p { font-family: normal 1.33em/1.33 Georgia, serif; } </textarea> |
Tips 4：同じ値を統合して指定
マージンで同じ値を指定するときは、統合して指定します。
軽量化前
左から順に、上・右・下・左の値になります。
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> margin: 10px 20px 10px 20px; </textarea> |
軽量化後
同じ値を統合します。左から順に、上下・左右の値になります。
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> margin: 10px 20px; </textarea> |
更に軽量化
四つが同じ値の場合は、更にまとめて指定します。
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> margin: 10px; </textarea> |
Tips 5：必要のない「0」を省略
数値に「0」を使用する時は、省略可能なものがあります。
軽量化前
二つのプロパティに省略可能な異なる「0」を使用しています。
|
1 2 3 4 |
<textarea name="code" class="css" cols="60" rows="5"> padding: 0.1em; margin: 10.0em; </textarea> |
軽量化後
省略可能な「0」を省略します。
|
1 2 3 4 |
<textarea name="code" class="css" cols="60" rows="5"> padding: .1em; margin: 10em; </textarea> |
Tips 6：「0」の単位を省略
プロパティの値に「0px」とする時、単位を省略します。
軽量化前
値に「0px」と指定しています。
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> padding: 0px; </textarea> |
軽量化後
値が「0」なので、「px」を省略します。
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> padding: 0; </textarea> |
Tips 7：最後のセミコロンを省略
最後のセミコロンを除くことができます。
軽量化前
最後の行にもセミコロンを記載しています。
|
1 2 3 4 5 6 7 8 |
<textarea name="code" class="css" cols="60" rows="5"> p { font-family: Georgia, serif; font-weight: normal; line-height: 1.33em; font-size: 1.33em; } </textarea> |
軽量化後
最後のセミコロンを省略します。
|
1 2 3 4 5 6 7 8 |
<textarea name="code" class="css" cols="60" rows="5"> p { font-family: Georgia, serif; font-weight: normal; line-height: 1.33em; font-size: 1.33em } </textarea> |
更に軽量化
ショートハンドの場合でもセミコロンを省略します。
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> p { font-family: normal 1.33em/1.33 Georgia, serif } </textarea> |
Tips 8：アップロード時にコメントを削除
CSSでコメントを使用することは有用で、整理されたスタイルシートを維持するのに必要不可欠なものです。しかしながら、そのコメントはブラウザにとっては100%無駄なものです。
サーバーにアップロードして運用するスタイルシートファイルからは、コメントは削除するようにします。
Tips 9：空白スペースを削除
可能な限り空白スペースを削除します。
軽量化前
よくある記述例です。
|
1 2 3 4 5 6 7 8 9 10 |
<textarea name="code" class="css" cols="60" rows="5"> body { font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; background-color: #333; text-align: center; margin: 0px auto; font-size: 62.5%; color: #FFF; } </textarea> |
軽量化後
不必要な空白スペースを削除します。
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> body{font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;text-align:center;background:#333;margin:0px auto;font-size:62.5%;color:#fff} </textarea> |
ショートハンドなどの必要な空白スペースは削除しないでください。
軽量化前
ショートハンドの記述例です。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> p { font-family:normal 1.33em/1.33 Georgia,serif; } </textarea> |
間違った軽量化
ショートハンドから空白スペースを削除すると、期待通りの表示をしません。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> p { font-family:normal1.33em/1.33Georgia,serif; } </textarea> |
Tips 10：見栄えをよくするフォーマットは無しで
スタイルシートを管理する上で見栄えをよくするために使用する[Tab]や空白スペースや改行を削除します。
軽量化前
[Tab]や空白スペースや改行を使用して、見栄えよく記述されています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<textarea name="code" class="css" cols="60" rows="5"> hr { margin: 25px 0 25px 0; background: #CF7400; text-align: left; padding: 15px 0; display: block; border: 0 none; color: #CF7400; height: 1px; clear: both; width: 96%; } acronym, abbr { border-bottom: 1px dotted #514031; cursor: help; } ins { text-decoration: underline; } del { text-decoration: line-through; } sup { font-size: 10px; line-height: 0; color: #cccc99; } em { font-style: italic; } small { font-size: 10px; } strong { font-weight: bold; } strong:target, h3:target, h4:target { background: #CF7400; padding-left: 25px; } code, kbd, samp, tt, var { font-family: "Courier New", Courier, monospace, sans-serif; color: #cccc99; /* #cc9933 #cccc66 #cccc99 */ font-size: 11px; } h3 code { font-size: 13px; } pre { border-left: 1px solid #CF7400; padding: 10px 0 12px 10px; background: #3B2E22; overflow: auto; margin: 25px 0; width: 525px; /* 95% of 555px = 525px */ } pre:hover { border-left: 1px solid #FFFFCC; background: #3B2E22; } </textarea> |
軽量化後
見栄えのための[Tab]や空白スペースや改行を削除します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<textarea name="code" class="css" cols="60" rows="5"> hr { background:#CF7400;margin:25px 0;text-align:left;padding:15px 0;display:block;border:0 none;color:#CF7400;height:1px;clear:both;width:96%; } acronym,abbr { border-bottom:1px dotted #514031;cursor:help; } ins { text-decoration:underline; } del { text-decoration:line-through; } sup { font-size:10px;line-height:0;color:#cc9; } em { font-style:italic; } small { font-size:10px; } strong { font-weight:bold; } strong:target,h3:target,h4:target { background:#CF7400;padding-left:25px; } code,kbd,samp,tt,var { font-family:"Courier New",Courier,monospace,sans-serif;color:#cc9;font-size:11px; } h3 code { font-size:13px; } pre { border-left:1px solid #CF7400;padding:10px 0 12px 10px;background:#3B2E22;overflow:auto;margin:25px 0;width:525px; } pre:hover { border-left:1px solid #FFC;background:#3B2E22; } </textarea> |
Tips 11：CSSに間違いがないかチェック
最後に、CSSが妥当であるかどうかを確認するために、「CSS Validation Service（カスケーディングスタイルシートを検証）」であなたのスタイルシートファイルをチェックしてください。
これは、CSSにミスが無いかどうかチェックをしてくれます。
sponsors
