はじめに…
誠に申し訳ありません。レスポンシブが不完全な状態です。
iosでbackground-attachment: fixed;とbackground-size: cover;を同時に使用するとbackground-size: cover;が効かなくなる不具合があり、スマートフォンでの閲覧が困難です。
サイトにリンクしているボタンがありますが、
PC環境での閲覧をお願い致します。
今回は、本来なら複数ページで構成するところを単一のページにして、メインの作品紹介ページを別ページにするサイト構成にしました。
単一のページ構成（OneColumn–ワンカラム）にすると下スクロールが長くなり単調なページになりがちですが、パララックスの効果とjQuery「skrollr」を使用してスクロール量に応じて文字列などに様々な変化を加えることで、下スクロールのストレスを少しは軽減できたのではないかと思います。
作品(Gallery page)を際立たせるためにベースカラーを黒(＃000000)をベースにして色調を極力抑えています。
background image 背景画像も敢えて下書きの荒い線の絵を白黒反転させて使用しています。
Top page section
Gallery page section
Gallery page
作品を紹介するこのサイトのメインコンテンツ。
jQuery「PhotoSwipe」を使用しています。アイコン化した画像をクリック(タッチ)すると画像が拡大され、マウスまたは指でスライドすると前後の画像に移動し、スマートフォンの場合はダブルタッチすると画像をビューポートを変えずにズームイン、ズームアウトすることができます。
下のボタンからPhotoSwipeを使用したGallery pageに移動します
Setting materials section
Setting materials page
Gallery page同様の構成になっています。
下のボタンからPhotoSwipeを使用したSetting materials pageに移動します
Profile page section
作者の自己紹介のページ。プロフィールは文章がメインなので背景画像はいれずに読みやすさを重視しました。
Contact page section
入力フォームのページ。このサイトはweb制作実習用の架空サイトなので実際には送信されません。
入力フォームを見やすくするため、背景画像にrgba(0,0,0,0.3)のフィルターをかけています。
sorry page section
お知らせ お詫びの追加ページ。残念です…
sorry page 2 section
リンク切れ お詫びの追加ページ。非常に残念です…
背景画像は Setting materials" web-site images "に掲載しています。 宜しければご覧ください。
申し訳ありません。レスポンシブが不完全です… PC環境での閲覧を強く推奨します。
下のバナー、ボタンから移動できます。
