Asial Blog

Recruit! Asialで一緒に働きませんか?

決定版?! スマホページ用のリストレイアウトHTMLテンプレートを書いてみた

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
HTML5
CSS3
jQuery
こんにちは、鴨田です。

年の瀬ですね。
年をとる毎に一年があっという間に過ぎてしまうので、
もう今年も終わりかと嘆く日々です。

ということで、個人的には今年最後のブログとなります。

スマホサイトを作っていると、
見出しリストの作り方というのが、大分テンプレート化するので、
今日は自分メモも兼ねて、リストテンプレートを作りたいと思います。



● デザイン




こういう感じのいかにもなリストを作ります。
ポイントは特にありませんが、せっかくなので画像はどんなサイズが来ても対応できるように、
縦横中央揃えに出来るjQueryライブラリを使います。

画面サイズは、横320pxとします。
そろそろ640pxくらいにしておきたい気がするのですが、
広告が320px対応が多かったりしますので。



● HTML


  1. <article>
  2.   <h1><a href="#list">リストタイトル</a></h1>
  3.   <ul>
  4.     <li>
  5.       <a href="#title1">
  6.         <div>
  7.           <img src="4-3.png" />
  8.         </div>
  9.         <p>記事タイトル1</p>
  10.       </a>
  11.     </li>
  12.     <li>
  13.       <a href="#title2">
  14.         <div>
  15.           <img src="4-2.png" />
  16.         </div>
  17.         <p>記事タイトル2</p>
  18.       </a>
  19.     </li>
  20.     <li>
  21.       <a href="#title3">
  22.         <div>
  23.           <img src="2-3.png" />
  24.         </div>
  25.         <p>記事タイトル3</p>
  26.       </a>
  27.     </li>
  28.   </ul>
  29.   <h2><a href="#list">一覧&nbsp;&gt;&gt;</a></h2>
  30. </article>
ポイントは特にありませんが、画像の縦横中央配置を行うために、
img要素をdiv要素で囲っておいてください。



● CSS


  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5.  
  6. article {
  7.   width: 320px;
  8. }
  9.  
  10. article h1 {
  11.   font-size: 16px;
  12.   padding: 10px;
  13.   background: #333;
  14. }
  15.  
  16. article h1 a {
  17.   color: #fff;
  18.   text-decoration: none;
  19. }
  20.  
  21. article li {
  22.   border-bottom: 1px solid #9FA0A0;
  23.   width: 100%;
  24. }
  25.  
  26. article li a {
  27.   display: block;
  28.   padding: 10px;
  29.   color: #333;
  30.   text-decoration: none;
  31. }
  32.  
  33. article li a:before {
  34.   content: ">";
  35.   float: right;
  36.   margin: 26px 0 0 0;
  37.   font-size: 24px;
  38.   font-weight: bold;
  39.   color: #666;
  40. }
  41.  
  42. article li a:hover {
  43.   background: #eee;
  44. }
  45.  
  46. article div {
  47.   width: 100px;
  48.   height: 75px;
  49.   border: 1px solid #333;
  50.   margin: 0 5px 0 0;
  51.   position: relative;
  52.   display: inline-block;
  53.   vertical-align: middle;
  54.   background: #fff;
  55. }
  56.  
  57. article div img {
  58.   position: absolute;
  59.   max-width: 100px;
  60.   max-height: 75px;
  61. }
  62.  
  63. article p {
  64.   display: inline-block;
  65.   font-size: 14px;
  66. }
  67.  
  68. article h2 {
  69.   text-align: right;
  70.   margin: 10px 0;
  71. }
  72.  
  73. article h2 a {
  74.   padding: 0 10px;
  75.   font-size: 14px;
  76.   color: #333;
  77. }
こちらも特には説明は要らないのですが、
各見出しの右側に「>」を入れるために、
:before疑似要素で無理矢理突っ込んでいます。

本当は背景画像でやる方が細かい画像調整ができるはずです。
画像を使うのが面倒な場合、上記方法でも可能です。



● boxcenter.js


画像の縦横中央配置に関しては、boxcenter.jsを使用します。
詳しい説明は下記を参照してください。
http://labs.cybridge.jp/2011/05/boxcenter.html

外部ファイルとしておいてもいいですし、
head内に直接書いてもいいと思います。
  1. $.fn.boxCenter = function() {
  2.   return this.each(function(i){
  3.     var w = $(this).width();
  4.     var h = $(this).height();
  5.     var mtop = (h/2)*(-1);
  6.     var mleft = (w/2)*(-1);
  7.     $(this).css({"width": + w + "px" ,"height": + h + "px" , "top": "50%" , "left": "50%" , "margin-top": + mtop + "px" , "margin-left": + mleft+ 
  8. "px"});
  9.   });
  10. };
  11. $(window).bind("load",function(){
  12.   $("article div img").boxCenter();
  13. });
jQueryの読み込みは忘れないようにしてください。



● デモ





デモページ



こちら必要に応じて、いろいろとカスタマイズしてもらえたらと思います。
来年もよろしくお願いいたします。