DEVELOPERS BLOGデベロッパーズブログ
- HOME >
- 伊藤 晋之のデベロッパーズブログ >
- html+cssのみで、ページャーを構築しセンタリング配置する
伊藤 晋之のデベロッパーズブログ
- 氏名
- 伊藤 晋之
- 役職
- ディレクター
- 血液型
- O型
- 出没
- 健美香炉
- 特色
- 走ってます!
- 2013/07/25
- 結果、clearfixで半日つぶされた件
- 2013/06/25
- 久しぶりに萎えさせてくれるぜ、IE7!positionした要素のバグフィックス。
- 2013/02/14
- html+cssのみで、ページャーを構築しセンタリング配置する
見栄えのいいページャーをhtml+cssのみで実装出来ないかと色々と探っておりまして バシャログさん のサイトが物凄い解りやすかったので参照させていただきました。
ただ、これだとセンタリング配置が出来ないのでさらに コチラのサイト を参照させていただきました。
使い回しが出来るよう調整して、メモ的に置いておきます。(IE7・IE8・FF・Chrome・Safari 確認済み)
/*- *追加ページャー */ #pagerCont { position: relative; overflow: hidden; margin: 10px } ul.pager { position: relative; left: 50%; float: left } ul.pager li { position: relative; left: -50%; float: left; margin-right: 5px; border: 1px solid #D0102C; font-weight: bold } ul.pager li.prev, ul.pager li.next { border: none } ul.pager li a { position: relative; display: block; padding: 3px 8px; color: #D0102C } ul.pager li a:link, ul.pager li a:visited { text-decoration: none } ul.pager li a:hover, ul.pager li a:active { background-color: #F9A8B4; text-decoration: none } ul.pager li em { display: block; padding: 3px 8px; background: #D0102C; color: #FFFFFF }
関連エントリー
- 2019/04/03
- PHP で HTML を処理したい
- 2012/12/08
- SyntaxHighlighter ではまった話
2020/12/15
2020/11/12
2020/10/05
2020/09/11
2020/08/03