ページネーションとは

写真のギャラリー、複数ページに渡る記事、ページネーションはウェブサイトにおける標準的なナビゲーションの1つ。
非常に一般的であり、便利なナビゲーションであるが故、ユーザビリティは忘れられがちでもある。

1. クリッカブルエリアを大きく
2. アンダーラインは不要
3. カレントページの明示
4. リンクとリンクのスペースをとる
5. 次へと前へのリンクを設ける
6. 最初のページと最後のページへのリンクを設ける(可能であれば)
7. 最初のページと最後のページへのリンクは外側に設ける

Pagination 101 – KuraFire Network

このガイドラインに沿って、ページネーションの設計を行うことが好ましいだろう。

コーディングテクニック

一般的で、標準的であるが、なかなかコーディングのベストプラクティスが見つからない。
先ほどのガイドラインに沿うと、リンクをブロックにし、リンクエリアを大きくする必要があり、そうなるとfloatを利用することになる。
しかし、floatさせた要素をセンタリングするためには、そのセンタリングする要素の幅を知る必要があるだろう。

上図であげたDiggやFlickrのように最大表示件数が確定できる場合は、比較的簡単にコーディングできるが、
そうでない場合もある。例えば、サイト全体を動的に生成できない場合がそうだ。
そのような場面でも、もちろん最大表示件数が確定できるような場面でも使えるコーディングテクニックを紹介しよう。

HTML

 <ul>
<li><a href="#">‹ 前へ</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">次へ ›</a></li>
</ul>

HTMLはシンプルにliを使って。

CSS

ul {
	margin: 20px;
	padding: 0;
	list-style-type: none;
	text-align: center;
}
li {
	display: inline-block;
	*display: inline
	margin: 0;
	padding: 0;
}
li a {
	text-decoration: none;
	color: #555;
	padding: 4px 6px;
	border: 1px solid #ccc;
	margin: 0 4px;
	*zoom: 1;
}
li a:hover {
	border: 1px solid #999;
	color: #333;
	background-color: #f2f2f2;
}
 

liに指定したdisplay: inline-blockは、IE8、FF3以上、safari3以上なら問題なく利用できる、inlineでありながらblockにできるという、
便利なdisplayのプロパティ。inlineなので、liはfloatをしなくとも、通常の文字列と同じように横に並び、かつtext-alignでセンタリングすることが可能。

残念な事にIE6、7ではdisplay:inline-blockは使えない。
そこで今回は、IE6、IE7のために、スターハックを利用し(ハックは使わずコンディショナルコメントを利用することをおすすめする)、liをdisplay: inlineとし、通常であればinlineの要素であるaタグに*zoom:1を利用してIEの不思議に隠されたhasLayoutプロパティをtrueにすることで、同じ表現ができる。

inline-blockは非常に便利なプロパティなので、ページネーション以外にも使う場面は多いだろう。

No related posts.

多くのフロントエンドデベロッパーの悩みがクロスブラウザ対応。
Adobe BrowserLabは

• Windows Chrome 3.0
• Windows Firefox 2.0
• Windows Firefox 3.0
• Windows Firefox 3.5
• Windows Internet Explorer 6.0
• Windows Internet Explorer 7.0
• Windows Internet Explorer 8.0
• Mac OS Firefox 2.0
• Mac OS Firefox 3.0
• Mac OS Firefox 3.5
• Mac OS Safari 3.0
• Mac OS Safari 4.0

での表示をスクリーンショットで確認できるツール、類似するサービスは数多くあるが、Adobe BrowserLabではブラウザ表示を重ねてみたり、2つの表示を左右で比べて見ることもでき、さらにAdobe製品にあるようなルーラーを表示する事も、ガイドを引くこともできる。
外部から確認ができるサーバーにファイルをアップしておかなければならないが、WinとMacを切り替えたり、私の様にその両方を所有していない場合などに便利だ。

https://browserlab.adobe.com/

2. Styleneat

“ノンプログラマーズ・スタイルシートライティングTips“でも触れたCSSオーガナイザーのStyleneat。
その名が示す通り、CSSを清書してくれる。圧縮したCSSでも、元通りにしてくれるところが非常に便利。
シンプルだが、強力なツールだ。
Sort Properties alphabeticallyにはチェックを入れ、 Multi-line Formattingに設定することをおすすめする。

http://www.styleneat.com/

3. Online YUI Compressor

先ほど圧縮についてふれたが、私がCSSの圧縮に利用しているのが、Online YUI Compressor。
他にも圧縮ツールはあるが、私はJSの開発も行うことがあるため、CSS/JSの両方が圧縮できるYUIがお気に入りだ。
こちらも、シンプルに書いたコードをテキストボックスにコピペして、Compressボタンをクリックするだけ。
CSSの圧縮の際はFile TypeのオプションをCSSにすることを忘れずに。

