Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

4ページ目 | css

CSSでペジネーションを作ろう


ulとliを使っての実装してみよう

今回は上のようなペジネーションの作り方を解説します
liには自動的に●がついてしまうので、まずlist-style-type:noneで●を外さなければなりません。
次にページリストを中央配置したいのでulにtext-align:centerを指定します。
そのときにliは初期値としてdisplay:list-itemとなっていますのでこれをdisplay:inline-blockに変えます。
inline-blockはレゴブロックような物だと捉えたらわかりやすいかもしれません。
このサイトに詳しい解説があります。
http://taneppa.net/display-inline-block/


横に並んでいく
幅 width と高さ height が指定できる
上下左右に margin を指定できる
上下左右に padding を指定できる
text-align を親ブロックに付けることで指定できる。
vertical-align が指定できる。

装飾をしよう

最後は装飾をすれば終わりです。
ホバー時に色を反転させても良いですね。
その際はセレクタに:hoverを追記してあげることでホバー時のスタイルを変更することが出来ます。

最後にペジネーションのサンプルを下に載せます。

.pagenation {
     clear:both;
     position:relative;
     text-align:center;
     margin: 40px auto 40px;
}

.pagenation li {
     cursor:pointer;
     list-style: none;
     display:inline-block;
     border-radius:0;
     border: 1px solid #ddd;
     width:57px;
}

.pagenation li:hover{
     color:#333333;
     background-color: #FFFFFF;
}

実行結果

http://horicdesign.com/sample/pagenation.html

ありがとうございました。


堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド