2012年12月26日

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

asial

Pocket

こんにちは、鴨田です。

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

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

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

● デザイン

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

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

● HTML


<article>
  <h1><a href="#list">リストタイトル</a></h1>
  <ul>
    <li>
      <a href="#title1">
        <div>
          <a href="https://www.asial.co.jp4-3.png &mode=1" class="popupimg"><img src="https://www.asial.co.jp4-3.png"></a>
        </div>
        <p>記事タイトル１</p>
      </a>
    </li>
    <li>
      <a href="#title2">
        <div>
          <a href="https://www.asial.co.jp4-2.png &mode=1" class="popupimg"><img src="https://www.asial.co.jp4-2.png"></a>
        </div>
        <p>記事タイトル２</p>
      </a>
    </li>
    <li>
      <a href="#title3">
        <div>
          <a href="https://www.asial.co.jp2-3.png &mode=1" class="popupimg"><img src="https://www.asial.co.jp2-3.png"></a>
        </div>
        <p>記事タイトル３</p>
      </a>
    </li>
  </ul>
  <h2><a href="#list">一覧 &nbsp;>></a></h2>
</article>

ポイントは特にありませんが、画像の縦横中央配置を行うために、
img要素をdiv要素で囲っておいてください。

● CSS


* {
  margin: 0;
  padding: 0;
}
article {
  width: 320px;
}
article h1 {
  font-size: 16px;
  padding: 10px;
  background: #333;
}
article h1 a {
  color: #fff;
  text-decoration: none;
}
article li {
  border-bottom: 1px solid #9FA0A0;
  width: 100%;
}
article li a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}
article li a:before {
  content: ">";
  float: right;
  margin: 26px 0 0 0;
  font-size: 24px;
  font-weight: bold;
  color: #666;
}
article li a:hover {
  background: #eee;
}
article div {
  width: 100px;
  height: 75px;
  border: 1px solid #333;
  margin: 0 5px 0 0;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  background: #fff;
}
article div img {
  position: absolute;
  max-width: 100px;
  max-height: 75px;
}
article p {
  display: inline-block;
  font-size: 14px;
}
article h2 {
  text-align: right;
  margin: 10px 0;
}
article h2 a {
  padding: 0 10px;
  font-size: 14px;
  color: #333;
}

こちらも特には説明は要らないのですが、
各見出しの右側に「＞」を入れるために、
:before疑似要素で無理矢理突っ込んでいます。

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

● boxcenter.js

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

外部ファイルとしておいてもいいですし、
head内に直接書いてもいいと思います。


$.fn.boxCenter = function() {
  return this.each(function(i){
    var w = $(this).width();
    var h = $(this).height();
    var mtop = (h/2)*(-1);
    var mleft = (w/2)*(-1);
    $(this).css({"width": + w + "px" ,"height": + h + "px" , "top": "50%" , "left": "50%" , "margin-top": + mtop + "px" , "margin-left": + mleft+ 
"px"});
  });
};
$(window).bind("load",function(){
  $("article div img").boxCenter();
});