http://www.refresh-sf.com/yui/

4. Typetester

Information Architects Japanにてウェブデザインの95％はタイポグラフィという記事が書かれた。本当に95%もの割合がタイポグラフィーなのかはわからないが、重要視するべく要素の1つであることは間違いない。
前置きが長くなったが、Typetesterはその名が示す通り、フォントをページに表示させ、確認できる優れたツール。英語のサービスではあるが、自分のマシンに入っているフォントであれば読み込ませる事が可能なので、MSゴシックや、メイリオなど、日本語で標準的に利用できるフォントを試すことが可能だ。
http://www.typetester.org/

5. PXtoEM.com

W3Cも推奨しているように、ウェブサイトのフォントサイズは絶対指定のpxなどではなく、相対指定のemが推奨されている(このサイトではpx指定のままだが)。
そんなpx指定のフォントサイズをem指定に変換(反対も可能)してくれるのが、PXtoEM.com。
実際にはpx、pt、em、パーセントとCSSで使えるほとんどの単位を変換してくれるツールだ。
http://pxtoem.com/

6. Typograph

“Don’t compose without a scale.”
とRobert Bringhurst氏が言う通り、タイポグラフィーには音楽とおなじようにリズムとハーモニーがあり、それらを構成するためには、スケール、音楽の例で表現すると、音階が必須である。
その手助けをしてくれるのが、Typograph。
初めは使いづらい印象があるが、基本に基づいたバーティカルリズムを作り出すための音階を、簡単にCSSにしてくれる非常に強力なツールなので、ぜひ少なくとも30分くらいは遊んでみてほしい。
英語に少しでも抵抗を感じないのであれば、このツール自体に書かれた記事を読むことをおすすめする。

http://lamb.cc/typograph/

7. CSS Sprite Generator

より早くページをロードさせるためには、リクエストを減らせばいい。
CSSスプライトとよばれる、背景画像の位置を指定することで、1枚の画像にいくつもの画像を置きながら、
表示させることができるテクニック。
サーバーのことなんてさっぱりわからないから、と言わずに、新しい表現の1つとしても覚えておきたいテクニックだ。
そのCSSスプライトで面倒なのが、画像の結合と位置指定。
CSS Sprite Generatorは、その面倒をあっという間に解決してくれる。
スプライトしたい画像をzipに納めてアップロード。
たったこれだけで、CSSスプライトが簡単に実現できてしまう。
バージョンが変わり対応していない部分もあるが、私が日本語翻訳を手伝わせていただいたので、日本語でも利用可能だ。

http://spritegen.website-performance.org/

8. Replace CSS Color

自分のサイトも含めて、サイトのリニューアルやリデザインを行うことが非常に多い私にとっての頭痛の種はCSSのカラー指定。
カラーほどドラスティックに印象を変更できる要素はないだろうが、そんなカラーの指定箇所は非常に多く、抜けがち。
そんな際に便利なのが、Replace CSS Color。
CSSファイルをアップロードすると、カラー指定の箇所を抜きだし、その場で編集し、新しい指定のCSSを生成してくれる。
ちょうど私が作成しようとしているWordpress用のテーマでもカラーの指定をたくさん変更する必要があるので、便利に活躍している。

http://css-color-replace.orca-multimedia.de/

9. ダミーテキストジェネレータ

海外ではダミーテキストといえば、lorem ipsum。長い歴史をもつダミーテキストで、生成ツールも星の数程あるが、日本語にはダミーテキストを生成するツールがない。
ダミーテキストジェネレータは世にも珍しい日本語のダミーテキストを生成してくれるツール。
ダミーテキストの種類を選んで、文字数を入力すればOK。
精度の高いプロトタイプを製作する際や、テキストがいつまでもやってこない制作現場で重宝するツール。

http://dounokouno.com/webtools/dummytext/

10. HTML Entity Character Lookup

HTMLのエンティティーキャラクターを検索するツール。
エンティティーキャラクターとは、Üや®などの文字。
かなりの数のキャラクターがあり、それらを上手に活用すれば、Using HTML Symbol Entitiesで紹介されているようなことも可能だ。
こちらも数ある類似ツールの中で１番使い勝手がいい。

http://leftlogic.com/lounge/articles/entity-lookup/

No related posts.

1. reset.cssの活用

クロスブラウザ対応がCSS開発者にとって最大の頭痛の種。
その頭痛を最小限に止めるために、ブラウザがデフォルトで設定するスタイルを一旦リセットしてしまうためにreset.cssを利用しよう。

 html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
} 

Eric’s Archived Thoughts: Resetting Again
私はこのreset.cssを利用しているが、他にもYahoo!が公開しているYUI reset.cssなども活用されている機会は多い。

2. IEハックは使わず、コンディショナルコメントを活用する

