レスポンシブデザイン テンプレート
レスポンシブデザインを組み込んだホームページテンプレートをご用意しました。
以下、仕様の説明です。
まず無地の状態です。デフォルトではこの状態となります。
以下は、デモで色付けをして作成しています。
こちらの方で詳細を説明します。
トップページ(全体:作成イメージ)
このテンプレートの特徴としては、サークル内にトッピックを入れて表現します。
サークルは、画像ではなくHTML/CSSコードにて作成していますのでページビューは軽くなります。
●ページ左上:タイトル(会社名など) ●ページ右上:ナビゲーションメニュー
●ページ中央:サイトイメージ(画像など) ●ページ中央下:トピック表示(サークル内)
●ページ最下段:検索フォーム他コンテンツ表示可能
ナビゲーションメニュー
直接リンク(ページヘ飛ぶ)をワンクリックで移動します。普通のリンクです。
コンテンツに子ページがある場合は、クリックしてメニューを展開します。
パソコンの場合は、マウスオンでメニュー表示できますがスマートフォンなどのタッチパネルでは
うまく機能しないためワンクッション設けてクリックで展開するようにしています。
タッチパネルで展開しますので目的のページヘの誘導が容易になります。
子ページの数に合わせて背景の大きさが可変します。
コンテンツ
コンテンツの表示です。ページ上下はトップページと同じものです。
中央左にコンテンツ、右にサイドバーの構成です。
コンテンツはボリュームによって表示が異なりますのご了承下さい。
右サイドバーは、更新情報、ブログ更新情報を表示しています。
内容は、お客様のご希望で変えることができます。各ページの動線を築くことができます。
サイドバーの更新情報は、任意の件数を表示できます。トピックとして表示しますので、
簡潔な内容の表示となります。
各部マウスオンまたはタッチ(タッチパネル)でスクロールバーを表示します。
マウスならマウスホイールで上下、タッチなら指の上下でスライドします。
スクロールバーは非表示にもできますのでご希望により調整します。
レスポンシブデザインの特徴とも言えるスマートフォンなどの端末での見え方です。
ページが伸縮しますので以下のようになります。
下は、iphone5 をイメージしたページの見え方です。
表示は、トップページとコンテンツの見え方になります。
画面にマウスを当てるとスクロールバーが表示されますので上下にスライドできます。
ちなみに画面の中は、画像ですが本体等はCSSコードで作成しています。
縦方向 W 320px H 568px イメージ
横方向 W 568px H 320px イメージ
横方向 W 480px H 320px イメージ
お問い合わせフォームはこのように見えます。
また、各サークル部を四角(square)にすることも出来ます。
パソコン、スマートフォン等の見え方は、サークルが四角になります。
トップページ
コンテンツページ
メニュー、サイドバー
以上となります。
■作成・制作に関するお問い合わせは「お問い合わせフォーム」よりご連絡下さい。
■ホームページの作成・制作のご依頼は「オーダーフォーム」よりお申込み下さい。