CSS コンポーネント化計画第一弾!! Button コンポーネント

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

Pocket

CSS コンポーネント化計画第一弾!!(第一弾で終わるかもw) っということでボタンをコンポーネント化したいと思います. 作る前にコンポーネントについて少しだけ.

コンポーネント化に至るまで

みなさん, 毎回 Web ページを作るたびに HTML と CSS の同じようなコードを毎回書いていませんか? 私は書いていました. 同じコードを書くということはゲームプログラマにあるまじき行為です. いつも, もどかしさを感じながらコーディングをしていました.

速度を考えるとそのページに最適化されて最小限のコードであるにこしたことはありません. しかし, このハイスペック化の進んだこのご時世, 本当に速度を重視した作りである必要があるのでしょうか?

少なくとも私には必要ありません. CPU は i7, 16GB のメモリと SSD を搭載した私の PC ではちょっと重い程度のサイト ではビクともしません.(軽く自慢.スイマセン) まぁ通信速度の問題はありますがそのへんも最近は高速化が進んでいるので…

そこで, これからはスピードよりもユーザビリティの時代が来るのでは?. っと思い CSS のコンポーネント化をしていくことにしました. コンポーネント化とは構成要素という意味で, それ自体が独立していてそれらを組み合わせることで色々なモノを作ることができるもののことを指します.

簡単にいうとプログラミングでいうライブラリ化のようなものです. コンポーネントを使い回して楽して楽しい Web サイト創りをしましょう!!

今回は第一弾ということで頻繁に使用するボタンコンポーネントを作ります.

CSS3 をバリバリ使用しているので一部のブラウザ(IE)では正常に動作しない可能性があります. Chrome, firefox は確認済みです.

SAMPLE And DATA

サンプルはこちらで見ることができます.

カラフルなボタンが並んでいると思います. 今回作る tm-button コンポーネントを読み込むだけで簡単にこういった表示ができるようになります. マウスを乗せると濃くなり, クリックすると少し動きます.

データはここからダウンロードできます

CODE

コード全体です.

tm-button.css

/**
 * @class   tm-button
 * @user    tm-button : margin, width, border-radius, background
 *          content : padding, border-radius
 */

/**
 *     tm-button
 */
[class|=tm-button] {
    border-radius: 5px;
    background-color: black;
    padding-left: 1px;
    padding-top: 1px;
    
    opacity: 0.75;
}

/**
 *     tm-button .content
 */
[class|=tm-button] .content {
    display: block;
    border-radius: 5px;
    padding: 4px;
    
    color: white;
    text-align: center;
    text-decoration: none;
    
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%);
    background: -moz-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%);
    background: linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%);
}

/**
 *     hover
 */
[class|=tm-button]:hover {
    opacity: 1;
}
[class|=tm-button]:hover .content {
    box-shadow: 2px 2px 4px black;
}

/**
 *     active
 */
[class|=tm-button]:active {
    padding-left: 0px;
    padding-top: 0px;
}

/* red */
.tm-button-red {
    background-color: red;
}

/* lime */
.tm-button-lime {
    background-color: lime;
}

/* blue */
.tm-button-blue {
    background-color: blue;
}

/* yellow */
.tm-button-yellow {
    background-color: yellow;
}
.tm-button-yellow .content {
    color: black;
}

/* aqua */
.tm-button-aqua {
    background-color: aqua;
}

/* fuchsia */
.tm-button-fuchsia {
    background-color: fuchsia;
}

index.html