クロスブラウザの頭痛の種であるIE。そのIEをターゲットにした様々なハックが発見されている。
例えば、

 selector { *property: value;  } /* IE6&IE7 */
selector { _property: value;  } /* IE6 ONLY */ 

こうすることで、1行目で宣言した命令を、2行目で宣言した命令で上書きするため、この2行でIE7とIE6を別にターゲットにしたCSSを書くことができる。
CSSハックを利用することで、CSSファイルを1つにできることは利点ではあるが、メンテナンス性を考えると、IE コンディショナルコメントを利用することが望ましい。

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]-->

コンディショナルコメントを活用すれば、このようにそれぞれのIEバージョンに対応したCSSファイルを読み込むことが可能だ。
＊1行目はIE6のみ、2行目はIE7のみをターゲットにしている

IE8ではIE6、IE7よりバグが少ないブラウザではあるが、バグはもちろん存在する。

 <!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie8.css" /><![endif]-->

とすれば、IE8のみをターゲットにすることが可能だ。

3. ID名、クラス名には位置を示す単語を避ける

 <div id="page">
    <div id="leftColumn">左コラム</div>
    <div id="rightColumn">右コラム</div>
</div>

2カラムのデザインの場合を例に、上記のようなHTMLを書いたことはないだろうか？
デザインが変更になり、右コラムが左コラムに変更になる場合などに非常に困るネーミングルールだろう。

 <div id="page">
    <div id="main">左コラム</div>
    <div id="sidebar">右コラム</div>
</div>

このようにしておけば、左右を入れ替えても齟齬がない。自分以外の誰が見ても不思議ではないコードを書くことが最良のメンテナンス性能であるため、IDとくらすのネーミングルールはしっかりと考えておくことをおすすめする。
同じく、top-や、bottom-というような場所を指し示す前置語を利用するのもあまりおすすめはしない。

4. CSSの継承を活用する

 <div class="parent">
<h2>見出し</h2>
<p>パラグラフと<strong>強調</strong></p>
</div>

