norm

[CSS] CSS3 Shapes - Diamond, Hexagon, Point Burst

noreply@blogger.com (norm) — Fri, 04 Apr 2014 16:15:00 +0000

CSSだけで色々な形をつくる方法です。画像をマスクのように切り取ったようにもできます。角丸やグラーデーションが簡単にCSSでできるようになったように、グラフィックソフトだと簡単につくれるこのような形も将来的に簡単なCSSだけで実現できるようになるかも。border-burst:24;とか。六角形は1:√3（1:1.7320508）の矩形を3つ60度ずつ回転させてつくっているので比率さえ変えなければ、大きさを自由に変えられます。

DEMO

ダイヤ（マスク）

ダイヤ丸（マスク）

長方形丸（マスク）

六角形

new

六角形丸

new

六角形（マスク）

トゲトゲ 24

new

トゲ丸 24

new

トゲトゲ 36

new

HTML








new

new


 
  
 



 new



 new



 
  new

CSS

*, *:before, *:after {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
/* -------------------- ダイヤ（マスク） -------------------- */
.diamond {
 position:relative;
 top:1em;
 left:2em;
 width:8em;
 height:8em;
 -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
 overflow:hidden;
}
.diamond img {
 position:relative;
 top:-3em;
 left:-2em;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}
/* -------------------- ダイヤ丸（マスク） -------------------- */
.square-rnd {
 border-radius:1em;
}
/* -------------------- 長方形丸（マスク） -------------------- */
.rectangle {
 display:inline-block;
 position:relative;
 top:1.5em;
 left:.5em;
 width:8em;
 height:4em;
 -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
 overflow:hidden;
}
.rectangle img {
 position:relative;
 top:-3em;
 left:-2em;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}
/* -------------------- 六角形 -------------------- */
.hexagon, .hexagon:before, .hexagon:after {
 display: table;
 position: relative;
 top:2em;
 height: 5em;
 width: 8.66em;
 background: #ffde17;
 text-align:center;
 text-transform:uppercase;
 color:#fff;
 z-index: 1;
}
.hexagon:before, .hexagon:after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 z-index: -100;
}
.hexagon:before {
 -ms-transform: rotate(60deg);
 -webkit-transform: rotate(60deg);
 transform: rotate(60deg);
}
.hexagon:after {
 -ms-transform: rotate(-60deg);
 -webkit-transform: rotate(-60deg);
 transform: rotate(-60deg);
}
.hexagon span {
 display:table-cell;
 vertical-align:middle;
}
/* -------------------- 六角形丸 -------------------- */
.hex-rnd, .hex-rnd:before, .hex-rnd:after {
 border-radius:.3em/.6em;
}
/* -------------------- 六角形（マスク） -------------------- */
.hexagon-mask {
 position:relative;
 top:-4em;
 width: 8.5em;
 height: 17em;
 -webkit-transform: rotate(120deg);
 -ms-transform: rotate(120deg);
 transform: rotate(120deg);
 overflow: hidden;
}
.hexagon-mask > div, .hexagon-mask > div > div {
 width: 100%;
 height: 100%;
 -webkit-transform: rotate(-60deg);
 -ms-transform: rotate(-60deg);
 transform: rotate(-60deg);
 overflow: hidden;
}
.hexagon-mask img {
 position:relative;
 top:.8em;
 left:-.5em;
}
/* -------------------- トゲトゲ 24 -------------------- */
.burst-24 {
 position: relative;
 top:1em;
 left:1.5em;
 text-align: center;
 text-transform:uppercase;
 color:#fff;
 -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
 z-index: 1;
}
.burst-24, .burst-24:before, .burst-24:after, .burst-24 > div, .burst-24 > :before, .burst-24 > :after {
 height: 6em;
 width: 6em;
 background: #ffde17;
}
.burst-24:before, .burst-24:after, .burst-24 > div, .burst-24 > :before, .burst-24 > :after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 z-index: -100;
}
.burst-24:before, .burst-24 > :before {
 -webkit-transform: rotate(15deg);
 -ms-transform: rotate(15deg);
 transform: rotate(15deg);
}
.burst-24:after, .burst-24 > :after {
 -webkit-transform: rotate(30deg);
 -ms-transform: rotate(30deg);
 transform: rotate(30deg);
}
.burst-24 > div {
 display:table;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
 z-index:2;
}
.burst-24 span {
 display:table-cell;
 vertical-align:middle;
}
/* -------------------- トゲ丸 24 -------------------- */
.burst-rnd, .burst-rnd:before, .burst-rnd:after, .burst-rnd div, .burst-rnd div:before, .burst-rnd div:after {
 border-radius: 10px;
}
/* -------------------- トゲトゲ 36 -------------------- */
.burst-36 {
 position: relative;
 top:1em;
 left:1.5em;
 text-align: center;
 text-transform:uppercase;
 color:#fff;
 -webkit-transform: rotate(-60deg);
 -ms-transform: rotate(-60deg);
 transform: rotate(-60deg);
 z-index: 1;
}
.burst-36, .burst-36:before, .burst-36:after, .burst-36 div, .burst-36 div:before, .burst-36 div:after {
 height: 6em;
 width: 6em;
 background: #ffde17;
}
.burst-36:before, .burst-36:after, .burst-36 div, .burst-36 div:before, .burst-36 div:after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 z-index: -100;
}
.burst-36:before, .burst-36 div:before {
 -webkit-transform: rotate(10deg);
 -ms-transform: rotate(10deg);
 transform: rotate(10deg);
}
.burst-36:after, .burst-36 div:after {
 -webkit-transform: rotate(20deg);
 -ms-transform: rotate(20deg);
 transform: rotate(20deg);
}
.burst-36 div {
 -webkit-transform: rotate(30deg);
 -ms-transform: rotate(30deg);
 transform: rotate(30deg);
 z-index:2;
}
.burst-36 > div > div {
 display:table;
}
.burst-36 span {
 display:table-cell;
 vertical-align:middle;
}

CSS対応状況

[CSS] Pure CSS Tab UI

noreply@blogger.com (norm) — Thu, 03 Apr 2014 18:04:00 +0000

CSSだけで実現させるタブです。ラジオボタンと疑似クラス、隣接セレクタを駆使して実装しています。position:absoluteを使っているので、親要素の高さを決める必要あり。ですが、safariでの挙動がおかしい。なので現時点では実用的ではないですね。まあ、CSSだけでこういうこともできるんだよ程度に。

DEMO

tab 1

content 1

Quisque eu pellentesque magna. Nam lacinia porta odio non varius. Fusce lobortis non lacus a semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi laoreet arcu in quam blandit aliquet. Nunc diam turpis.
Quisque eu pellentesque magna. Nam lacinia porta odio non varius. Fusce lobortis non lacus a semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi laoreet arcu in quam blandit aliquet. Nunc diam turpis.
Quisque eu pellentesque magna. Nam lacinia porta odio non varius. Fusce lobortis non lacus a semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi laoreet arcu in quam blandit aliquet. Nunc diam turpis.
tab 2

content 2

Curabitur dapibus eu ante nec porttitor. Nunc varius interdum ante, quis auctor elit tristique id. Nullam tortor metus, tincidunt id tellus nec, vulputate pulvinar mi.
tab 3

content 3

Integer sed mi vitae tortor convallis aliquet. Donec luctus sapien urna, a mattis mauris auctor in. Maecenas condimentum dolor sit amet dui viverra suscipit.

HTML


 tab 3
  
   content 3
   テキストテキストテキスト
  
 
 tab 3
  
   content 3
   テキストテキストテキスト
  
 
 tab 3
  
   content 3
   テキストテキストテキスト

CSS

