ページ右上に表示するリボンを CSS3 で作ってみた with LESS
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 の中身を作っていこう
サンプル
今回は下記のようなサンプルの作り方を解説していきます.
Step 00 – ベースとなる HTML を書こう
リボンとして使う要素を div タグで作り, その中に 表示する内容を書きます.
今回はヘッダーとその説明の2行を h1, p タグで追加しました.
<div class="ribbon"> <h1> <a href="#">tmlib.js</a> </h1> <p> JavaScript をより使いやすく, より便利に, そしてより豊かに </p> </div>
▲HTML
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 に変更するのを 忘れないようにしましょう♪
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
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
ざっくり解説すると
positon: abosolute
で絶対座標指定できるようにし,right
,top
で右上に配置します- 次に,
margin
,padding
,width
でサイズを調整します .rotate(45deg)
を指定して回転させます. これで一気にリボンっぽくなります- 見た目を調整,
box-shadow
を指定したり, h1, p を適当にスタイリング - 完成\(^○^)/
といった感じです.
以上です.
気が向いたら色変えたり位置替えたり色々と調整して CSS 出力するような ツールでも作ってみようと思います.
[css][css3][less][UI] / “ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life” http://t.co/rmT5ePed
書いてたみたいです. 最近予約投稿が把握できてない… RT @tmlife_jp: [css][css3][less][UI] / “ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life” http://t.co/dYD1D8FM
ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life CSS3 と LESS でページ右上に表示するリボンを作ってみました. jsdo.it を使って Step by Step で作りなが… http://t.co/cVK4snzy
ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life: CSS3 と LESS でページ右上に表示するリボンを作ってみました. jsdo.it を使って Step by Step で作… http://t.co/YsaIXm9D
ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life: CSS3 と LESS でページ右上に表示するリボンを作ってみました. jsdo.it を使って Step by Step で作… http://t.co/CmPUhemh
ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life http://t.co/F6MmOE6x
書いてたみたいです. 最近予約投稿が把握できてない… RT @tmlife_jp: [css][css3][less][UI] / “ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life” http://t.co/dYD1D8FM
ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life
http://t.co/UykIr4kf
ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life http://t.co/Q5JTzTTH
ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life http://t.co/mpK629r6 #web #html5jp
“ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life” http://t.co/69K8JUF6
ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life: CSS3 と LESS でページ右上に表示するリボンを作ってみました. jsdo.it を使って Step… http://t.co/DLJsK8Et
ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life http://t.co/7VlLCT80
ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life http://t.co/PdnBlbS8
【はてブ新着IT】 ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life http://t.co/YvthAxfs
ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life: 8 users http://t.co/3asSXIlC
“ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life” http://t.co/mvFIkvyg
ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life http://t.co/jsiDA3Kv #css #web
ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life
http://t.co/F3IXi65g
9 users from はてブニュース http://labs.ceek.jp/hbnews/
ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life http://t.co/jsiDA3Kv #css #web
“ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life” http://t.co/EWxgOfkH
“ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life” http://t.co/uJHgINJq
メモ:ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life http://t.co/BwNpNQ6j
読んでる: ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life http://t.co/scOygOgA
from はてなブックマーク – キーワード – JavaScript http://b.hatena.ne.jp/keyword/JavaScript
ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life http://t.co/3yPC05mI
[*HTML・CSS] / “ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life” http://t.co/GyPXHgyR