【※緊急】PC用TOPページの構成に関して

下記画像の様なPC用のTOPページを作成したと考えております。

![構成]WIDTH:595

上記画像の様に作成するにあたって、
下記の条件を満たした状態で構築を行いたいと考えております。

【構築条件】
１．最上部とサイドにあるナビゲーションはスクロールしても常に表示されている状態

２．最上部にある背景画像はウィンドウサイズによってサイズが可変する。
（ ※尚且つ背景画像の部分をスライド式のものへ変更できる状態）

３．中央部分に配置する画像は数は複数枚（数は未定）で、
サイドのナビゲーションの横幅分はスペースを空け、
右側のスペースは開けない状態で、ウィンドウサイズによって画像が可変する状態。

４．基本的にはヘッダーとフッターは横幅100%表示、高さは内容によって可変する状態。

５．ヘッダーやフッター、中央部分に配置するバナーやコンテンツは、
ifreamタグで設置できる状態。

※ifreamタグで設置する場合は、その中のコンテンツのサイズによって可変する状態。

以上の条件で、PC用のTOPページを構築したいと考えております。

この様な場合は、どのようなHTMLやCSSを使用すると実現できるのでしょうか。

知識不足で思ったような表示ができません。。。

皆さん大変お忙しいかとは存じますが、
是非こちらの件に関して、
1からご教授頂けましたら幸いです。

AknEp

2015/04/22 16:15

緊急ねぇ………

lib

2015/04/28 12:08

緊急ほど怖いモノはないですね。緊急であれば、周りの方に聞いてみてはいかがでしょうか。おそらく助けてくれると思います。

行動規範の内容に同意します

回答2件

１．最上部とサイドにあるナビゲーションはスクロールしても常に表示されている状態

CSSのposition : fixed;その他topやleftを指定

２．最上部にある背景画像はウィンドウサイズによってサイズが可変する。
（ ※尚且つ背景画像の部分をスライド式のものへ変更できる状態）

ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。

よくわからないですが参考URLのようなものですか？
Pinterestのように画像をグリッド配置できるjQueryプラグインWookmark

４．基本的にはヘッダーとフッターは横幅100%表示、高さは内容によって可変する状態。
CSSの100%やautoなどを適切に指定すれば可能でしょう。
具体的に詳細な例を示せませんが……(その他詳細が不鮮明)

５．ヘッダーやフッター、中央部分に配置するバナーやコンテンツは、
ifreamタグで設置できる状態。
※ifreamタグで設置する場合は、その中のコンテンツのサイズによって可変する状態。

個人的にこれが一番面倒な印象。
以下URLであるような手法を用いることで実現できるかと。

iframeの高さを自動設定
 クロスドメインでiframeの高さを自動調節するjavascript

以上何か参考になれば。
コードを示しての回答を今回私はしませんが質問者の方のサイトがうまく仕上がることを願っております。

投稿2015/04/29 15:23

Cf_cwd

総合スコア730

１．最上部とサイドにあるナビゲーションはスクロールしても常に表示されている状態

スティッキーヘッダーと呼ばれる技法です。
http://liginc.co.jp/web/html-css/html/92474
あたりかな。

２．最上部にある背景画像はウィンドウサイズによってサイズが可変する。
（ ※尚且つ背景画像の部分をスライド式のものへ変更できる状態）

backgroundで組んでwidthを100%指定ですね。スライド式というのはごめんなさいわからなかったです。

３．中央部分に配置する画像は数は複数枚（数は未定）で、
サイドのナビゲーションの横幅分はスペースを空け、
右側のスペースは開けない状態で、ウィンドウサイズによって画像が可変する状態。

CSSのfloat:leftで組めばいいと思います。ウィンドウサイズによる画像の可変というのは、
数だけ決まっていて(たとえば、５まいづつとか）、サイズによって可変にするイメージですかね。
Javascriptでの実装必須ですが、ユーザーがウィンドウサイズを変える度に再計算がかかるので
チカチカしちゃうかもしれません。