<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <title>TM Button</title>
        <link rel="stylesheet" href="./tm-button.css" type="text/css" />
        
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
            
            body {
                margin: 20px;
                font-size: 13px;
                font-family: "Meiryo";
            }
            
            [class|=sample] {
                display: -webkit-box;
                display: -moz-box;
                display: box;
            }
            
            /**
             * user
             */
            [class|=tm-button] {
                margin: 5px;
                width: 120px;
            }
            
            [class|=tm-button] .content {
                padding: 10px;
            }
            
            .sample-01 [class|=tm-button],
            .sample-01 [class|=tm-button] .content
            {
                border-radius: 1px;
            }
            
            .sample-02 [class|=tm-button],
            .sample-02 [class|=tm-button] .content
            {
                border-radius: 15px;
            }
            
            /*
            [class|=tm] {
                background: red;
            }
            /**/
        </style>
        
    </head>
    
    <body>
        
        <h1>TM Button</h1>
        
        <div class="sample-00">
            <div class="tm-button"><a class="content" href="#">Item0</a></div>
            <div class="tm-button-red"><a class="content" href="#">Item1</a></div>
            <div class="tm-button-lime"><a class="content" href="#">Item2</a></div>
            <div class="tm-button-blue"><a class="content" href="#">Item3</a></div>
            <div class="tm-button-yellow"><a class="content" href="#">Item4</a></div>
            <div class="tm-button-aqua"><a class="content" href="#">Item5</a></div>
            <div class="tm-button-fuchsia"><a class="content" href="#">Item6</a></div>
        </div>
        
        
        <div class="sample-01">
            <div class="tm-button"><a class="content" href="#">Item0</a></div>
            <div class="tm-button-red"><a class="content" href="#">Item1</a></div>
            <div class="tm-button-lime"><a class="content" href="#">Item2</a></div>
            <div class="tm-button-blue"><a class="content" href="#">Item3</a></div>
            <div class="tm-button-yellow"><a class="content" href="#">Item4</a></div>
            <div class="tm-button-aqua"><a class="content" href="#">Item5</a></div>
            <div class="tm-button-fuchsia"><a class="content" href="#">Item6</a></div>
        </div>
        
        
        <div class="sample-02">
            <div class="tm-button"><a class="content" href="#">Item0</a></div>
            <div class="tm-button-red"><a class="content" href="#">Item1</a></div>
            <div class="tm-button-lime"><a class="content" href="#">Item2</a></div>
            <div class="tm-button-blue"><a class="content" href="#">Item3</a></div>
            <div class="tm-button-yellow"><a class="content" href="#">Item4</a></div>
            <div class="tm-button-aqua"><a class="content" href="#">Item5</a></div>
            <div class="tm-button-fuchsia"><a class="content" href="#">Item6</a></div>
        </div>
        
    </body>
</html>

POINT

セレクタ |= って?

|= は CSS3 から追加されたセレクタで, 属性名 |= パターン という形で指定しています. マッチするのは 属性名が パターン, もしくは パターン- となる要素となります. 今回頻繁に指定している

[class|=tm-button]

は class 属性が tm-button もしくは tm-button-red や tm-button-blue とマッチするということです.

opacity でスケスケ

opacity は透明度を指定する際に使用します.これの便利な点は rgba とは違い子供にも反映されるということです. 今回は通常時に 0.75 を指定することで少し薄くして, マウスが乗った際に 1.0 にすることでマウスホバー時の演出をしています.

お手軽見栄えアップ! border-radius

border-radius は CSS3 の中でもお馴染みの角丸を指定できるプロパティです. まぁ詳しい説明は必要ないと思いますが, ピクセルを指定するとそのピクセルを半径とした角丸を表示してくれます.

CSS3 界一の問題児!! linear-gradient

今回, 最も重要なポイントです. linear-gradient っというよりグラデーション用のプロパティは CSS3 の目玉でもあり, 早いうちから実装されたことでブラウザ間でかなり実装の分かれたプロパティでもあります. ただ, 最近指定方法が統一されてだいぶ使いやすくなりました.

Safari では, まだ古い指定方法 gradient を採用していますが 次のバージョンあたりで linear-gradient として実装されるかと思います.

tm-button では content クラスに linear-gradient 指定しています. content に 白い色が上から下にかけて alpha グラデーションがかかるように指定しています. こうすることで tm-button の色が透けて表示され簡単に色を変更できるグラデーションボタンを表現できます.

background: -webkit-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%);
background: -moz-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%);
background: linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%);

1 Point! box-shadow

マウスを載っけた際に影を表示することでユーザにわかりやすくしています.

box-shadow: 2px 2px 4px black;

以上, 何か指摘, アドバイス等ありましたらお気軽にご連絡ください. 特に, 私は CSS に関してはズブの素人なので, 「スタイル指定はこうすれば良いよ」って意見があればぜひ Twitter の方によろしくお願いします.

最近 CSS3 にハマり過ぎている. 大好きなJavaScript が疎かになってきているので明日は WebGL について書こうと思う.

TRACK BACK URL

POST COMMENT

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