CSS3 と LESS でページ右上に表示するリボンを作ってみました.

jsdo.it を使って Step by Step で作りながら解説しています. よかったら参考にしてください.

Table of contents

• サンプル
• Step 00 – ベースとなる HTML を書こう
• Step 01 – CSS(LESS) の下準備
• Step 02 – #tm .ribbon ミックスインを作ろう
• Step 03 – #tm .ribbon の中身を作っていこう

サンプル

今回は下記のようなサンプルの作り方を解説していきます.

up

Step 00 – ベースとなる HTML を書こう

リボンとして使う要素を div タグで作り, その中に 表示する内容を書きます.

今回はヘッダーとその説明の２行を h1, p タグで追加しました.

<div class="ribbon">
    <h1>
        <a href="#">tmlib.js</a>
    </h1>
    <p>
        JavaScript をより使いやすく, より便利に, そしてより豊かに
    </p>
</div>

▲HTML

Demo

up

Step 01 – CSS(LESS) の下準備

実際にリボンを作っていく前に, 下準備を行います.

#tm {
    .box-sizing(@value) {
        -webkit-box-sizing: @value;
           -moz-box-sizing: @value;
             -o-box-sizing: @value;
            -ms-box-sizing: @value;
                box-sizing: @value;
    }
    
    .transition(@value) {
        -webkit-transition: @value;
           -moz-transition: @value;
             -o-transition: @value;
            -ms-transition: @value;
                transition: @value;
    }
    
    .rotate(@degree) {
        -webkit-transform: rotate(@degree);
           -moz-transform: rotate(@degree);
             -o-transform: rotate(@degree);
            -ms-transform: rotate(@degree);
                transform: rotate(@degree);
    }
}


body {
    font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif;
    background-color: hsl(240, 80%, 95%);
    overflow: hidden;
}

▲LESS

#tm { ... } の中身はベンダープレフィックスを取り除くための簡略関数です. 特に難しいことはしていません.

body の font-family, background-color は任意のものを指定して下さい. 今回は Meiryo と hsl(240, 80%, 95%) を指定しています.

今回作成するリボンは画面外に少しはみ出ます. overflow に hidden を指定しすることで画面外に要素がはみ出ても スクロールバーが表示されないようになります.

また, jsdo.it で作る場合, 右上のリストボックスを CSS から LESS に変更するのを 忘れないようにしましょう♪

Demo

up

Step 02 – #tm .ribbon ミックスインを作ろう

#tm .ribbon ミックスインを作り, それを .ribbon クラス内で指定しています.

#tm .ribbon ミックスインには文字色@color, 背景色@bg-color を引数として 受け取れるようにしています.

#tm {
    .box-sizing(@value) {
        -webkit-box-sizing: @value;
           -moz-box-sizing: @value;
             -o-box-sizing: @value;
            -ms-box-sizing: @value;
                box-sizing: @value;
    }
    
    .transition(@value) {
        -webkit-transition: @value;
           -moz-transition: @value;
             -o-transition: @value;
            -ms-transition: @value;
                transition: @value;
    }
    
    .rotate(@degree) {
        -webkit-transform: rotate(@degree);
           -moz-transform: rotate(@degree);
             -o-transform: rotate(@degree);
            -ms-transform: rotate(@degree);
                transform: rotate(@degree);
    }
    
    .ribbon(@color, @bg-color) {
        
    }
}


body {
    font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif;
    background-color: hsl(240, 80%, 95%);
    overflow: hidden;
}

.ribbon {
    #tm .ribbon(black, hsl(240, 50%, 100%));
}

▲LESS

Demo

up

Step 03 – #tm .ribbon の中身を作っていこう

一気に仕上げちゃいましたw

    .ribbon(@color, @bg-color) {
        position: absolute;
        right: -140px;
        top: 60px;
        margin: 0px;
        padding: 10px 100px;
        width: 300px;
        background-color: @bg-color;
        box-shadow: 0px 0px 8px 0px #444;
        .rotate(45deg);
        
        text-align: center;
        color: @color;
        
        h1 {
            margin: 0px;
            padding: 0px;
            font-size: 20px;
            
            a {
                color: black;
                text-decoration: none;
                .transition(500ms);
                &:hover {
                    text-shadow: 1px 1px 1px black;
                }
            }
            
        }
        p {
            margin: 0px;
            padding: 0px;
            color: @color;
            font-size: 10px;
        }
    }

▲LESS

ざっくり解説すると

1. positon: abosolute で絶対座標指定できるようにし, right, top で右上に配置します
2. 次に, margin, padding, width でサイズを調整します
3. .rotate(45deg) を指定して回転させます. これで一気にリボンっぽくなります
4. 見た目を調整, box-shadow を指定したり, h1, p を適当にスタイリング
5. 完成＼(^○^)／

といった感じです.

Demo

up

以上です.

気が向いたら色変えたり位置替えたり色々と調整して CSS 出力するような ツールでも作ってみようと思います.