基本編ではWindows環境にフォルダー、html、cssを作成し、メモ帳を使って編集して写真を表示する方法を説明しました。

一歩進んで自分で撮った写真を見栄え良くアルバムにして表示することを例にして説明します。

作例画像(click)

• ここで説明する作例が作例画像をclickすると別windowで表示されます。
• css、html、写真をフォルダーごとダウンロードしてみて下さい
  「flower album 」ダウンロード(zip)
  ブラウザでダウンロードし解凍されたフォルダーをマウスでドラッグしてデスクトップに持ってきます。

ダウンロードしたフォルダー

• htmlは3個、cssは2種類作成しフォルダーcssにまとめました。
• フォルダーcssに、基本のスタイルを定義するbase.cssと写真の見せ方のスタイルを設定するphoto.cssを入れてあります。
• トップページのindex.html 、各ページ yakushi.html 、ikuta.html とそれぞれの写真を入れるフォルダーを作成
• daycount フォルダーはアクセスカウンターが入っています。Kent Webからお借りしました。今回は使いません。
• 3つのhtmlのlinkには次の2行を記述
  <link rel="stylesheet" type="text/css" href="css/base.css">
  <link rel="stylesheet" type="text/css" href="css/photo.css">

ダウンロードしたファイルをメモ帳で開きながら以下の説明を見て下さい。

• トップページのindex.htmlのフレームをwidth、height、marginなどで設定する
• 各フレームにborder:1px solid red; のように境界線を表示して調整する。終わったら border-widthを0px にしておく。後で使える　border:0px solid red;

  　div_root

　div_header

　div_top_left { float:left;}

　div_top_right{ float:right;}

　div_trailer

• 要素を横に並べる場合は 回り込み のプロパティ float を使う。これがないと縦に並ぶ。
  参照)float
• 回り込みは解除するまで続くので、clearで回り込みの終わりを指定する。clearは次の要素で指定してもよいが、おすすめは<div style="clear:both;"></div>。bothはrightとleftの両方を解除。
• marginで要素の余白を設定。
  例　margin:5px 10px 5px 20px; 上、右、下、左の余白。
  真ん中にするには 左と右をautoにする。margin:5px auto 5px auto;
  参照)marginとpadding

• トップページのヘッダーにメニューリストを作成し各ページのhtmlへリンクさせる。自分のページは色を変えてリンクなし。
  <ul id="menuul">
  <li id="menu1">Top</li>
  <li id="menu"><a href="yakushi.html">薬師池公園</a></li>
  <li id="menu"><a href="ikuta.html">生田緑地ばら苑</a></li>
  </ul>
• 繰り返し表示はリストを使う。
  参考) list-style-type
• 拡張を考えておく

• 各ページのヘッダー部分は共通のものを作り、メニューリストだけを変える。
• トップページからメニューリストをクリックし各アルバムページへリンクさせる。
  　　 <li id="menu"><a href="yakushi.html">薬師池公園</a></li>
  　　 <li id="menu"><a href="ikuta.html">生田緑地ばら苑</a></li>
• 作例の写真のスタイルはphoto.cssの #div_photo1 に設定してある。

次から一般的なサンプルを紹介します。

オオヤマレンゲ(薬師池公園)

①中央に表示
• 画像の位置の設定はmarginで、上 右 下 左の順に指定、右と左にautoを指定すると中央に位置。
  img {margin:20px auto 20px auto;}。margin:auto;でもよい。

オオヤマレンゲ(薬師池公園)

②縁どり
• 画像に padding と background-color を指定
  img {padding:10px;
  background-color:lavender;
  margin:20px auto 20px auto;}

オオヤマレンゲ(薬師池公園)

③影を付けて立体的に見せる
• 画像に box-shadow を指定
  img {padding:10px;
  background-color:lavender;
  margin:20px auto 20px auto;
  box-shadow:1px 1px 10px white;}

オオヤマレンゲ(薬師池公園)

④縁に丸みをつける
• 画像に border-radius を指定
  img {border-radius:8px;
  padding:10px;
  background-color:lavender;
  margin:20px auto 20px auto;
  box-shadow:1px 1px 5px black;}

オオヤマレンゲ(薬師池公園)

⑤背景を変える
• 画像の背景を指定。色だけではなく画像素材も使える。
  #div_main {background:url("../images/wood7s3.jpg");..................}

オオヤマレンゲ(薬師池公園)

⑥額縁を変える
• 画像のフレームにpadding:80px;background:url('images/bg_h_gra10.gif'); を指定
  #div_photo1 {padding:80px;background:url("../images/bg_h_gra10.gif");..................}

オオヤマレンゲ(薬師池公園)

⑦実際のアルバム風にする
• 背景素材をアルバムの台紙とワイヤーの2重に指定する。
• ワイヤー部分は背景素材を使う。
  普通背景素材は小さいものを縦(y軸)と横(x軸)に繰り返して(repeat)して使うがこの場合は縦(y軸)だけを繰り返す(repeat)
• cssの設定
  #div_root_bk1 {
  margin:10px auto 10px auto;
  background:url("parts/wallbk_01.gif");
  box-shadow:2px 2px 5px black;
  border-radius:5px;
  }
  #div_root_bk2 {
  background:url("parts/bk-wire_03.png");
  background-repeat:repeat-y;
  }
• htmlの設定
  <div id="div_root_bk1">
  <div id="div_root_bk2">
  <img src=.....

オオヤマレンゲ(薬師池公園)

⑧左右の枠を太く
• 携帯電話風の枠風
  左右の枠の大きさ border-width を大きく
  枠の角の丸みborder-radius を変える
• cssの設定
  #div_frameg {
  width:30%;
  float:left;
  border-style:solid;
  border-color:silver;
  border-width:2px 50px 2px 50px;
  text-align:center;
  margin:50px auto 50px auto;
  padding:0px;
  border-radius:20px 20px 20px 20px / 20px 20px 20px 20px;
  box-shadow:2px 2px 10px black;
  }

写真を表示するにも様々な仕様があり、額縁や背景など変えてみると結構楽しめます。

沢山の無料素材が提供されています。ホームページ素材などで検索してみて下さい。