というHTMLを例にして、

 .parent h2 { color: #333; }
.parent p { color: #333; }
.parent strong { color: #333; } 

というように、文字色を墨色(#333333)にする場合、

 .parent { color: #333; } 

とすれば、親要素(div.parent)で宣言された文字色は子要素に継承される。
このほうがコードは短く、色の変更も1ヶ所のみ対応すればいい。
CSSには継承するプロパティと、継承しないプロパティがあるので、下記を参照してほしい。
スタイルシートの継承 – スタイルシート
実際に全部を覚えるのは大変なので、色、文字に関わるプロパティ、そしてリストに関わるプロパティは継承する。
と覚えておけば、問題ないだろう。

5. 同じ値のセレクタを結合する

 h1 { font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2 { font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3 { font-family:Arial, Helvetica, sans-serif; font-weight:normal; } 

というように同じ値を持つ宣言であれば、

 h1, h2, h3 {
    font-family:Arial, Helvetica, sans-serif; font-weight:normal;
} 

とするほうが、より見やすいコードにできる。
リーダビリティとファイルサイズを優先する場合、可能な限り結合できる宣言は結合するべきだが、
ファイルサイズを犠牲にして、すこしメンテナンス性を向上させるために、私はしばしばこのルールを破ることがある。
例えば、このブログのCSSを例にすると

 .single #bd .article h2 {
	color: #CE5C00;
	font-size:18px;
	font-weight: bold;
	text-shadow: 0 1px 1px #212526;
}
.single #bd .article h3 {
	color: #CE5C00;
	font-size:16px;
	font-weight: bold;
	text-shadow: 0 1px 1px #212526;
}
.single #bd .article h4 {
	color: #CE5C00;
	font-size: 14px;
	font-weight: bold;
	text-shadow: 0 1px 1px #212526;
}
.single #bd .article h5 {
	color: #CE5C00;
	font-size:12px;
	font-weight: bold;
	text-shadow: 0 1px 1px #212526;
}
.single #bd .article h6 {
	color: #CE5C00;
	font-size:10px;
	font-weight: bold;
	text-shadow: 0 1px 1px #212526;
}
.single #bd .article h1,
.single #bd .article h2,
.single #bd .article h3,
.single #bd .article h4,
.single #bd .article h5,
.single #bd .article h6 {
	margin: 0 120px 5px 250px;
	padding: 5px 0;
} 

というように、結合するプロパティとそうでないプロパティを分けている。
結合したのは、マージンとパディング。
結合しなかったのは文字に関するプロパティ。
現時点ではh1～h6まで文字に関するプロパティも結合できる同じ値に設定しているが、
将来に変更できる環境を用意してある。
プロジェクトに応じて、少し未来ための拡張性を残しておくことは、メンテナンス性を向上させる策の1つだろう。

5. プロパティはアルファベット順に

 selector {
	background-color:#3399cc;
	color:	#666;
	font: 	1.2em/1.4em Arial, Helvetica, sans-serif;
	height:	300px;
	margin:	10px 5px;
	padding:5px 0 10px 5px;
	width:	30%;
	z-index:10;
} 

プロパティはアルファベット順に並べておく。Firebugでスタイルを見ると、同じくアルファベット順に並べ替えているのがわかる。
私はここでもルールを破ることがある。

 .selector {
	position :absolute；
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
} 

というように、position: absoluteを宣言する場合、位置を表すプロパティであるtop,right,bottom,leftはインデントして、
上記の順番に並べることにしている。アルファベット順に並べてしまう方が、わかりづらくなるプロパティも存在するので、
このガイドラインの上に、役割に応じた対応をするほうがいいだろう。

６. 複数行の宣言は複数行、1行の宣言なら1行で

CSSのコードフォーマットには、1行派と、複数行派がいる。
前者はすべての宣言を1行で書き、後者は宣言は複数行で書く。
前者は当然、後者とくらべてファイルサイズが小さくなるが、リーダビリティが高いとは言えない。
後者はリーダビリティは高いが、ファイルサイズが大きくなる。
私は折衷派だ。

 .selector { property :value； }
.selector {
	property :value；
	property :value；
	property :value；
	property :value；
} 

1行で宣言が完結する場合は1行で、複数行に渡る場合は、複数行で書く。
ファイルサイズも、リーダビリティも私にはちょうどいい。
私は個人の場合のプロジェクトでは上記の方法でCSSを書き、サーバにアップロードしているが、仕事ではほぼ欠かさず、CSSを圧縮している。
私はJavaScriptの開発を行うこともあるので、
Online YUI Compressorを使って、CSSを圧縮している。
作業用とアップロード用で別ファイルとしているが、
圧縮したCSSにリーダビリティを復活させる場合や、フォーマットを後回しにしてしまった場合の救済として、
Styleneat – CSS Organizer
を使用することもおすすめする。

7. CSSプロパティの短縮形を活用する

 selector {
	padding-top: 1px;
	padding-right: 2px;
	padding-bottom: 1px;
	padding-left: 1px;
} 

とした場合、

 selector {
	padding: 1px 2px 1px 1px;
} 

と短縮形を使うと1行にできる。
paddingやmargin、border-widthなどで、同じように短縮形を使える他、fontやbackgroundでも使える。
詳しい説明は別の機会にするが、覚えておいて損はない。

8. コメントを使って、CSSを組織化する

何度も繰り返すが、メンテナンス性のメインテーマは自分以外の人間が読み解くことができること。
CSSのコメントを利用し、CSSファイルを組織化することで、追加や削除、変更などが簡単にできるようにしておこう。
プロジェクトの規模やデザインに応じてコメントを変更する必要はあるが、

/*--------------------------------------------------------------------
	1. COMMON
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
	2. HEADER
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
	4. MAIN
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
	5. SIDEBAR
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
	6. FOOTER
--------------------------------------------------------------------*/

というように、セクションごとにコメントを書き込んでおく。

9. コメントを使って、CSSの目次を作成

8. と同じくコメントを活用して

 /*--------------------------------------------------------------------
	1. COMMON
	2. HEADER
	3. MAIN
	4. SIDEBAR
	5. FOOTER
--------------------------------------------------------------------*/ 

というように、目次を作成しておく、このようにしておくことで、あまりおすすめはしないが、1ファイルが数千行に及ぶような場合でも、
エディタの検索機能を使えば、目的の場所まですぐにたどり着ける。
もっともFirebugを活用すれば、何行目に宣言があるのか教えてくれるが、このように目次を作成し、8.のようにセクションごとにCSSを書く癖をつければ、無駄な記述も少なくなり、メンテナンス性も向上する。

10. ガイドラインを作成し、それに沿った記述を心がける

多くのプログラミング言語もそうであるように、HTML、CSSにも同じ結果を得るために、様々な方法が存在する。
今回紹介したティップスもその１部。
ガイドラインを作成し、プロジェクト全体で、あるいは自分自身でその遵守を心がける。
それ自体がもっとも有効なメンテナンス性向上の近道だろう。

No related posts.

 .clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix                { zoom: 1; } /* IE6 */
*:first-child+html .clearfix　  { zoom: 1; } /* IE7 */ 

Clearfixハックは、

    <div class="clear"></div>
    <br clear=both />

というように、余計なマークアップをしなくとも、floatをクリアできる。
数年前から有名なハックだが、もはやMac IEを使っているユーザはいないだろうということで、
Mac IE用の記述を除いたものを紹介。

The New Clearfix Method • Perishable Press

Example

HTML

<div class="parent clrearfix">
	<div class="children">float: left</div>
	<div class="children">flaot: left</div>
</div>

No related posts.