Sample | Simple Web Design

レシポンシブデザイン対応の一般的な企業やショップの情報サイトで、実際に運用しています。
様々な機能を実装していますが、ご希望に応じてカスタマイズや削除・追加ができます。

ブラウジングに最低限必要な機能や動作は CSS と PHP で実装していますので、Javascript が利用できない環境でも正常に動作します。
Javascript が利用可能な環境ではより快適な機能がご利用頂けます。

ご要望があれば、更新履歴やイベント情報などを CMS 化 (ブラウザ上から管理) することもできます。

レイアウトはブログに多いメインとサイドがヘッダーの下に横に並んでいる構成です。
一般的に浸透しているレイアウトなので、ユーザに分かりやすいサイトとなります。

TOP ページにはスライドショーを設置しており、ファーストビュー (ページを開いてスクロールせずに見える範囲) に複数の情報を表示できます。スライドは時間で自動的に切り替わりますが、ユーザの操作で前のスライドへ戻ったり次のスライドへ進めることもできます。

ヘッダ部分にあるメニューバーはスクロールに応じて常に最上部に表示されます。
これによりスクロールした状態でも他のページへスムーズに移動することができます。
※スクロール追従機能は Javascript により実装しているので Javascript が無効の環境では追従しません。

また、メニューバーにはカテゴリを表示してあり、マウスを近付けるとカテゴリ内のページをプルダウンして表示します。
プルダウン機能は、CSS のみで実装しているので Javascript が無効でも動作します。

右上に虫眼鏡アイコンがある画像は、クリックすると画面いっぱいに拡大表示されます。
画面サイズが画像サイズよりも大きい場合は、画像のオリジナルサイズで表示されます。

また、複数の画像をグループ化することができ拡大した状態でグループ内の画像を切り替えられます。

画像の拡大機能は、Javascript によるので無効の場合は拡大画像へのリンクが動作します。

上記以外にも、以下の機能を実装しています。
是非アクセスしてお試し下さい。