質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.04%

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

受付中

回答 2

投稿

  • 評価
  • クリップ 5
  • VIEW 1,682

score 49

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


構成

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



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

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

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

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

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

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


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

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

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

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



  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • AknEp

    2015/04/23 01:15

    緊急ねぇ………

    キャンセル

  • lib

    2015/04/28 21:08

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

    キャンセル

回答 2

0

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

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

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

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

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

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

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

これはそれほど工夫しなくてもできると思います。divで組めば勝手になるかと。

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

iframeが中のコンテンツで自動判断するのはおそらく難しいと思います。
パラメーターで引き渡すのが現実的かと。javascriptか、場合によってはサーバーサイド
の仕組みかと。(PHPやRubyです)

がんばってください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

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

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

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

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る