18歳未満の方は入場をご遠慮下さい。
html式写真アルバムの見本
撮影した画像をまとめて賞翫する方法は２つあります。
印刷する
プリントして台紙に収納する。 |
お金が多少かかる。写真が経年劣化する。
アルバムの冊数が大量になることが多々あり、重くて、収納棚が変形する。
相続人が処分に困る。──老齢者はアルバムの断捨離に意を尽くすべきだ。 |
印刷しない
何かのソフトによりサムネイルで眺める。 |
保存フォルダにあるものがサムネイル一覧に全部取り上げられて煩雑だ。
サムネイルはサイズが小さいから、クリックして拡大する必要がある。
コメント、備忘事項が入れにくい。
縦横の配置が不適なことがある。 |
収めた画像データは溜めっ放しになることが多いでしょう。たまに眺めると同じような写真が多くてかなわないことがあります。
写真撮影が上手くなるコツは、一つの撮影機会で工夫心を満載にして沢山シャッターを押すことです。
だから、シャッターを切ることが控えめな貧乏根性の人は上手くならないし、シャッターを押すのが遠慮がちになるハメ撮りでは上手くならない。
でも、折角の画像データを削除するのはなかなかやりにくいです。かといって、気に入った画像だけまとめて見られるよう、保管フォルダを変えるのはやりたくないものです。
パソコンで写真を選別して眺められたら、見やすいし、嵩張らないです。コメントなんかが書き込めると更に結構です。
保存画像から代表的なものを抜き出してアルバム化するのは良い考えでしょう。取捨選択が自由です。
1920x1080 ぐらいのディスプレイ装置ならテーマ毎にＰＣ上のアルバムを拵えることをお勧めします。
ブラウザで観られるようにこれを作れば、コメントが入れられて、配置が自由にできて、ブラウザのサイズを変えることにより見るサイズをいかようにでもできるのが結構です。
そのためにはブラウザで観るhtml記述、特に、テーブル表示のやり方を知る必要があります。
htmlでの<TABLE>の基本は次です。
<TABLE>
<TR> ↑
<TD>〜/TD> │ (行１の記述)
<TD>〜/TD> │ (中に列が二つ)
</TR> ↓
<TR>
<TD>〜/TD>
<TD>〜/TD>
</TR>
</TABLE>
やり方は、次の文章を（解説文を除いて）コピーしてメモ帳などに入れ、XXXXXX.html の名称で保存して下さい。XXXXXXは任意の名前です。
コピーは htmlコピー元 からすると良いです。
例えば、ＰＣで
ピクチャ───┬photo1（写真収納フォルダ）
（先頭フォルダ）│
├photo2
│
├photo3
│
の構成の場合、フォルダ（ピクチャ）にXXXXXX.htmlを置きます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="ja">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<META NAME="viewport" CONTENT="width=device-width, initial-scale=1">
この６行はHtml記述の決まりと思ってそのままま使用してください。
私は意味をよく説明できません。
なお、<HEAD>から</HEAD>までが文書のヘッダー要素の記述です。
<STYLE>
<!-- td{ vertical-align: top; border:2px solid #f00000 }
img { margin-top:6pt; }-->
</STYLE>
この４行はページのスタイルを定義する記述です。
<STYLE>要素は<HEAD>セクションの中に記述される決まりです。
<TD>の属性として（中身の上揃え）と（内罫線／2px実線で赤色）を定義しています。
テーブル内の上揃えが不要であれば vertical-align: top; を消します。（中揃えになります）
更に、imgの属性として 画像の上に6ptの余白 を指示しています。
<TITLE>ＸＸＸＸ</TITLE>──ブラウザの上端のタブに表示するタイトル
</HEAD>
赤字はタイトルとして適当なものを入れて下さい。
</HEAD>でヘッダー要素の記述が終わりです。
<BODY STYLE="color:#000000;background-color:#ffffff;font-size:12pt;line-height:22pt;margin-left:4mm">
<BODY>記述の始まりです。締めの</BODY>は末尾の１つ前にあります。
ここでは 文字色：黒、背景色：白、文字サイズ：12pt、行の高さ：22pt、左の余白：4mmを指定しています。
<DIV STYLE="margin-bottom:19pt;text-align:center;font-size:16pt;color:#3333cc">
<B>ＸＸＸＸ</B>──ブラウザに表示する中身のタイトル
</DIV>
この３行でタイトルの表示書式を定めています。
好きなように変更してください。
指定の並び：下側の余白:19pt、中央揃えの指示、文字サイズ16pt、文字色：青系
<B>は太字の指示。
<TABLE STYLE="width:100%;margin-top:16pt;background-color:#ffffff;border:2px solid #f00000;font-size:10.5pt;line-height:15pt;border-collapse:collapse" CELLPADDING="2">
テーブルの表示書式を定めています。
width:100% はテーブルの幅をブラウザの幅一杯に使用する指示で、ブラウザの幅が狭まればこれに従って幅が動きます。
上の余白：16pt、背景色：白、外枠：2px 実線 赤色、文字サイズ：10.5pt 等
border-collapse:collapseは枠線の１本化 セルの内側余白：2
<TR>
<TH COLSPAN="2" STYLE="height:30px;color:#ff0000;font-size:12pt">説明書き</TH>
</TR>
<TR>〜</TR>は表の行部分（横方向）を指定するタグです。
<TR>〜</TR>の中に<TD>〜</TD>を組み込むのですが、最初に<TH>〜</TH>により全体の説明欄（横方向）を入れます。
TH COLSPAN="2"：左右のセルを統合して一つにして表示、枠自体の縦幅：30px、文字色：赤 等
<TH>は見出しに使い、中身のテキストを太字で中央揃えで表示する機能があります。
<TH COLSPAN="2">〜</TH> の代わりに
<TH>〜</TH>
<TH>〜</TH>
と２列化すれば、左右に見出しを設けることになります。
<TR>
<TD WIDTH="50%">yyyy/mm/dd<BR>（←撮影日を記す場合）
撮影場所等（←コメントを記す場合）
<DIV ALIGN="center"><IMG SRC="photo1/画像1.jpg" WIDTH="72%"></DIV></TD>
<TD WIDTH="50%">yyyy/mm/dd<BR>
撮影場所等
<IMG SRC="photo1/画像2.jpg" WIDTH="100%"></TD>
</TR>
<TD>〜</TD>で一つのセルを構成します。
ここではセルが左右に並ぶのでそれぞれWIDTH="50%"を指定します。これ以降の指示は不要です。
yyyy/mm/dd<BR>の<BR>は改行の指示です。
画像1 は説明文が左揃えで、画像は縦長につき <DIV>〜</DIV>タグで書式を指定します。
ALIGN="center"；中央揃えとし、更に、WIDTH="72%"と表示幅の縮小を指示する。
画像2 は横長の画像につきWIDTH="100%"と表示幅を広げます。
WIDTH="72%"とWIDTH="100%"の幅の指示がポイントです。
WIDTH="210px"のような固定長の指示でないことに注目してください。
<TD>yyyy/mm/dd<BR>
撮影場所等
<IMG SRC="photo1/画像3.jpg" WIDTH="100%"></TD>
<TD>yyyy/mm/dd<BR>
撮影場所等
<DIV ALIGN="center"><IMG SRC="photo1/画像4.jpg" WIDTH="72%"></DIV></TD>（←縦長の写真は WIDTH="72%"と表示幅を狭くする）
</TR>
<TR>
<TD>yyyy/mm/dd<BR>
撮影場所等
<IMG SRC="photo1/画像5.jpg" WIDTH="100%"></TD>
<TD>yyyy/mm/dd<BR>
撮影場所等
<IMG SRC="photo1/画像6.jpg" WIDTH="100%"></TD>
</TR>
</TABLE>
</TABLE>でもって<TABLE>を締める。
</BODY>
</HTML>
</BODY>でもって<BODY>を締める。
</HTML>でもって<HTML>を締める。
<IMG SRC="photo1/画像1.jpg"のフォルダ「photo1」とファイル名「画像1.jpg」は適切なものを入れて下さい。
<TR> </TR> で囲まれた文をコピーして追加すればアルバムに採用する画像はどんどん増やせます。
色を変えたいときは『color タグ』で検索して調べて下さい。
画像の縦横配置の問題についてはhtmlの画像表示のトラブルを解決を参考にして下さい。
このHTML文書は Google Chromeなどのブラウザで立ち上げます。ブラウザ画面の横幅の変化に応じて画像の大きさが変わります。
特徴は、枠の中に説明書きを入れた場合の写真の配置です。
嬢の名前、撮影年月、撮影場所
初会の状況、初撮影の思い出
|
嬢の名前、撮影年月、撮影場所
初のＡＦの状況、その他思い出
|
(1) 工夫なくテーブルを作れば、左の写真のように中寄せになります。
これを上寄せにするのが
<STYLE>
<!-- td{ vertical-align: top; border:2px solid #f00000 }
img { margin-top:6pt; } -->
</STYLE>
の工夫で、ここのvertical-align: top によりセルの中身を上詰めでき、内罫線も完成します。
(2) 特に工夫なくテーブルを作れば、写真2は左寄せになります。
これを中央に配置するには青色の指示が必要です。
<DIV ALIGN="center"><IMG SRC="photo1/画像1.jpg"
WIDTH="72%">
</DIV>
WIDTH="72%"の指示がなければ画像はセル幅に広がります。
(3) <STYLE>で『margin-top:6pt;』の指示がなければ、説明文と写真が密着して表示されます。
写真の下にもコメントを入れたいときは下にも僅かな余白が入れたくなるので次のようにします。
【方法１】
縦長写真の場合
<DIV ALIGN="center">
<IMG SRC="photo1/画像2.jpg" WIDTH="72%" VSPACE="6"></DIV></TD>
VSPACE="6" を入れる。→これにより上下に余白が入る。
横長写真の場合
<IMG SRC="photo1/画像1.jpg" WIDTH="100%" VSPACE="6"></TD>
※全ての画像に
VSPACE="6"を入れるなら、<STYLE>で『img { margin-top:6pt;』は不要となる。
縦長写真の場合
<DIV STYLE="text-align:center;margin-bottom:6pt">
<IMG SRC="photo1/画像2.jpg" WIDTH="72%"></DIV>
<DIV ALIGN="center">を<DIV STYLE="text-align:center;margin-bottom:6pt">に換えます。
横長写真の場合
<DIV STYLE="margin-bottom:6pt">
<IMG SRC="photo1/画像1.jpg" WIDTH="100%"></DIV>
<STYLE>
<!-- td{ vertical-align: top; border:2px solid #f00000 }
img { margin-top:6pt; margin-bottom:6pt;} -->
</STYLE>
(4) <STYLE>で内罫線のあり方を定めると、そのページのテーブルが全て同じ書式になります。
<STYLE>
<!-- td{ vertical-align: top; border:2px solid #f00000: } -->
</STYLE>
これを避けるには次のやり方があります。
<STYLE>
<!-- table.green td { border:2px solid #00aa00: top; } -->
</STYLE>
内罫線／2px実線で緑色
<STYLE>
<!-- table.red td { border:1px solid #ff0000: top; } -->
</STYLE>
内罫線／1px実線で赤色
前のは <TABLE CLASS="green" STYLE="width:100%;〜
後のは <TABLE CLASS="red" STYLE="width:100%;〜
と指示して使い分けます。
<TABLE>全体及び中のセルの幅を相対指定にしているので、画像のサイズが多種であっても何も指定せずに填め込めます。縦長か横長かだけを意識すれば良いです。
ここに記述したhtml文から作ったアルバムが htmlコピー元 の後半にあります。
ブラウザで眺めるこのアルバムは、参詣した神社仏閣、子供の成長記録、女遍歴した相手の記録など纏めると素晴らしく輝くものになります。作りはじめるとコメントを入れるのが楽しいです。これをやればもう台紙利用のアルバムなんて要らなくなります。
参考：制作例 奈良探訪
これはテーブルが３列構成です。
中身はブラウザのサイズによって小さくできるが、一定サイズより大きくはなりません。
（千戸拾倍 著）