2013/02/09
[UI] UI Components : Pagination
ページネーション、パジネーション、ページ送りとか。最近は「さらに表示する」とかで自動的に次のページを読み込ませるサイトもあるけれど、どちらが優れているということではなく、目的に合わせて使えば良いと思う。
HTML
CSS
/* 共通 */
.pagination {
line-height: 1;
text-align: center;
}
.pagination a {
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
.pagination .disabled, .pagination a.disabled:hover, .pagination .active {
cursor: default;
}
/* A */
.pagination span {
margin: 0 .15em;
color: #777;
}
.pagination a {
display: inline-block;
width: 2em;
line-height:1;
padding:.4em 0;
margin: 0 .15em;
border: #bbb 1px solid;
border-radius: 3px;
background: #fff;
color: #117EC6;
}
.pagination a:hover {
border:#117EC6 1px solid;
background: #117EC6;
color: #fff;
}
.pagination .disabled, .pagination a.disabled:hover {
border:#ddd 1px solid;
background: #fff;
color: #ddd;
}
.pagination .active {
border:#117EC6 1px solid;
background: #117EC6;
color: #fff;
}
/* B */
.pagination a {
display: inline-block;
width: 2em;
line-height:1;
padding:.4em 0;
border: #C7C7C7 1px solid;
background: #F0F0F0;
color: #555;
}
.pagination a:first-child {
border-radius: 3px 0 0 3px;
}
.pagination a:last-child {
border-radius: 0 3px 3px 0;
}
.pagination a + a {
margin-left: -1px;
}
.pagination a:hover {
background: #ddd;
}
.pagination .disabled, .pagination a.disabled:hover {
border:#ddd 1px solid;
background: #fff;
color: #ddd;
}
.pagination .active, .pagination .active:hover {
background: #ddd;
}
.pagination a.prev, .pagination a.next {
color: #999;
}
/* C */
.pagination span {
margin: 0 .15em;
color: #777;
}
.pagination a {
display: inline-block;
width: 2em;
line-height:1;
padding:.4em 0;
margin: 0 .15em;
border: #bbb 1px solid;
border-radius: 3px;
background: #F0F0F0;
color: #555;
box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);
}
.pagination a:hover {
border:#aaa 1px solid;
background: #E9E9E9;
box-shadow:0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.3);
}
.pagination .disabled, .pagination a.disabled:hover {
border:#ddd 1px solid;
background: #fff;
color: #ddd;
box-shadow: none;
-webkit-box-shadow: none;
}
.pagination .active, .pagination .active:hover {
border: #bbb 1px solid;
background: #ddd;
box-shadow:0 1px 1px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.1) inset;
}
.pagination a.prev, .pagination a.next {
color: #999;
}
/* D */
.pagination span {
margin: 0 .15em;
color: #777;
}
.pagination a {
display: inline-block;
width: 2em;
line-height:1;
padding:.4em 0;
margin: 0 .15em;
border: #bbb 1px solid;
border-radius: 3px;
background: #F0F0F0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #d9d9d9), color-stop(0.00, #fff));
background: -webkit-linear-gradient(#fff, #d9d9d9);
background: -o-linear-gradient(#fff, #d9d9d9);
background: linear-gradient(#fff, #d9d9d9);
color: #555;
box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);
}
.pagination a:hover {
border:#aaa 1px solid;
box-shadow:0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.3);
}
.pagination .disabled, .pagination a.disabled:hover {
opacity: .4;
box-shadow: none;
-webkit-box-shadow: none;
}
.pagination .active, .pagination .active:hover {
border: #bbb 1px solid;
background: #ddd;
box-shadow:0 1px 1px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.1) inset;
}
.pagination a.prev, .pagination a.next {
color: #999;
}
/* E */
.pagination span {
margin: 0 .15em;
color: #777;
}
.pagination a {
display: inline-block;
line-height:1;
padding:.4em .6em;
border-radius: 2em;
background: #fff;
color: #117EC6;
}
.pagination a:hover {
background: #eee;
}
.pagination .prev, .pagination .next {
text-transform: capitalize;
}
.pagination .disabled, .pagination a.disabled:hover {
background: #fff;
color: #ddd;
}
.pagination .active, .pagination .active:hover {
background: #117EC6;
color: #fff;
}
0 件のコメント :
コメントを投稿