「CSS3を使って美しく装飾されたテーブルの作り方|Webpark」のサンプルを LESS で作ってみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

昨日 に引き続き LESS 関連エントリーです.

CSS3を使って美しく装飾されたテーブルの作り方|Webpark」で紹介されていた, テーブルを CSS3 で装飾するサンプル. 非常に良く出来ていて見た目もコードもとてもキレイです.

今回は, このエントリーに触発されて, サンプルをパクってオマージュしてみました.

ただパクったオマージュしたわけではなく LESS で作っていたり, 色々と私の都合の良いように変えてたりします. LESS だと変数が使えるのでベースとなるカラーを変更したり, 幅や高さの調整も超簡単にできますよん♪

サンプルは jsdo.it で作成したので, よかったら fork して色々とイジッてみて下さい.

screenshot

Table of contents

サンプルを実行してみよう

jsdo.it で作ったサンプルです.

Demo Download

HTML のコード

html のコードです.

<div id="main">
    
    <table id="decoration-table">
        <tr>
            <th>順位 </th>
            <th>国</th>
            <th>2010年推計人口</th>
        </tr>
        <tr>
            <td>1</td>
            <td>中華人民共和国</td>
            <td>1,341,335,152</td>
        </tr>
        <tr>
            <td>2</td>
            <td>インド</td>
            <td>1,224,514,327</td>
        </tr>
        <tr>
            <td>3</td>
            <td>アメリカ合衆国</td>
            <td>310,383,948</td>
        </tr>
        <tr>
            <td>4</td>
            <td>インドネシア</td>
            <td>239,870,937</td>
        </tr>
        <tr>
            <td>5</td>
            <td>ブラジル</td>
            <td>194,946,470</td>
        </tr>
        <tr>
            <td>6</td>
            <td>パキスタン</td>
            <td>173,593,383</td>
        </tr>
        <tr>
            <td>7</td>
            <td>ナイジェリア</td>
            <td>158,423,182</td>
        </tr>
        <tr>
            <td>8</td>
            <td>バングラデシュ</td>
            <td>148,692,131</td>
        </tr>
        <tr>
            <td>9</td>
            <td>ロシア</td>
            <td>142,958,164</td>
        </tr>
        <tr>
            <td>10</td>
            <td>日本</td>
            <td>126,535,920</td>
        </tr>
    </table>
    
</div>

CSS のコード

CSS のコードです.

/*
 * style.less
 */

/*
 * tmlib.less
 * ライブラリです.
 */
#tm {
  
  .linear-gradient(@args) {
    background: -webkit-linear-gradient(@arguments);
    background:    -moz-linear-gradient(@arguments);
    background:      -o-linear-gradient(@arguments);
    background:     -ms-linear-gradient(@arguments);
    background:         linear-gradient(@arguments);
  }
  
  .oily-filter(@color) {
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), @color;
    background:    -moz-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), @color;
    background:      -o-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), @color;
    background:     -ms-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), @color;
    background:         linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), @color;
  }
  
}


/*
 * constant
 */
@table-color: hsl(210, 60%, 33%);


/*
 * base
 */
body {
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  padding: 10px 0px 20px 50px;
}
h1 {
  font-size: 22px;
}


/*
 * decoration table
 * テーブルをデコレーション
 */
#decoration-table {
  width: auto;
  border-spacing: 0;
  font-size: 14px;
  
  // 行をデコレーション
  tr {
    background: #fff;
    
    &:nth-child(2n+1) {
      background: lighten(@table-color, 58%);
    }
    
    &:last-child {
      td {
        box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);
        
        &:first-child {
          border-radius: 0px 0px 0px 5px;
        }
        &:last-child {
          border-radius: 0px 0px 5px 0px;
        }
      }
    }
    
    &:hover {
      background: lighten(@table-color, 50%);
      cursor: pointer;
    }
  }
  
  // テーブルヘッダーをデコレーション
  th {
    color: #fff;
    padding: 8px 15px;
    background: @table-color;
    #tm .oily-filter(@table-color);
    
    font-weight: bold;
    border-left: 1px solid @table-color;
    border-top: 1px solid @table-color;
    border-bottom: 1px solid @table-color;
    line-height: 120%;
    text-align: center;
    text-shadow: 0px -1px 0px fadeout(@table-color, 10%);
    box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.3) inset;
    
    &:first-child {
      border-radius: 5px 0px 0px 0px;
    }
    &:last-child {
      border-radius: 0px 5px 0px 0px;
      border-right:1px solid @table-color;
      box-shadow: 2px 2px 1px rgba(0,0,0,0.1), 0px 1px 1px rgba(255,255,255,0.3) inset;
    }
  }
  
  // テーブルデータをデコレーション
  td {
    padding: 8px 15px;
    border-bottom: 1px solid lighten(@table-color, 37%);
    border-left: 1px solid lighten(@table-color, 37%);
    text-align: center;
    
    &:last-child {
      border-right: 1px solid lighten(@table-color, 37%);
      box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);
    }
  }
}

up

テーブルのメインカラーを変数化

メインとして使用するカラーを変数化するために, 下記のように変数として @table-color を宣言します.

/*
 * constant
 */
@table-color: hsl(210, 60%, 33%);

backgroundcolor や border-color に色を指定する際はこの変数を指定します.

  // テーブルヘッダーをデコレーション
  th {
    color: #fff;
    padding: 8px 15px;
    background: @table-color;
    #tm .oily-filter(@table-color);
    
    font-weight: bold;
    border-left: 1px solid @table-color;
    border-top: 1px solid @table-color;
    border-bottom: 1px solid @table-color;

これで @table-color を変えるだけで全体の色を変更することができるようになります.

up

linear-gradient を使ってヘッダーにテカリフィルター

ライブラリとして作成している .oily-filter ミックスインを使って ヘッダーをテカったような表現にします.

  .oily-filter(@color) {
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), @color;
    background:    -moz-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), @color;
    background:      -o-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), @color;
    background:     -ms-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), @color;
    background:         linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), @color;
  }

引数に渡した @color の上に薄くて白いグラデーションフィルターを掛けるミックスインです.

これを下記のように th に指定します.

  // テーブルヘッダーをデコレーション
  th {
    color: #fff;
    padding: 8px 15px;
    background: @table-color;
    #tm .oily-filter(@table-color);

これで iPhone のボタンのようなテカリが表示されます.

up

LESS の color functions を使った明度や透明度の調整

あまり知られていませんが, LESS には color functions という便利な関数が用意されています. これを使うと色を明るくしたり, 薄くしたり色相を変更したりといったことが簡単にできます.

今回のサンプルでは color functions の中から lightenfadeout を使いました.

lighten はテーブルの奇数番目にある行の色を指定する際に使用しています.

    &:nth-child(2n+1) {
      background: lighten(@table-color, 58%);
    }

@table-color を 58% だけ明るくした色を background に指定しています.

fadeout はヘッダーのテキストシャドウに指定しています.

    text-shadow: 0px -1px 0px fadeout(@table-color, 10%);

@table-color の透明度を 10% だけ抜いた色を text-shadow に指定しています.

up

テーブルのメインカラーを変えてみる

ソースコードの @table-color を変更するとテーブルの色がキレイに変わります. 試しに下記のように変更してみてください.

/* * constant */ @table-color: hsl(0, 60%, 33%);

青っぽいテーブルが赤くなるのがわかると思います.

また, jsdo.it で fork して他の色のテーブルも作ってみました.

このように LESS を使うことで調整が格段に楽になります.

up

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT