2月, 2010
CSS Optimizer (CSS最適化ツール)
※CSSファイルを圧縮、並び替えなどを行うためのツールです。CSS 入力にCSSコードもしくはCSSのURLを記入の上、必要に応じてオプションを選択して、『CSS最適化』ボタンをクリックしてください。画面下に最適化されたCSSコードをが表示されます。
自分で書いたＣＳＳをこちらで圧縮してみると34％という数字が出ました（^^;
数字で表れると、何だか嬉しいですね。
使い方は簡単。
CSSコードを入力して、「CSS最適化」ボタンを押すだけ。
「Message」の部分にどこを変えたかというのも出てくるので、そこで自分の書いたCSSの間違いなども勉強できます。
何より、日本語サイトっていう所も魅力！
↑WEBデザインブログランキングです
良かったら応援お願いします♪
料金表や、会社概要など、テーブルレイアウトをする事があります。
そこで、ストック用にCSSでレイアウトするテーブルを作りました。
とりあえずカスタマイズしやすいように、シンプルな感じです。
ご自由にカスタムしてお使い下さい♪
HTMLソース
<table class="table-a"> <tbody> <tr> <th></th> <th>内容</th> <th>内容</th> <th>内容</th> </tr> <tr> <th>内容</th> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> </tr> <tr> <th>内容</th> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> </tr> <tr> <th>内容</th> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> </tr> </tbody> </table>
CSS
.table-a {
border-collapse: collapse;
width: 400px;
border: 1px solid #CCC;
font-size: 12px;
margin: 20px;
text-align: left;
}
.table-a th {
border: 1px solid #DDD;
color: #333;
background-color: #D5FAFB;
font-weight: bold;
padding: 10px;
}
.table-a td {
border: 1px solid #DDD;
padding: 10px;
color: #666;
}
HTMLソース
<table class="table-b"> <tbody> <tr> <th>内容</th> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> </tr> <tr> <th>内容</th> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> </tr> <tr> <th>内容</th> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> </tr> <tr> <th>内容</th> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> </tr> </tbody> </table>
CSS
.table-b {
border-collapse: collapse;
width: 400px;
font-size: 12px;
margin: 20px;
text-align: left;
}
.table-b th {
color: #FFF;
background-color: #099;
font-weight: bold;
padding: 10px;
border-bottom: 1px solid #CCC;
}
.table-b td {
padding: 10px;
color: #666;
border-bottom: 1px solid #CCC;
}
HTMLソース
<table class="table-c"> <tbody> <tr> <th>内容</th> <th>内容</th> <th>内容</th> <th>内容</th> </tr> <tr> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> </tr> <tr> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> </tr> <tr> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> </tr> </tbody> </table>
CSS
.table-c {
border-collapse: collapse;
width: 400px;
font-size: 12px;
margin: 20px;
text-align: left;
}
.table-c th {
color: #333;
font-weight: bold;
padding: 10px;
border-bottom: 3px solid #0CC;
}
.table-c td {
padding: 10px;
color: #666;
border-bottom: 1px solid #CCC;
}
HTMLソース
<table class="table-d">
<tr>
<th scope="col">内容</th>
<th scope="col">内容</th>
<th scope="col">内容</th>
<th scope="col">内容</th>
</tr>
<tbody>
<tr class="color">
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
</tr>
<tr>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
</tr>
<tr class="color">
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
</tr>
<tr>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
</tr>
</tbody>
</table>
CSS
.table-d {
font-size: 12px;
margin: 20px;
width: 400px;
text-align: left;
border-collapse: collapse;
border: 1px solid #CCC;
}
.table-d th
{
padding: 10px;
color: #333;
border-bottom: 1px solid #CCC;
}
.table-d td
{
padding: 10px;
color: #666;
}
.table-d .color
{
background-color: #D5FAFB;
}
↑WEBデザインブログランキングです
良かったら応援お願いします♪
ＷＥＢサイトを閲覧中に「この色のカラーコードは？」と思うことはよくあること。
画像なら、一旦画像を保存してPhotoshopなどで画像を開き、スポイトツールでＲＧＢ値やカラーコードを出して・・と、結構めんどくさい作業になる。
そんな時に便利なツールのご紹介。
Color Pickerは、見ている画面の上にスポイトツールを持って行き、そのカラーコードやＲＧＢ値を出してくれる。
ちょっとした事だけど、とっても便利！
↑WEBデザインブログランキングです
良かったら応援お願いします♪
↑ブログランキングに参加しています♪よかったらクリックしてくださいね
