画面右側カラムに配置されたサムネイルのクリックで、該当する写真と説明文が縦方向にスライド移動して表示されるタイプのポートフォリオである。
　ナビゲーション画像（あるいはテキスト）のクリックで、画面が上下に移動するタイプのページ作りにも応用できるのではないかと思われる。

サンプル（DEMO）

　こちらのページに示した。

準備するもの

・幅1000px、高さ563pxの写真（ここでは15枚のjpgファイル）を、フォルダimg14に格納する
・上記写真を縮小した、幅89px、高さ50pxの写真ファイルを、フォルダimg14に格納する

本サンプル表示用HTML、CSS

上記DEMOページをブラウザで開き、ページソースでご覧ください

作成のポイント説明

・メイン表示用の写真と説明文のセット（この場合12セット）をDIV（#leftcolumn）内に、縦方向に配置する。
・上記セット写真のサムネイル写真を、画面右側のカラム（#navi_column）に縦配列で配置する。
・navi_columnは、position:fixed で画面右上に固定表示する。
・サムネイルクリックで、該当する写真・説明文がtransition設定により、上下にスライドしてヘッダーの下に表示される。
・#leftcolumnを格納しているDIV（#frame）の高さを固定（この場合900px）しておき、overflow:hidden の設定で、該当項目だけが表示されるようにする。