2005年01月28日
写真集に新フォーマット採用
今後公開していく写真集のフォーマットを、
１．ギャラリー
２．サムネイル
３．個別写真
４．撮影マップ
５．スライド(Fade)
６．スライド(Zoom)
７．スライド(Roll)
のようにしようと思います。
新フォーマットの作成方針は次のとおりです。
１．CSSを積極的に利用する。
CSSを利用した２段組レイアウトとし、バックの色（画像）を
切り替えけ可能としました。
作成した外部スタイルシートは７個で、
1) photo00.css(基本スタイル)
2) gallery01.css(白バック)
3) gallery02.css(灰バック)
4) gallery03.css(黒バック)
5) gallery04.css(青バック)
6) gallery05.css(緑バック)
7) gallery06.css(紺バック)
photo00.cssを、固定スタイルシート、
gallery01.css - gallery06.cssを優先スタイルシート or 代替スタイルシート
とします。 例えば、白バックをデフォルトで表示する場合、
gallery01.cssを優先スタイルシート、gallery02.css - gallery06.css
を代替スタイルシートとします。
この場合、htmlソースのhead部には次の記述を入れます。
<link rel="stylesheet" href="style/photo00.css" type="text/css" />
<link rel="stylesheet" href="style/gallery01.css" type="text/css" title="s1" />
<link rel="alternate stylesheet" href="style/gallery02.css" type="text/css" title="s2" />
<link rel="alternate stylesheet" href="style/gallery03.css" type="text/css" title="s3" />
<link rel="alternate stylesheet" href="style/gallery04.css" type="text/css" title="s4" />
<link rel="alternate stylesheet" href="style/gallery05.css" type="text/css" title="s5" />
<link rel="alternate stylesheet" href="style/gallery06.css" type="text/css" title="s6" />
今回の技は、基本スタイルシート(photo00.css)と、
バックの色固有のスタイルシート(gallery01.css - gallery06.css)を
分離したことです。
基本スタイルから変わった部分のみを、色固有のスタイルとして記述する
ことで、スタイルシート管理の手間を減らすことが出来ました。
htmlファイルの一部
<div id="center">
・
・
</div>
基本スタイルシート(photo00.css)の一部
#center {
float: left;
overflow: hidden;
width: 560px;
height: 1000px;
text-align: center;
}
バックの色固有のスタイルシート(gallery01.css)の一部
#center {
color: #000;
border-right: #ccc 1px solid;
background-image : url(../images/jpg/back01.jpg);
background-attachment: fixed;
background-position: 0% 0%;
background-repeat: no-repeat;
background-color:#FFFFFF;
}
のように記述することで、centerと云うidを持つ要素は、
基本スタイルに、固有スタイルが上書き（カスケード）
されます。マウス操作などのイベントにより固有スタイルを
変更することも可能です。（JavaScriptを実行）
ちなみに、「background-image : url」はスタイルシートの
場所からの相対パスになります。
今回使用した、スタイルシート、JavaScriptなどは、
http://yama-tabi.net/photo/ にあります。
２．xhtmlに準拠する。
htmlファイルの先頭に、
<?xml version="1.0" encoding="Shift_JIS" ?>
を記述し、xhtmlへの準拠を目指します。
完全に準拠したかは分かりませんが、拡張子をxmlにして、
IE6で読んだときエラーがでないレベルにはなっています。
３．Google AdSense広告を載せる。
出来るだけジャマにならないように、でも沢山クリックしてもらえる
ように、と云う矛盾する課題があるのですが、今回は右サイドバーに
スカイスクレイパー(120*600)タイプのバーナーを載せます。
４．スライドショーには、Flashを使用する。
Java Appletの使用も検討しましたが、
・初回起動に時間がかかる。
・動作が不安定
などの問題があるため、Java AppletをやめてFlashを
使用することにしました。
投稿者 山旅人 : 07:30 | コメント (0) | トラックバック
2005年01月14日
CSSによる３段組レイアウト
http://www.homelesspixel.de/remix/ のサイトを参考に、
「もっと、遙かな山旅を」のトップページをCSS(Cascading Style Sheets)
による３段組レイアウトに変更しました。
いままでの、もっと、遙かな山旅をのトップページはここです。
これで、2005年に向けての課題 の８番目の達成とします。
１．概要
「もっと、遙かな山旅を」のサイトをCSS(Cascading Style Sheets)
による３段組レイアウトに変更し、３つのスタイルシートを準備することで、
スタイルの選択を可能としました。
選択したスタイルはCookieに保存し次回起動時に有効になります。
サイト右上にある、「シンプル」、「冬のイメージ」、「春のイメージ」を
押してみて下さい。
もし旨くいかない場合は、次のページをご覧下さい。
１）シンプル
２）冬のイメージ
３）春のイメージ
２．技
CSSの適用は外部スタイルシートとし、一つの優先スタイルシートと、
２個の代替スタイルシートを作成しました。
１）シンプル用スタイルシート(2005-01.css) （優先）
２）冬のイメージ用スタイルシート(2005-02.css) （代替）
３）春のイメージ用スタイルシート(2005-03.css) （代替）
htmlソースのhead要素に次の記述を入れています。
<link rel="stylesheet" href="style/2005-01.css" type="text/css" title="s1" />
<link rel="alternate stylesheet" href="style/2005-02.css" type="text/css" title="s2" />
<link rel="alternate stylesheet" href="style/2005-03.css" type="text/css" title="s3" />
スタイルの選択とCookieの管理には次のJavaScriptを使用
１）styleswitcher.js
３．問題と今後の課題
１）xhtmlには準拠していません。
htmlソースの先頭に、<?xml version="1.0" encoding="Shift_JIS" ?>
を入れたかったのですが、表示が乱れるので止めました。
２）IE6とFirefox1.0でしか動作確認をしていません。
他のブラウザでは、ちゃんと表示出来ないかもしれません。
３）Cookieにより選択スタイルをおぼえているつもりなのですが、IE6では
キャッシュの関係か旨くいかないことがありました。
４）CSSが適応されないときの表示がぐちゃぐちゃです。
もう少し、まともに表示されるようにしたい。
５）今後、「夏のイメージ」と「秋のイメージ」も追加する予定です。
４．CSS(Cascading Style Sheets)を使ってみて
CSSを使ってみての感想を少し。
１）誰が考えたか知らないけど良くできてるなあ。
２）tableレイアウトより自由度が高い。
３）自由度が高い分、デザインのセンスが要求される。これは辛いなあ。
４）古いブラウザでの見え方が心配。でも全てのブラウザになんか対応できないよ。
５）今後はCSSを積極的に使っていくぞ。
６）皆さん、出来るだけ新しいブラウザを使うようにしましょう。
５．参考文献
１）スタイルシート辞典
２）CSS とはなんだろうか
３）CSS解説
４）W3C | Leading the Web to its Full Potential...
投稿者 山旅人 : 06:55 | コメント (1) | トラックバック