.tab * {
 transition: all 0.3s ease 0s;
 -webkit-transition: all 0.3s ease 0s;
}
.tab {
 position: relative;
 padding: 0;
 height:12.5em;
}
.tab li {
 float:left;
 list-style: none;
 overflow:hidden;
}
.tab input[type=radio] {
 display: none;
}
.tab label {
 display: block;
 padding: .5em 1em;
 background: #ddd;
 cursor: pointer;
}
.tab label:hover {
 background: #ccc;
}
.tab input[type=radio]:checked + label {
 background: #fff;
}
.tab .content {
 visibility:hidden;
 opacity:0;
 filter: alpha(opacity=0);
 position: absolute;
 left: 0;
 padding:1em;
 background: #fff;
 overflow: auto;
 height:10em;
}
.tab .content h3 {
 margin:.5em 0;
}
.tab input[type=radio]:checked + label + .content {
 visibility:visible;
 opacity:1;
 filter: alpha(opacity=100);
}

CSS対応状況

[CSS] Pure CSS Dropdown Menu

noreply@blogger.com (norm) — Wed, 02 Apr 2014 20:36:00 +0000

transitionを有効にするため『visibility』と『opacity』を使っています。transition効果が必要なければ『display:none』と『display:block』で表示の切替をすればいいです。

DEMO

a

b

HTML


  menu 1
  
   submenu 1
   submenu 2
   submenu 3
  
 
  menu 2
  
   submenu 1
   submenu 2
   submenu 3
  
 
  menu 3
  
   submenu 1
   submenu 2
   submenu 3
  
 
  menu 4
  
   submenu 1
   submenu 2
   submenu 3

CSS

