Horic Design

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

29ページ目

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

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


a-blog cms 2.1もリリースされたところだし、WordPressとの比較記事を書いてみよう


こんにちは、a-blog cms 2.1がリリースされましたね。
a-blog cms 2.1
今回はapplepleに入社して20日の僕が、
a-blog cmsの原点に振り返ってWordPressとの記述方法の違いに着目しながら4つの項目に関して話を進めさせて頂きたいと思っています。

  • 外部テンプレートファイルをインクルードする
  • あるカテゴリーで絞り込んで記事一覧を表示
  • コンタクトフォームを作成
  • 独自に定義が出来るカスタムフィールドを作成

「a-blog cms 2.1もリリースされたところだし、WordPressとの比較記事を書いてみよう」の続きを読む

Frontrend in Nagoyaに参加してきました


フロントレンド名古屋に参加してきました。
部品をCSSやJSごとカプセル化して共通して使えるようにするWebコンポーネントの話がすごく興味を惹きました。
それと同時に、今回のイベントで複数人でCSSを管理する場合のコードの書き方や運営方法などを
改めて考えなければならないなと感じさせられました。
というのも自分の書くCSSがあまりにもfragile(脆弱)なので、自分のコードを知らない人が
コードを付け加えたり、HTMLの構造を変えたりすると簡単に設定していたレイアウトが崩れてしまったりするからです。
ですからまず、自分のよくないCSSの書き方を直すこと。
さらにCSS自体を構造化して他の人によみやすいコードを書こうと思いました。


「Frontrend in Nagoyaに参加してきました」の続きを読む

堀 悟大

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

エントリーリスト

カテゴリーリスト

タグクラウド