サムネイルの一覧表示

ここでは画面全体にサムネイルなどの画像を大量に表示するレイアウトについて見ていきます。個々の画像はバラバラの大きさでも構いませんが、見た目を重視するのであれば画像のサイズを統一するか、画像の大きさはバラバラであってもその画像を入れる枠を作り、枠のサイズを統一しておくといいかと思います。

全体の構成としては下記のようになります。

ギャラリー型レイアウト

画像を格納するための領域を<div>要素で定義し、必要な数だけ追加していきます。

全体をヘッダー、コンテンツ領域、フッターの3つの分けるところまでは、『基本構成』を参照して下さい。下記のようになります。

body{
margin:0;
padding:0;
background-color:#dcdcdc;
}

#wrapper{
margin:0;
padding:0;
background-color:#ffffff;
}

#header{
margin:0;
padding:0;
background-color:#eee8aa;
}

#contents{
margin:0;
padding:0;
}

#footer{
margin:0;
padding:0;
background-color:#eee8aa;
}

次に画像を格納するための領域に関して定義します。この領域は幅(width)と高さ(height)を指定した<div>要素となります。複数回利用されるので属性はIDではなくCLASSで指定します。今回は<div class="pic">という要素にしてみます。

div.pic{
margin:10px;
padding:0;
width:120px;
height:80px;
border:1px solid #cccccc;
}

この時点で一度試してみましょう。

sample1-1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=UTF-8">

<title>レイアウトサンプル</title>

<link rel="stylesheet" href="./css/css1-1.css" type="text/css">

</head>
<body>

<div id="wrapper">

  <div id="header">

    <p>
    レイアウトサンプル
    </p>

  </div>

  <div id="contents">

    <p>
    写真一覧です。
    </p>

    <div class="pic"></div>
    <div class="pic"></div>
    <div class="pic"></div>

  </div>

  <div id="footer">

    <p>
    お問い合わせはxxxxまで
    </p>

  </div>

</div>

</body>
</html>

css1-1.css

@charset "Shift_Jis";

body{
margin:0;
padding:0;
background-color:#dcdcdc;
}

#wrapper{
margin:0;
padding:0;
background-color:#ffffff;
}

#header{
margin:0;
padding:0;
background-color:#eee8aa;
}

#contents{
margin:0;
padding:0;
}

div.pic{
margin:10px;
padding:0;
width:120px;
height:80px;
border:1px solid #cccccc;
}

#footer{
margin:0;
padding:0;
background-color:#eee8aa;
}

p{
margin:0;
padding:10px;
}

実際にブラウザで見てみると下記のようになります。

ギャラリー型レイアウト

現時点では何の設定もしていないので、画像表示用のボックスは追加した順に縦に並んでいます。これを追加した順に横に並ぶようにしてみましょう。

横に並ぶようにするには簡単です。先ほど作成した「pic」要素に「float:left」を追加するだけです。「float」属性を設定すると、左側に詰めて配置されるようになります。1番目のボックスの右側に2番目のボックスが追加されますが、2番目のボックスにも同じように「float:left」が設定されているので3番目のボックスも2番目のボックスの右側に追加されます。

「contents」要素の横幅に入りきらない場合には自動的に1番目のボックスの下に追加され、そして右側へ追加されていき、また下へずれるということが繰り返されます。その結果、追加した順に左から右へ並べて表示され、必要に応じて自動的に改行もされて追加されていきます。またブラウザのサイズを変更すれば1つの段に表示されるボックスも自動的に変更されます。

div.pic{
margin:10px;
padding:0;
float:left;
width:120px;
height:80px;
border:1px solid #cccccc;
}

また原因が分からないのですが、「pic」要素が含まれる「contents」要素に関して「width」プロパティが設定されていないと一部ブラウザで表示が崩れました。その為、「width:100%」を設定してあります。また「float」要素の解除も行う設定を行っておきます。

#contents{
width:100%;
margin:0;
padding:0;
}

#contents:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

以上で一通り完成です。下記のサンプルではサンプルなので同じ画像を使っていくつかの要素を追加して並べています。

sample1-2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=UTF-8">

<title>レイアウトサンプル</title>

<link rel="stylesheet" href="./css/css1-2.css" type="text/css">

</head>
<body>

<div id="wrapper">

  <div id="header">

    <p>
    レイアウトサンプル
    </p>

  </div>

  <div id="contents">

    <p>
    写真一覧です。
    </p>

    <div class="pic">
    <img src="./img/pic.png" alt="写真" width="110" height="70" border="0">
    </div>

    <div class="pic">
    <img src="./img/pic.png" alt="写真" width="110" height="70" border="0">
    </div>

    <div class="pic">
    <img src="./img/pic.png" alt="写真" width="110" height="70" border="0">
    </div>

    <div class="pic">
    <img src="./img/pic.png" alt="写真" width="110" height="70" border="0">
    </div>

    <div class="pic">
    <img src="./img/pic.png" alt="写真" width="110" height="70" border="0">
    </div>

  </div>

  <div id="footer">

    <p>
    お問い合わせはxxxxまで
    </p>

  </div>

</div>

</body>
</html>

css1-2.css

@charset "Shift_Jis";

body{
margin:0;
padding:0;
background-color:#dcdcdc;
}

#wrapper{
margin:0;
padding:0;
background-color:#ffffff;
}

#header{
margin:0;
padding:0;
background-color:#eee8aa;
}

#contents{
width:100%;
margin:0;
padding:0;
}

div.pic{
margin:10px;
padding:5px;
float:left;
width:110px;
height:70px;
border:1px solid #cccccc;
}

div.pic img{
display:block;
}

#contents:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

#footer{
margin:0;
padding:0;
background-color:#eee8aa;
}

p{
margin:0;
padding:10px;
}

実際にブラウザで見てみると下記のようになります。

ギャラリー型レイアウト

ブラウザのサイズを変更すると自動的に調整されて表示されます。

ギャラリー型レイアウト

このレイアウトの便利なところは、どんどん画像用のブロック要素を追加だけしていけば、自動的に整列して表示してくれることです。

( Written by Tatsuo Ikura+ )

Facebook Page