リストで画像と文字を縦中心に表示するjQueryプラグイン「jQuery List Vertical Align」

May 15 2012

リストで画像と文字を縦中心に表示するjQueryプラグイン「jQuery List Vertical Align」

しょうもないことがとっても気になる@poyosiです、こんにちは。

以下の画像のように、リストで画像と文字を縦中心に並べるのは1行だけなら簡単なのですが、複数行入るかもしれないとなると急にやっかいになるレイアウトです。

というわけで、どうしてもこのレイアウトを実装したいという超レアなケース向けに、簡単に設置することのできるプラグインを作りました。

こういうのを実装したい

  • もじ文字
  • もじ文字
    もじ文字

「jQuery List Vertical Align」プラグインのダウンロード

プラグインはこちらからダウンロードできます。

ファイルダウンロード

jQueryとプラグインを設置しよう

<head>タグの中にjQueryとプラグインを設置しましょう。



画像をCSSの背景で表示させたい場合

画像付きリストを作る場合、背景を<li>タグにbackground設定して表示させる方法があります。
それと同じようにHTMLとCSSを書きます。

HTML

  • もじ文字
  • もじ文字

CSS

ul {
	width: 150px; /* 幅は任意 */
}

ul li {
	background: url( "background.png" ) no-repeat left; /* 背景画像を指定します */
	padding-left: 60px; /* 背景画像の幅(+間隔をあけたいサイズ)を指定します */
	margin-bottom: 20px; /* 次の
  • までの間隔を指定します */ list-style: none; /* リスト先頭に付く「・」などを非表示にします */ }
  • JavaScript

    $(function(){
    	$('ul li').listvalign({
    		mode: 'css', // modeを「css」と指定します
    		bgImgHeight: 40 // 背景画像の高さを指定します
    	});
    });
    

    Sample

    • もじ文字
    • もじ文字
      もじ文字

    画像をimgタグで配置して表示させたい場合

    画像をCSSの背景ではなく<img>タグで表示させたい場合もあります。
    そんな時はこちらです。

    HTML

    • もじ文字
    • もじ文字

    CSS

    ul {
    	width: 150px; /* 幅は任意 */
    }
    
    ul li {
    	margin-bottom: 20px; /* 次の
  • までの間隔を指定します */ overflow: hidden; zoom: 1; /* IE対策用おなじみ魔法の言葉です */ list-style: none; /* リスト先頭に付く「・」などを非表示にします */ } ul li img { margin-right: 10px; /* 画像と文字の間隔を指定します */ float: left; } ul li span { float: left; display: block; width: 60px; /* 横幅は任意です */ }
  • JavaScript

    $(function(){
    	$('ul li').listvalign({
    		mode: 'tag' // modeを「tag」と指定します
    	});
    	// $('ul li').listvalign(); //空でもOK
    });
    

    Sample

    • もじ文字
    • もじ文字
      もじ文字

    最後に

    このプラグインはあまり需要はないと思いますが、自分が困ったことは他の人も困ることがあるはず…!そういう謎なことをアウトプットすることってすごい大事かなーって思います!

    リストに絞ってますが、ブロック要素であればなんのタグでも使えます。商用利用・個人利用ご自由にお使いください。

    これ、JavaScript使わなくてもCSSで簡単にできんじゃん?というのがあれば是非教えてください…!table-cellだとIE対応出来ないとおもったら、世の中便利なー。Hackで対応できそう…!公開5分で不要になったプラグイン(; ՞ٹ ՞;)☝

    最近のブラウザならtable-cellを使って、CSSのみで簡単ですが、IE6、7だとやっぱり面倒でした。

    おまけ:JavaScriptを使わずCSSのみで表示させたい

    <div>や<p>などのブロック要素でや連続しない<li>であればtable-cellで可能です。

    対応ブラウザ:Firefox 3.5+(3.5はバグあるらしい)、Google Chrome、Safari、IE8

    HTML

    • もじ文字

    CSS

    ul {
    	width: 150px; /* 幅は任意 */
    }
    
    ul li {
    	background: url( "background.png" ) no-repeat; /* 背景画像を指定します */
    	display: table-cell; /* table-cellを指定することによりvertical-alignが有効になります */
    	vertical-align: middle; /* 縦中心のmiddleを選択します */
    	height: 40px; /* 背景画像と同じ高さを入れます */
    	padding-left: 60px; /* 背景画像の幅(+間隔をあけたいサイズ)を指定します */
    	margin-bottom: 20px; /* 次の
  • までの間隔を指定します */ list-style: none; /* リスト先頭に付く「・」などを非表示にします */ }
  • Sample

    • もじ文字

    連続するとこうなるSample(table-cellなので当然tableぽくなる)

    • もじ文字
    • もじ文字
    • もじ文字

    こうなってくると面倒だ!という人はプラグインでリストを簡単に導入してみましょう。

    Hot Entries

    • Free Texture Download