/* -------------------- 共通 -------------------- */
.menu * {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
.menu {
 overflow:hidden;
}
.menu a {
 text-decoration:none;
 color:#fff;
 transition: all 0.3s ease 0s;
 -webkit-transition: all 0.3s ease 0s;
}
.menu ul, .menu li {
 line-height:1;
 margin:0;
 padding:0;
 list-style:none;
 text-transform:uppercase;
}
.menu > li {
 float:left;
 text-align:center;
}
.menu > li > a, .menu-nest li a {
 display:block;
 width:9em;
 padding:1em;
 background:#506173;
}
.menu > li > ul {
 position:absolute;
 visibility:hidden;
 opacity:0;
 filter: alpha(opacity=0);
 transition: all 0.3s ease 0s;
 -webkit-transition: all 0.3s ease 0s;
 z-index:100;
 text-align:left;
}
.menu > li:hover ul {
 visibility:visible;
 opacity:1;
 filter: alpha(opacity=100);
}
.menu > li + li {
 border-left:#818D99 1px solid;
}
/* -------------------- A -------------------- */
.menu-nest li {
 border-top:#818D99 1px solid;
}
.menu > li a:hover {
 background:#818D99;
}
.menu > li:first-child > a {
 border-top-left-radius:5px;
}
.menu > li:last-child > a {
 border-top-right-radius:5px;
}
.menu-nest li:last-child > a {
 border-bottom-right-radius:5px;
 border-bottom-left-radius:5px;
}
/* -------------------- B -------------------- */
.menu-nest {
 padding-top:12px;
}
.menu > li a:hover {
 background:#818D99;
}
.menu > li:first-child > a {
 border-top-left-radius:5px;
 border-bottom-left-radius:5px;
}
.menu > li:last-child > a {
 border-top-right-radius:5px;
 border-bottom-right-radius:5px;
}
.menu-nest li:first-child > a, .menu-nest li:first-child {
 border-top-left-radius:5px;
 border-top-right-radius:5px;
}
.menu-nest li:last-child > a, .menu-nest li:last-child {
 border-bottom-right-radius:5px;
 border-bottom-left-radius:5px;
}
.menu-nest li:first-child {
 position: relative;
}
.menu-nest li:first-child:after {
 position: absolute;
 bottom: 100%;
 left: 50%;
 content: " ";
 height: 0;
 width: 0;
 border:8px solid transparent;
 border-bottom:8px solid #506173;
 margin-left:-8px;
}

CSS対応状況

[CSS] Checkboxes and Radio Buttons with CSS and Font Awesome Icons

noreply@blogger.com (norm) — Mon, 31 Mar 2014 22:36:00 +0000

チェックボックスやラジオボタンをCSSとwebフォント（FontAwesome）で実装する方法です。

ポイント

デフォルトのチェックボックス、ラジオボタンを消す。
初期設定として隣接セレクタと疑似要素でlabelタグにアイコンを指定する。
選択状態でlabelタグのアイコンを入れ替える。

DEMO

アイコンの指定のみ

チェックボックス 1
チェックボックス 2

ラジオボタン 1
ラジオボタン 2

CSS + アイコン

チェックボックス 1
チェックボックス 2

ラジオボタン 1
ラジオボタン 2

apple 風

チェックボックス 1
チェックボックス 2

ラジオボタン 1
ラジオボタン 2

HTML


 チェックボックス 1
 チェックボックス 2


 ラジオボタン 1
 ラジオボタン 2

CSS

/* 共通 */
li {
 margin-bottom:1em;
}
label {
 position:relative;
 display: inline-block;
 line-height:1;
 cursor: pointer;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
label:before, label:after {
 position:relative;
 content: "";
 display: inline-block;
 text-align:center;
 font-family: FontAwesome;
 transition: all 0.3s ease 0s;
 -webkit-transition: all 0.3s ease 0s;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
input[type=checkbox], input[type=radio] {
 display: none;
}
/* -------------------- アイコンの指定のみ -------------------- */
label {
 padding-left:1.8em;
}
label:before {
 position: absolute;
 top:-.1em;
 left:-.3em;
 width: 1.5em;
 font-size:1.4em;
 color:#c6c6c6;
}
input[type=checkbox] + label:before {
 content: "\f096";
}
input[type=checkbox]:checked + label:before {
 content: "\f14a";
 color:#409AD5;
}
input[type=radio] + label:before {
 content: "\f10c";
}
input[type=radio]:checked + label:before {
 content: "\f192";
 color:#409AD5;
}
/* -------------------- CSS + アイコン -------------------- */
label {
 padding-left:1.8em;
}
label:before {
 position: absolute;
 top:-3px;
 left:0;
 width:1.25em;
 height:1.25em;
 line-height:1.25;
 margin-right:.5em;
 border-radius: 5px;
}
input[type=checkbox] + label:before {
 content: "\f00c";
 border:#bebebe 1px solid;
 background:#fff;
 color:rgba(255,255,255,0);
}
input[type=checkbox]:checked + label:before {
 content: "\f00c";
 border:#24A592 1px solid;
 background:#2EB2A0;
 color:rgba(255,255,255,1);
}
input[type=radio] + label:before {
 border:#bebebe 1px solid;
 border-radius: 2em;
 background:#fff;
}
input[type=radio]:checked + label:before {
 border:#24A592 1px solid;
}
input[type=radio] + label:after, input[type=radio]:checked + label:after {
 position: absolute;
 top:-3px;
 left:0;
 width:1.25em;
 height:1.25em;
 line-height:1.25;
 border-radius:2em;
}
input[type=radio]:checked + label:after {
 background:#2EB2A0;
 -webkit-box-shadow:0 1px 3px rgba(0,0,0,.3);
 box-shadow:0 0 0 1px #24A592 inset, 0 0 0 6px rgba(255,255,255,1) inset;
}
/* -------------------- apple 風 -------------------- */
label:before {
 width:1.25em;
 height:1.25em;
 line-height:1.2;
 margin-right:.5em;
 border-radius: 5px;
}
input[type=checkbox] + label:before, input[type=radio] + label:before {
 border:#bebebe 1px solid;
 background:#fff;
 background-image: -o-linear-gradient(top, #FFFFFF 0%, #F3F3F3 50%, #ECECEC 50%, #DDDDDD 100%);
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(50, #F3F3F3), color-stop(50, #ECECEC), color-stop(100, #DDDDDD));
 background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #F3F3F3 50%, #ECECEC 50%, #DDDDDD 100%);
 background-image: linear-gradient(to bottom, #FFFFFF 0%, #F3F3F3 50%, #ECECEC 50%, #DDDDDD 100%);
 color:rgba(255,255,255,0);
}
input[type=checkbox]:checked + label:before, input[type=radio]:checked + label:before {
 border:#6C7993 1px solid;
 background:#76C1FD;
 background-image: -o-linear-gradient(top, #CAE6FD 0%, #8CC9FC 50%, #76C1FD 50%, #CFFFFF 100%);
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CAE6FD), color-stop(50, #8CC9FC), color-stop(50, #76C1FD), color-stop(100, #CFFFFF));
 background-image: -webkit-linear-gradient(top, #CAE6FD 0%, #8CC9FC 50%, #76C1FD 50%, #CFFFFF 100%);
 background-image: linear-gradient(to bottom, #CAE6FD 0%, #8CC9FC 50%, #76C1FD 50%, #CFFFFF 100%);
 color:#001732;
}
input[type=checkbox] + label:before {
 content: "\f00c";
}
input[type=radio] + label:before {
 position:relative;
 top:.2em;
 border-radius: 2em;
}
input[type=radio] + label:after, input[type=radio]:checked + label:after {
 position:absolute;
 top:.58em;
 left:.4em;
 width:.5em;
 height:.5em;
 border-radius:1em;
}
input[type=radio]:checked + label:after {
 background:#001732;
}

CSS対応状況

この星の一等賞になりたいの卓球で俺は。

noreply@blogger.com (norm) — Tue, 04 Mar 2014 03:30:00 +0000

鉄コン筋クリートから約8年、遂にピンポンのアニメ化キターーー！これは絶対見ねば。公式サイトの書き下ろしかっけー！声優も良さげ！あと、あだ名に苦情きませんように。

TVアニメ『ピンポン』公式サイト

この流れで『花男』と『ZERO』もアニメ化してくんないかな〜

[UI] UI Components : Mobile Calendar

noreply@blogger.com (norm) — Sun, 15 Dec 2013 07:51:00 +0000

カレンダーUI。相対指定により幅の変化に対応。

DEMO

a

2013.4

b

2013.4

c

2013.4

d

2013.4

HTML

CSS

/* 共通 */
* {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
.calendar {
 line-height:1;
 font-family:'Lato';
 font-weight:300;
}
.calendar a {
 text-decoration:none;
}
.calendar_month, .calendar_week {
 display:table;
 width: 100%;
 font-weight:400;
 overflow:hidden;
}
.calendar_month > li, .calendar_week > li {
 display:table-cell;
 vertical-align: middle;
 text-align:center;
}
.calendar_month .prev, .calendar_month .next {
 width:3em;
}
.calendar_month .prev a, .calendar_month .next a {
 display:block;
 padding:1em 0;
}
.calendar_month .month b, .calendar_month .month span {
 margin:0 .2em;
 font-size:150%;
 font-weight:300;
}
.calendar_week {
 table-layout: fixed;
 font-size:75%;
}
.calendar_week > li {
 width:14.285714285%;
 padding:1em 0;
}
.calendar_days {
 overflow:hidden;
}
.calendar_days > li {
 float:left;
 width:14.285714285%;
}
.calendar_days > li a {
 display:block;
 padding:1em 0;
 text-align:center;
}
/* a */
.calendar_month a {
 color:#ccc;
}
.calendar_week {
 background:#2980B9;
 color:rgba(255,255,255,.5);
}
.calendar_days > li a {
 border-bottom:#fff 1px solid;
 color:#454C5E;
}
.calendar_days > li:nth-of-type(7n) a {
 color:#2980B9;
}
.calendar_days > li:nth-of-type(7n+1) a, .calendar_days .holiday a {
 color:#BD2426;
}
.calendar_days .outside a {
 color:#ccc !important;
}
.calendar_days .today a {
 background:#2789E4;
 color:#fff;
}
/* b */
.calendar_month .month {
 border-right:#3194CE 1px solid;
 border-left:#3194CE 1px solid;
}
.calendar_month .month, .calendar_month a {
 background:#3DA5E5;
 color:#fff;
}
.calendar_week {
 background:#1773A8;
 color:rgba(255,255,255,.7);
}
.calendar_days > li a {
 border-right:#3194CE 1px solid;
 border-bottom:#3194CE 1px solid;
 background:#3DA5E5;
 color:#fff;
}
.calendar_days > li:nth-of-type(7n) a {
 border-right: none;
 color:#1A608C;
}
.calendar_days > li:nth-of-type(7n+1) a, .calendar_days .holiday a {
 color:#FFBCBC;
}
.calendar_days .outside a {
 color:rgba(255,255,255,.2) !important;
}
.calendar_days .today a {
 background:#fff;
 color:#2980B9;
}
/* c */
.calendar_month a, .calendar_week {
 color:#fff;
}
.calendar_days, .calendar_days > li {
 padding:1px;
}
.calendar_days > li a {
 padding:.9em 0;
 border-radius: 2px;
 background:#DCEDE5;
 color:#62726B;
}
.calendar_days > li:nth-of-type(7n) a {
 color:#2980B9;
}
.calendar_days > li:nth-of-type(7n+1) a, .calendar_days .holiday a {
 color:#BD2426;
}
.calendar_days .outside a {
 color:rgba(98,114,107,.3) !important;
}
.calendar_days .today a {
 background:#BBCBC4;
 color:#fff;
}
/* d */
.calendar_month .month {
 border-left:#C9CACA 1px solid;
 border-right:#C9CACA 1px solid;
}
.calendar_month .month, .calendar_month a, .calendar_days > li a {
 background:#E0E1E2;
 -webkit-box-shadow:1px 1px 0 rgba(255,255,255,.5) inset;
 box-shadow:1px 1px 0 rgba(255,255,255,.5) inset;
 color:#636F7C;
}
.calendar_week {
 background:#636F7C;
 color:rgba(255,255,255,.7);
}
.calendar_days > li a {
 border-bottom:#C9CACA 1px solid;
 border-right:#C9CACA 1px solid;
}
.calendar_days > li:nth-of-type(7n) a {
 border-right: none;
 color:#2980B9;
}
.calendar_days > li:nth-of-type(7n+1) a, .calendar_days .holiday a {
 color:#BD2426;
}
.calendar_days .outside a {
 color:#BFC0C1 !important;
}
.calendar_days .today a {
 background:#F4F6F7;
 -webkit-box-shadow:0 1px 3px rgba(0,0,0,.1) inset;
 box-shadow:0 1px 2px rgba(0,0,0,.1) inset;
}

CSS対応状況

[UI] UI Components : Mobile List Navigation

noreply@blogger.com (norm) — Sun, 01 Dec 2013 07:48:00 +0000

スマホでよく見るリスト型のナビゲーション。画像なしの場合でも成立します。画像の大きさも場合によって大きさを変えるためにCSSでトリミングできるようにしています。

DEMO

a

b

c

d

HTML


 
  
  
   Lorem ipsum dolor sit amet
   consectetur
  
 
  
   Nullam vulputate elit non ante vulputate congue
   aliquam massa

CSS

/* 共通 */
* {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
.list_navi a {
 display:table;
 width:100%;
 height:5.2em;
 text-decoration:none;
}
.list_navi a > div {
 display: table-cell;
 vertical-align:middle;
}
.list_navi .image {
 padding-right:.6em;
}
.list_navi .image div {
 overflow:hidden;
}
.list_navi .image img {
 width:7em;
}
.list_navi .text {
 line-height:1;
}
.list_navi .text p {
 max-height:2.6em;
 line-height:1.3;
 margin-bottom:0;
 overflow:hidden;
}
.list_navi .text small {
 color:#aaa;
}
/* a */
.list_navi a {
 padding:.6em;
}
.list_navi li:nth-of-type(odd) {
 background:#F3F3F3;
}
.list_navi .image {
 width:4em;
}
.list_navi .image div {
 width:4em;
 height:4em;
}
/* b */
.list_navi a {
 padding:.6em;
}
.list_navi li {
 border-top:#eee 1px solid;
}
.list_navi li:first-child {
 border-top:none;
}
.list_navi .image {
 width:4em;
}
.list_navi .image div {
 width:4em;
 height:4em;
}
/* c */
.list_navi .text {
 padding-right:.6em;
}
.list_navi li {
 border-top:#eee 1px solid;
}
.list_navi li:first-child {
 border-top:none;
}
.list_navi .image {
 width:5.2em;
}
.list_navi .image div {
 width:5.2em;
 height:5.2em;
}
.list_navi .image img {
 width:10em;
}
/* d */
.list_navi a {
 padding:.6em;
}
.list_navi li {
 border-top:#fff 1px solid;
 border-bottom:#ddd 1px solid;
 background-image: -o-linear-gradient(top, #F9F9F9 0%, #E6E6E6 100%);
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F9F9F9), color-stop(100, #E6E6E6));
 background-image: -webkit-linear-gradient(top, #F9F9F9 0%, #E6E6E6 100%);
 background-image: linear-gradient(to bottom, #F9F9F9 0%, #E6E6E6 100%);
}
.list_navi li:first-child {
 border-top:none;
}
.list_navi li:last-child {
 border-bottom:none;
}
.list_navi .image {
 width:4em;
}
.list_navi .image div {
 width:4em;
 height:4em;
}

CSS対応状況

[UI] UI Components : Toggle Switch

noreply@blogger.com (norm) — Sat, 02 Nov 2013 07:40:00 +0000

DEMO

a

b

c

d

e

f

g

h

i

j

k

l

JS

使用させていただいたのは『jQuery Toggles』。jsは最後に読み込ませる必要あり。

HTML

<div class="toggle on"></div>

CSS

/* -------------------- 基本設定 -------------------- */
.toggle * {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
.toggle {
 display: inline-block;
 width: 100px;
 height: 50px;
 font-size: 14px;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off, .toggle-slide .toggle-blob, .toggle-slide .toggle-blob:after {
 float: left;
 transition: all 0.3s ease 0s;
 -webkit-transition: all 0.3s ease 0s;
}
.toggle-slide {
 overflow: hidden;
 cursor: pointer;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
.toggle-slide .toggle-blob {
 position: relative;
 z-index: 99;
 cursor: hand;
 cursor: grab;
 cursor: -moz-grab;
 cursor: -webkit-grab;
}
.toggle-slide .toggle-blob:after {
 content: "";
 position: absolute;
}
/* -------------------- A -------------------- */
.toggle-slide {
 color: #fff;
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #77CF21;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #BD2426;
}
.toggle-slide .toggle-blob:after {
 top: 2px;
 left: 2px;
 width: 46px;
 height: 46px;
 background:#fff;
}
.toggle-slide .toggle-blob:hover:after {
 background: #f3f3f3;
}
/* -------------------- B -------------------- */
.toggle-slide {
 color: #fff;
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #3498DB;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #D6D6D6;
}
.toggle-slide .toggle-blob:after {
 top: 2px;
 left: 2px;
 width: 46px;
 height: 46px;
 background:#fff;
}
.toggle-slide .toggle-blob:hover:after {
 background: #f3f3f3;
}
/* -------------------- C -------------------- */
.toggle-slide {
 border-radius: 3px;
 color: #fff;
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #77CF21;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #BD2426;
}
.toggle-slide .toggle-blob:after {
 top: 2px;
 left: 2px;
 width: 46px;
 height: 46px;
 border-radius: 3px;
 background:#fff;
}
.toggle-slide .toggle-blob:hover:after {
 background: #f3f3f3;
}
/* -------------------- D -------------------- */
.toggle-slide {
 border-radius: 3px;
 color: #fff;
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #3498DB;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #D6D6D6;
}
.toggle-slide .toggle-blob:after {
 top: 2px;
 left: 2px;
 width: 46px;
 height: 46px;
 border-radius: 3px;
 background:#fff;
}
.toggle-slide .toggle-blob:hover:after {
 background: #f3f3f3;
}
/* -------------------- E -------------------- */
.toggle-slide {
 border-radius: 50px;
 color: #fff;
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #77CF21;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #BD2426;
}
.toggle-slide .toggle-blob:after {
 top: 2px;
 left: 2px;
 width: 46px;
 height: 46px;
 border-radius: 50px;
 background:#fff;
}
.toggle-slide .toggle-blob:hover:after {
 background: #f3f3f3;
}
/* -------------------- F -------------------- */
.toggle-slide {
 border-radius: 50px;
 color: #fff;
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #3498DB;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #D6D6D6;
}
.toggle-slide .toggle-blob:after {
 top: 2px;
 left: 2px;
 width: 46px;
 height: 46px;
 border-radius: 50px;
 background:#fff;
}
.toggle-slide .toggle-blob:hover:after {
 background: #f3f3f3;
}
/* -------------------- G -------------------- */
.toggle-slide {
 border-radius: 3px;
 color: #fff;
 text-shadow:0 -1px 0 rgba(0,0,0,0.3);
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #77CF21;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #BD2426;
 box-shadow:1px 1px 3px rgba(0, 0, 0, .5) inset;
 -webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, .5) inset;
}
.toggle-slide .toggle-blob:after {
 top: 1px;
 left: 1px;
 width: 48px;
 height: 48px;
 border-radius: 3px;
 background:#EBEBEB;
 box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255,255,255,1) inset;
 -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);
}
.toggle-slide .toggle-blob:hover:after {
 background: #F6F6F6;
}
/* -------------------- H -------------------- */
.toggle-slide {
 border-radius: 3px;
 color: #fff;
 text-shadow:0 -1px 0 rgba(0,0,0,0.3);
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #3498DB;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #D6D6D6;
 box-shadow:1px 1px 3px rgba(0, 0, 0, .5) inset;
 -webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, .5) inset;
}
.toggle-slide .toggle-blob:after {
 top: 1px;
 left: 1px;
 width: 48px;
 height: 48px;
 border-radius: 3px;
 background:#EBEBEB;
 box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255,255,255,1) inset;
 -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);
}
.toggle-slide .toggle-blob:hover:after {
 background: #F6F6F6;
}
/* -------------------- I -------------------- */
.toggle-slide {
 border-radius: 3px;
 color: #fff;
 text-shadow:0 -1px 0 rgba(0,0,0,0.3);
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #77CF21;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #BD2426;
 box-shadow:1px 1px 3px rgba(0, 0, 0, .5) inset;
 -webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, .5) inset;
}
.toggle-slide .toggle-blob {
 border-radius: 3px;
 border:#33353F 1px solid;
 background:#343943;
 box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255,255,255,.2) inset;
 -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
.toggle-slide .toggle-blob:hover {
 background: #33353F;
}
/* -------------------- J -------------------- */
.toggle-slide {
 border-radius: 3px;
 color: #fff;
 text-shadow:0 -1px 0 rgba(0,0,0,0.3);
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #3498DB;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #D6D6D6;
 box-shadow:1px 1px 3px rgba(0, 0, 0, .5) inset;
 -webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, .5) inset;
}
.toggle-slide .toggle-blob {
 border-radius: 3px;
 border:#33353F 1px solid;
 background:#343943;
 box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255,255,255,.2) inset;
 -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
.toggle-slide .toggle-blob:hover {
 background: #33353F;
}
/* -------------------- K -------------------- */
.toggle-slide {
 border-radius: 50px;
 color: #fff;
 text-shadow:0 -1px 0 rgba(0,0,0,0.3);
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #77CF21;
}
.toggle-slide .toggle-on {
 border-radius: 50px 0 0 50px;
}
.toggle-slide .toggle-off {
 border-radius: 0 50px 50px 0;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #BD2426;
 box-shadow:0 1px 3px rgba(0, 0, 0, .5) inset;
 -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, .5) inset;
}
.toggle-slide .toggle-blob {
 border-radius: 50px;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c2c2c2), color-stop(0.00, #fff));
 background: -webkit-linear-gradient(#fff, #c2c2c2);
 background: -o-linear-gradient(#fff, #c2c2c2);
 background: linear-gradient(#fff, #c2c2c2);
 box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 1px rgba(51,51,51,1) inset;
 -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 1px rgba(51,51,51,1) inset;
}
.toggle-slide .toggle-blob:after {
 top: 5px;
 left: 5px;
 width:40px;
 height:40px;
 border-radius: 50px;
 background:#eee;
}
/* -------------------- L -------------------- */
.toggle-slide {
 border-radius: 50px;
 color: #fff;
 text-shadow:0 -1px 0 rgba(0,0,0,0.3);
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #3498DB;
}
.toggle-slide .toggle-on {
 border-radius: 50px 0 0 50px;
}
.toggle-slide .toggle-off {
 border-radius: 0 50px 50px 0;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #D6D6D6;
 box-shadow:0 1px 3px rgba(0, 0, 0, .5) inset;
 -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, .5) inset;
}
.toggle-slide .toggle-blob {
 border-radius: 50px;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c2c2c2), color-stop(0.00, #fff));
 background: -webkit-linear-gradient(#fff, #c2c2c2);
 background: -o-linear-gradient(#fff, #c2c2c2);
 background: linear-gradient(#fff, #c2c2c2);
 box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 1px rgba(51,51,51,1) inset;
 -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 1px rgba(51,51,51,1) inset;
}
.toggle-slide .toggle-blob:after {
 top: 5px;
 left: 5px;
 width:40px;
 height:40px;
 border-radius: 50px;
 background:#eee;
}

CSS対応状況

[UI] UI Components : Mobile Tile Based Navigation

noreply@blogger.com (norm) — Sat, 26 Oct 2013 07:42:00 +0000

タイルベースのスマホ用ナビゲーション。アイコンにはFont Awesomeを使用。

DEMO

a

b

c

d

HTML


 photo
 mail
 music
 talk
 map
 shopping

CSS

/* 共通 */
* {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
.navi li {
 position:relative;
 float:left;
 width:50%;
 line-height:1;
 text-align:center;
 text-transform:uppercase;
 overflow:hidden;
}
.navi li a {
 display:block;
 height:160px;
 text-decoration:none;
 transition: all 0.3s ease 0s;
 -webkit-transition: all 0.3s ease 0s;
}
.navi li a:hover {
 opacity:0.7;
 filter: alpha(opacity=70);
 -ms-filter: "alpha(opacity=70)";
}
.navi span {
 display:block;
 font-size:14px;
 color:#fff;
}
/* a */
.navi .icon {
 padding:40px 0 10px;
 font-size:50px;
 color:#fff;
}
.navi-photo a {
 background:#F75455;
}
.navi-mail a {
 background:#FF797D
}
.navi-talk a {
 background:#F1C40F;
}
.navi-music a {
 background:#FF9D2A;
}
.navi-map a {
 background:#2EB2A0;
}
.navi-shopping a {
 background:#5EBFD8;
}
/* b */
.navi {
 padding:5px;
 overflow:hidden;
}
.navi li {
 padding:5px;
}
.navi li a {
 height:145px;
 border-radius: 5px;
}
.navi .icon {
 padding:35px 0 10px;
 font-size:50px;
 color:#fff;
}
.navi-photo a {
 background:#F75455;
}
.navi-mail a {
 background:#FF797D
}
.navi-talk a {
 background:#F1C40F;
}
.navi-music a {
 background:#FF9D2A;
}
.navi-map a {
 background:#2EB2A0;
}
.navi-shopping a {
 background:#5EBFD8;
}
/* c */
.navi li:before, .navi li:after {
 content: "";
 position: absolute;
 width: 0;
 height: 0;
}
.navi li:before {
 bottom: 0;
 right: 0;
 left: 0;
 width:100%;
 border-bottom: #ddd 1px solid;
}
.navi li:after {
 top: 0;
 bottom: 0;
 right: 0;
 height:100%;
 border-right: #ddd 1px solid;
}
.navi li:nth-child(5):before, .navi li:nth-child(6):before {
 border-bottom: none;
}
.navi li:nth-child(2n):after {
 border-right: none;
}
.navi .icon {
 width:90px;
 height:90px;
 line-height:90px;
 border-radius: 50px;
 margin:25px 0 10px;
 font-size:40px;
 color:#fff;
}
.navi-photo .icon {
 background:#F75455;
}
.navi-photo span {
 color:#F75455;
}
.navi-mail .icon {
 background:#FF797D
}
.navi-mail span {
 color:#FF797D
}
.navi-talk .icon {
 background:#F1C40F;
}
.navi-talk span {
 color:#F1C40F;
}
.navi-music .icon {
 background:#FF9D2A;
}
.navi-music span {
 color:#FF9D2A;
}
.navi-map .icon {
 background:#2EB2A0;
}
.navi-map span {
 color:#2EB2A0;
}
.navi-shopping .icon {
 background:#5EBFD8;
}
.navi-shopping span {
 color:#5EBFD8;
}
/* d */
.navi li:before, .navi li:after {
 content: "";
 position: absolute;
 width: 0;
 height: 0;
}
.navi li:before {
 bottom: 0;
 right: 0;
 left: 0;
 width:80%;
 margin: 0 auto;
 border-bottom: #ddd 1px solid;
}
.navi li:after {
 top: 0;
 bottom: 0;
 right: 0;
 height:80%;
 margin: auto 0;
 border-right: #ddd 1px solid;
}
.navi li:nth-child(5):before, .navi li:nth-child(6):before {
 border-bottom: none;
}
.navi li:nth-child(2n):after {
 border-right: none;
}
.navi .icon {
 width:90px;
 height:90px;
 line-height:90px;
 border-radius: 50px;
 margin:25px 0 10px;
 font-size:40px;
 color:#fff;
}
.navi-photo .icon {
 background:#F75455;
}
.navi-photo span {
 color:#F75455;
}
.navi-mail .icon {
 background:#FF797D
}
.navi-mail span {
 color:#FF797D
}
.navi-talk .icon {
 background:#F1C40F;
}
.navi-talk span {
 color:#F1C40F;
}
.navi-music .icon {
 background:#FF9D2A;
}
.navi-music span {
 color:#FF9D2A;
}
.navi-map .icon {
 background:#2EB2A0;
}
.navi-map span {
 color:#2EB2A0;
}
.navi-shopping .icon {
 background:#5EBFD8;
}
.navi-shopping span {
 color:#5EBFD8;
}

CSS対応状況

[Choreography] KRUMP

noreply@blogger.com (norm) — Sun, 22 Sep 2013 08:20:00 +0000

クランプとは、LAの超危険区域で生まれたダンスで、プロとして生計を立てていたトミー・ザ・クラウン(TOMMY THE CLOWN)らが始めたと言われている。この地域ではケンカや抗争が絶えず、生きていくことさえも簡単ではなかったようだ。そういった極限生活の中、次第に自分の怒りや感情をダンスにぶつけるようになって行った。
クランプとは - DANCE KEEPERS（ダンスキーパーズ）

SDK.2013 krump showcase + final battle

わるそうな奴はだいたい友達っぽい感じの人がわんさか

Jawn Ha :: "Get Outta Your Mind" by Lil Jon (Choreography) :: Urban Dance Camp

MosWantedCrewのメンバーJawn Ha

Devils Den By Skrillex | Choreography by Jaja Vankova

I.aM.mE. crewのメンバーJaja vankova

メジャー誌以外のおすすめ漫画（連載中）パート2

noreply@blogger.com (norm) — Fri, 06 Sep 2013 19:19:00 +0000

メジャー誌の定義は独断と偏見で、週刊少年ジャンプ、ビッグコミックスピリッツ、ヤングマガジン、週刊少年サンデー、週刊少年マガジン、週刊ヤングジャンプ、モーニング、週刊少年チャンピオン、月刊少年マガジンとさせていただきます。

刻刻

佑河樹里はニートの父・兄と隠居の祖父、母、シングルマザーの妹と甥と共に暮らしていた。ある日、甥と兄が幼稚園からの帰路の途中で誘拐され、犯人から樹里・父の元に身代金要求の電話が掛かってくる。犯人の要求する身代金の受け渡し期限までは30分しかなく、間に合わないと悟った樹里は犯人と刺し違える覚悟で2人の救出へと向かう決意をするが、その時、祖父が佑河家に代々伝わるという止界術を使い、時間を止めてしまう。人も物も森羅万象が止まった止界で樹里たちは2人の救出へと向かうが、向かった先で自分たち以外の動く人間たちに遭遇、急襲される……。
wikipedia

作者：堀尾省太
掲載誌：モーニング・ツー
岩明均度：★★★★★
時間止まる度：★★★★★
普通の人たち多い度：★★★★★

海街diary

鎌倉で暮らす三姉妹の元に自分たちが幼い頃に離婚して家を出て行った父の訃報が届いた。15年以上会っていない父の死を特に何とも思えない次女・佳乃。三女・千佳も父との思い出がほとんどなく、佳乃と同じ気持ちだった。それでも長女・幸の頼みで葬式に出るために山形へ赴いた佳乃と千佳は、そこで年齢の割にしっかりしている中学生の異母妹・すずと初めて出会う。
wikipedia

作者：吉田秋生
掲載誌：月刊フラワーズ
マンガ大賞2013度：★★★★★
鎌倉住みたい度：★★★★★
姉妹度：★★★★★

砂ぼうず

舞台は、関東大砂漠。数百年前に文明が滅び去ってもなお懲りずに、人間は人間同士で弱肉強食の争いを繰り返していた。そんな中、最近名をあげてきた便利屋、人呼んで砂漠の妖怪・砂ぼうず。金と名誉とボインのためなら、その抜群にキレる頭と腕前をいかして、卑怯・陰湿お構いなしに何でもやる……過酷なサバイバルを強いられる砂漠にまさに最適な男である。そして、関東一の凄腕美人を目指して彼に弟子入りした少女・通称：小砂。ある時は女に騙され命を危うくし、またある時は多額の借金を背負わされながら、二人の戦いの日々は続いていく。
wikipedia

作者：うすね正俊
掲載誌：コミックビーム
荒廃度：★★★★★
女好き度：★★★★★
マッドマックス度：★★★★★

獣の奏者

獣ノ医術師である母とともに、闘蛇衆たちの村で暮らす少女エリン。彼女の母ソヨンはその優れた医術の腕を買われ闘蛇のなかでも特に強い<牙>の世話を任せられていた。ある日、村で飼っていた全ての<牙>が突然死んでしまい、母はその責任を問われ処刑されることとなった。エリンは母を助けようと必死に奔走するも失敗、母と引き離され天涯孤独の身の上となってしまう。その後、蜂飼いのジョウンに助け出されたエリンは彼と共に暮らすうち、山奥で天空を翔る野生の王獣と出会う。その姿に魅せられたエリンは母と同じく獣ノ医術師になることを決意し、ジョウンの昔なじみでもあるエサルが教導師長を務めるカザルム王獣保護場の学舎へと入舎する。
wikipedia

作者：上橋菜穂子（原作）武本糸会（作画）
掲載誌：月刊少年シリウス
ファンタジー度：★★★★★
獣かわいい度：★★★★★
孤高度：★★★★★

シドニアの騎士

太陽系が奇居子（ガウナ）と呼ばれる謎の生命体によって破壊されてから1000年後の世界。人類の繁殖と生産を維持しながら宇宙を旅する播種船・シドニアに暮らす主人公、谷風長道が人型兵器「衛人」の操縦士訓練生となり、仲間とともにガウナとの戦闘を繰り広げる。
wikipedia

作者：弐瓶勉
掲載誌：月刊アフタヌーン
弐瓶ワール度：★★★★★
SF度：★★★★★
ガウナ度：★★★★★

多重人格探偵サイコ

刑事・小林洋介が恋人の復讐のために猟奇殺人犯を殺害したのがきっかけで現れた人格・雨宮一彦は探偵になった。その後雨宮は何人もの猟奇殺人犯に関わることになるが、殺人犯たちの左眼には一様にバーコードの痣があり、雨宮自身の左眼にも同じものがあった。そして雨宮は事件の背後にある巨大な陰謀と自身の正体を知ることになる。
wikipedia

作者：大塚英志（原作）田島昭宇（作画）
掲載誌：ヤングエース
サイコパス度：★★★★★
ドラマ化面白そう度：★★★★★
ドラマ化難しそう度：★★★★★

天地明察

幕府の碁打ち、渋川春海（二代目安井算哲）は、碁の名門四家の一員でありながら真剣勝負の許されないお城碁の現状に飽きており、趣味の算術や天文観測　に没頭する始末。そんな時、算術絵馬が多数奉納されているという神社に出かけた春海は、全ての問題を一瞥のみで解いていった若い武士の存在に衝撃を受ける。その武士の名は「関」。春海の退屈な日常はこの日を境に大きく変わることになる……！
アフタヌーン｜天地明察（１）｜作品紹介｜講談社コミックプラス

作者：冲方丁（原作）槇えびし（作画）
掲載誌：月刊アフタヌーン
映画にもなってる度：★★★★★
画がやさしい度：★★★★★
人がやさしい度：★★★★★

ワンパンマン

就職活動に行き詰る主人公サイタマは、一人の少年とその命を狙う怪人カニランテに遭遇する。「ヒーローになりたい」という子供の頃の夢を思い出し、奮起したサイタマは命懸けの戦いで怪人を倒し少年を救う。それをきっかけにサイタマはヒーローとなるためにトレーニングに励み、頭髪がすべて抜け落ちてしまうほど自分を追い込んだ末に、最強とも言える力を手に入れた。
wikipedia

作者：ONE（原作）村田雄介（作画）
掲載誌：となりのヤングジャンプ
ワンパンチ度：★★★★★
主人公最強度：★★★★★
ギャグ度：★★★★★

惡の華

クラスの美少女・佐伯奈々子に密かに想いを寄せる春日高男。ある日の放課後、出来心により彼女の体操着を盗んでしまうが、その様子は嫌われ者の女子・仲村佐和に目撃されていた。窮地に陥り、仲村からの無茶な要求に翻弄される中、意外なきっかけから佐伯と付き合うことになり、春日は恋心と背徳の自己矛盾に苛まれる。そんな彼に呼応するかの如く、佐伯も内に秘めた意思を徐々に示すようになる。
wikipedia

作者：押見修造
掲載誌：別冊少年マガジン
クソムシ度：★★★★★
主人公もてまくり度：★★★★★
恥ずかしくなる度：★★★★★

冒険エレキテ島

最愛の祖父の遺志を継ぎ、めげない孤高の女パイロットは、愛猫とともに幻の　浮き島「エレキテ島」を追い求める。どこかユーモラス。何度でもみずみずしい。美しく表現豊かな画を約束する天才・鶴田謙二の最新作。
アフタヌーン｜冒険エレキテ島｜作品紹介｜講談社コミックプラス

作者：鶴田謙二
掲載誌：月刊アフタヌーン
ラピュタ度：★★★★★
世界観好き度：★★★★★
長い目で掲載待つ度：★★★★★

[CSS] 万能Disabled CSS - 無効化 CSS

noreply@blogger.com (norm) — Sat, 24 Aug 2013 18:17:00 +0000

指定した要素を無効化状態の見た目にする万能Disabled CSSです。

DEMO

通常時

button button button

無効化

button button button

HTML

button

CSS

.disabled, .disabled:hover, .disabled:visited, .disabled:focus {
 border:#eee 1px solid;
 background:#f6f6f6;
 -webkit-box-shadow:none;
 box-shadow:none;
 text-shadow:none;
 color:#ddd;
 cursor:default;
 outline:none;
}

[UI] UI Components : Buttons

noreply@blogger.com (norm) — Sat, 24 Aug 2013 07:30:00 +0000

ボタンいろいろ。フラット、フラット立体、グラデボタンで色違い。

DEMO

HTML

button

CSS

/* -------------------- buttons -------------------- */
/* 共通 */
.btn {
 margin:.5em;
}
.btn {
 display:inline-block;
 min-width:10em;
 line-height:1;
 padding:1em;
 border-radius: 4px;
 text-align:center;
 text-transform: capitalize;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 font-size:14px;
 font-weight:bold;
 color:#fff;
 text-decoration:none;
 transition: all 0.3s ease 0s;
 -webkit-transition: all 0.3s ease 0s;
}
.btn:hover {
 color:#fff;
}
.btn:visited, .btn:active {
 color:#fff;
}
/* a-1 */
.btn-name1 {
 border:#D6D6D6 1px solid;
 background:#eee;
 color:#333;
}
.btn-name1:hover {
 border:#C1C1C1 1px solid;
 background:#D9D9D9;
 color:#333;
}
.btn-name1:visited, .btn-name1:active {
 color:#333;
}
/* a-2 */
.btn-name2 {
 border:#0E0E0E 1px solid;
 background:#2D2D2D;
}
.btn-name2:hover {
 border:#000 1px solid;
 background:#1F1F1F;
}
/* a-3 */
.btn-name3 {
 border:#1A86CE 1px solid;
 background:#3498DB;
}
.btn-name3:hover {
 border:#0F7CC4 1px solid;
 background:#258ACE;
}
/* a-4 */
.btn-name4 {
 border:#37374F 1px solid;
 background:#44445E;
}
.btn-name4:hover {
 border:#2E2E44 1px solid;
 background:#37374F;
}
/* a-5 */
.btn-name5 {
 border:#C10931 1px solid;
 background:#E00034;
}
.btn-name5:hover {
 border:#AD062B 1px solid;
 background:#C10931;
}
/* a-6 */
.btn-name6 {
 border:#E56510 1px solid;
 background:#F7761F;
}
.btn-name6:hover {
 border:#D65C0A 1px solid;
 background:#E56510;
}
/* a-7 */
.btn-name7 {
 border:#EABB00 1px solid;
 background:#FFCF00;
 color:#333;
}
.btn-name7:hover {
 border:#D3A900 1px solid;
 background:#EABB00;
 color:#333;
}
.btn-name7:visited, .btn-name7:active {
 color:#333;
}
/* a-8 */
.btn-name8 {
 border:#389138 1px solid;
 background:#47A447;
}
.btn-name8:hover {
 border:#2B7F2B 1px solid;
 background:#389138;
}
/* -------------------- buttons 3d -------------------- */
/* 共通 */
.btn-3d {
 border-width: 0 0 3px 0;
 border-style: solid;
}
/* b-1 */
.btn-nameB1 {
 border-color:#BCBCBC;
 background:#eee;
 color:#333;
}
.btn-nameB1:hover {
 background:#D9D9D9;
 color:#333;
}
.btn-nameB1:visited, .btn-nameB1:active {
 color:#333;
}
/* b-2 */
.btn-nameB2 {
 border-color:#0E0E0E;
 background:#2D2D2D;
}
.btn-nameB2:hover {
 background:#1F1F1F;
}
/* b-3 */
.btn-nameB3 {
 border-color:#157CC1;
 background:#3498DB;
}
.btn-nameB3:hover {
 background:#258ACE;
}
/* b-4 */
.btn-nameB4 {
 border-color:#2B2B3F;
 background:#44445E;
}
.btn-nameB4:hover {
 background:#37374F;
}
/* b-5 */
.btn-nameB5 {
 border-color:#AA0529;
 background:#E00034;
}
.btn-nameB5:hover {
 background:#C10931;
}
/* b-6 */
.btn-nameB6 {
 border-color:#C64F05;
 background:#F7761F;
}
.btn-nameB6:hover {
 background:#E56510;
}
/* b-7 */
.btn-nameB7 {
 border-color:#CC9F00;
 background:#FFCF00;
 color:#333;
}
.btn-nameB7:hover {
 background:#EABB00;
 color:#333;
}
.btn-nameB7:visited, .btn-nameB7:active {
 color:#333;
}
/* b-8 */
.btn-nameB8 {
 border-color:#2A7A2A;
 background:#47A447;
}
.btn-nameB8:hover {
 background:#389138;
}
/* -------------------- buttons grad -------------------- */
/* 共通 */
.btn-grad {
 box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
 -webkit-box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
 transition: none;
 -webkit-transition: none;
}
/* c-1 */
.btn-nameC1 {
 border:#D6D6D6 1px solid;
 background:#eee;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #eee), color-stop(0.00, #fff));
 background: -webkit-linear-gradient(#fff, #eee);
 background: -o-linear-gradient(#fff, #eee);
 background: linear-gradient(#fff, #eee);
 color:#333;
}
.btn-nameC1:hover {
 background:#eee;
 color:#333;
}
.btn-nameC1:visited, .btn-nameC1:active {
 color:#333;
}
/* c-2 */
.btn-nameC2 {
 border:#0E0E0E 1px solid;
 background:#2D2D2D;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #2D2D2D), color-stop(0.00, #454545));
 background: -webkit-linear-gradient(#454545, #2D2D2D);
 background: -o-linear-gradient(#454545, #2D2D2D);
 background: linear-gradient(#454545, #2D2D2D);
}
.btn-nameC2:hover {
 background:#2D2D2D;
}
/* c-3 */
.btn-nameC3 {
 border:#1A86CE 1px solid;
 background:#3498DB;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #1c81c4), color-stop(0.00, #3498DB));
 background: -webkit-linear-gradient(#3498DB, #1c81c4);
 background: -o-linear-gradient(#3498DB, #1c81c4);
 background: linear-gradient(#3498DB, #1c81c4);
}
.btn-nameC3:hover {
 background:#1c81c4;
}
/* c-4 */
.btn-nameC4 {
 border:#37374F 1px solid;
 background:#44445E;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #44445E), color-stop(0.00, #5a5a81));
 background: -webkit-linear-gradient(#5a5a81, #44445E);
 background: -o-linear-gradient(#5a5a81, #44445E);
 background: linear-gradient(#5a5a81, #44445E);
}
.btn-nameC4:hover {
 background:#44445E;
}
/* c-5 */
.btn-nameC5 {
 border:#C10931 1px solid;
 background:#E00034;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #b8002b), color-stop(0.00, #E00034));
 background: -webkit-linear-gradient(#E00034, #b8002b);
 background: -o-linear-gradient(#E00034, #b8002b);
 background: linear-gradient(#E00034, #b8002b);
}
.btn-nameC5:hover {
 background:#b8002b;
}
/* c-6 */
.btn-nameC6 {
 border:#E56510 1px solid;
 background:#f78436;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ed670c), color-stop(0.00, #f78436));
 background: -webkit-linear-gradient(#f78436, #ed670c);
 background: -o-linear-gradient(#f78436, #ed670c);
 background: linear-gradient(#f78436, #ed670c);
}
.btn-nameC6:hover {
 background:#ed670c;
}
/* c-7 */
.btn-nameC7 {
 border:#EABB00 1px solid;
 background:#FEFE00;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #FFCF00), color-stop(0.00, #FEFE00));
 background: -webkit-linear-gradient(#FEFE00, #FFCF00);
 background: -o-linear-gradient(#FEFE00, #FFCF00);
 background: linear-gradient(#FEFE00, #FFCF00);
 color:#333;
}
.btn-nameC7:hover {
 background:#FFCF00;
 color:#333;
}
.btn-nameC7:visited, .btn-nameC7:active {
 color:#333;
}
/* c-8 */
.btn-nameC8 {
 border:#389138 1px solid;
 background:#5CB85C;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #47A447), color-stop(0.00, #5CB85C));
 background: -webkit-linear-gradient(#5CB85C, #47A447);
 background: -o-linear-gradient(#5CB85C, #47A447);
 background: linear-gradient(#5CB85C, #47A447);
}
.btn-nameC8:hover {
 background:#47A447;
}

CSS対応状況

[CSS] 疑似要素を使って画像にワンポイントのデザイン

noreply@blogger.com (norm) — Sun, 28 Jul 2013 09:27:00 +0000

DEMO

①画像の下に矢印のような三角をつける。

NEW

②画像の左にラベル。

NEW

③画像の左に縦書きラベル。

NEW

④画像の上から縦書きラベル。

NEW

⑤画像の左にリボン。

NEW

⑥画像の上から縦書きリボン。

NEW

⑦右上に三角ラベル。

NEW

⑧右下に三角ラベル。

NEW

⑨左上に三角ラベル。

NEW

⑩左下に三角ラベル。

HTML


 
  
  ①画像の下に矢印のような三角をつける。
 
 
  NEW
  ②画像の左にラベル。
 
 
  NEW
  ③画像の左に縦書きラベル。
 
 
  NEW
  ④画像の上から縦書きラベル。
 
 
  NEW
  ⑤画像の左にリボン。
 
 
  NEW
  ⑥画像の上から縦書きリボン。
 
 
  NEW
  ⑦右上に三角ラベル。
 
 
  NEW
  ⑧右下に三角ラベル。
 
 
  NEW
  ⑨左上に三角ラベル。
 
 
  NEW
  ⑩左下に三角ラベル。

CSS

.points > div {
 display: inline-block;
 width: 200px;
 margin-right: 15px;
 vertical-align: top;
}
.points p {
 margin: 1em 0;
}
/* 共通 */
.points .image {
 position: relative;
}
/* ①triangle-b */
.point-triangle-b:after {
 position: absolute;
 content: " ";
 bottom: 0;
 left: 50%;
 height: 0;
 width: 0;
 border:10px solid transparent;
 border-bottom:10px solid #fff;
 margin-left: -10px;
}
/* ②③④sticky */
.point-sticky {
 position: absolute;
 line-height: 1;
 background: #FF797D;
 font-size: 12px;
 color: #fff;
}
.point-sticky:after {
 position: absolute;
 content: " ";
 height: 0;
 width: 0;
}
/* ②sticky-l */
.point-sticky-l {
 top: .5em;
 left: -6px;
 padding: .2em;
}
.point-sticky-l:after {
 left: 0;
 top: 100%;
 border-top:6px solid #C83539;
 border-left:6px solid transparent;
}
/* ③sticky-lv */
.point-sticky-lv {
 top: .5em;
 left: -6px;
 width: 1.5em;
 padding: .2em;
 word-wrap: break-word;
 text-align: center;
}
.point-sticky-lv:after {
 left: 0;
 top: 100%;
 border-top:6px solid #C83539;
 border-left:6px solid transparent;
}
/* ④sticky-tv */
.point-sticky-tv {
 top: -.5em;
 left: .5em;
 width: 1.5em;
 padding: .2em;
 word-wrap: break-word;
 text-align: center;
}
.point-sticky-tv:after {
 left: 100%;
 top: 0;
 border-bottom:6px solid #C83539;
 border-right:6px solid transparent;
}
/* ⑤⑥ribbon */
.point-ribbon {
 position: absolute;
 background: #FF797D;
 font-size: 12px;
 color: #fff;
}
.point-ribbon:before {
 position: absolute;
 content: " ";
 height: 0;
 width: 0;
}
.point-ribbon:after {
 position: absolute;
 content: " ";
 height: 0;
 width: 0;
}
/* ⑤ribbon-l */
.point-ribbon-l {
 top: .5em;
 left: -6px;
 height: 1.5em;
 line-height: 1.5;
 padding-left: .5em;
}
.point-ribbon-l:before {
 left: 0;
 top: 100%;
 border-top:6px solid #C83539;
 border-left:6px solid transparent;
}
.point-ribbon-l:after {
 left: 100%;
 bottom: 0;
 border:.8em solid #FF797D;
 border-right:.7em solid transparent;
}
/* ⑥ribbon-tv */
.point-ribbon-tv {
 top: -.5em;
 left: .5em;
 width: 1.5em;
 line-height: 1;
 padding: .25em .25em 0;
 word-wrap: break-word;
 text-align: center;
}
.point-ribbon-tv:before {
 left: 100%;
 top: 0;
 border-bottom:6px solid #C83539;
 border-right:6px solid transparent;
}
.point-ribbon-tv:after {
 left: 0;
 top: 100%;
 border:.8em solid #FF797D;
 border-bottom:.7em solid transparent;
}
/* ⑦⑧⑨⑩triangle */
.point-triangle {
 position: relative;
}
.point-triangle:after {
 position: absolute;
 content: " ";
 height: 0;
 width: 0;
}
.point-triangle span {
 position: absolute;
 content: " ";
 font-size: 12px;
 font-weight: bold;
 color: #fff;
 z-index:100;
}
/* ⑦triangle-rt */
.point-triangle-rt:after {
 top: 0;
 right: 0;
 border-bottom:3em solid transparent;
 border-right:3em solid #FF797D;
}
.point-triangle-rt span {
 top: .5em;
 right: .2em;
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
}
/* ⑧triangle-rb */
.point-triangle-rb:after {
 bottom: 0;
 right: 0;
 border-top:3em solid transparent;
 border-right:3em solid #FF797D;
}
.point-triangle-rb span {
 bottom: .6em;
 right: 0;
 transform: rotate(-45deg);
 -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
}
/* ⑨triangle-lt */
.point-triangle-lt:after {
 top: 0;
 left: 0;
 border-bottom:3em solid transparent;
 border-left:3em solid #FF797D;
}
.point-triangle-lt span {
 top: .5em;
 left: .2em;
 transform: rotate(-45deg);
 -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
}
/* ⑩triangle-lb */
.point-triangle-lb:after {
 bottom: 0;
 left: 0;
 border-top:3em solid transparent;
 border-left:3em solid #FF797D;
}
.point-triangle-lb span {
 bottom: .5em;
 left: .2em;
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
}

CSS対応状況

[UI] UI Components : Tab 切替UIデザインいろいろ

noreply@blogger.com (norm) — Sun, 07 Jul 2013 07:35:00 +0000

HTML


 
  任意メニュー
任意メニュー
任意メニュー
 
 任意コンテンツ
 任意コンテンツ
 任意コンテンツ

CSS（共通）

/*基本設定*/
.navi > div {
 display:none;
 padding: 1em 0 0;
}
.navi .show {
 display:block;
}
.tab > li {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 transition: all 0.3s ease 0s;
 -webkit-transition: all 0.3s ease 0s;
 cursor:pointer;
 font-size: 14px;
 text-transform: uppercase;
}
.tab > li.active {
 cursor: default;
}

JS

切替のためのjsは『jQuery（＋CSS3）で作るタブ切替えパネル（２段タブ対応）』こちらのサイトのものをカスタマイズして利用しています。同じページ内に複数設置が可能なことと、入れ子にも対応しているところが大変便利です。

$(function(){
$(".tab li").click(function(){
 var index = $(this).parent(".tab").children("li").index(this);
 $(this).siblings("li").removeClass("active");
 $(this).addClass("active");
 $(this).parent(".tab").nextAll("div").hide(); 
 $(this).parent(".tab").nextAll("div").eq(index).show(); 
});
})

Demo：ベーシックなタブデザイン

business
sports
science

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nunc sed urna vestibulum auctor vehicula fermentum ligula. Donec sapien sem, blandit ut lacus quis, laoreet rhoncus tellus. Ut fringilla.