HPの背景の画像を制作したのですが、
図のようにA、Bと言うページを作った際にコンテンツの長さが異なった場合は
背景の長さも変更しなくてはいけないと思うのですが、どのようにして良いか解りません。
どのようにhtmlやCSSを設定すればよいでしょうか?

「ホームページの背景設定」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (4件)

すごくざっくりしたソースですが、下記を参考に作ってみました。


※ツイッターの背景をちょっと拝借してますが。

○ポイント1
コンテンツ内容が少なくても、フッターの背景色を延ばしたい
→bodyに背景色を入れる

○ポイント2
コンテンツ上部に背景を入れたい
→1つ目のdivに上部の背景を「top」で入れる

○ポイント3
コンテンツの下部に背景を入れたい
→1つ目のdivの中に、下部の背景を「bottom」で入れる

※注意事項
上下の背景が重なるくらいコンテンツ内容が少ないと、
上部の背景は、下部の背景にかぶってしまいます。
なので、かぶらない程度にコンテンツの高さ、最小値を
決めていれておくとよいと思います。
例)
#Container-inner {
background: url(http://twitter.com/images/themes/theme1/bg.png) left bottom repeat-x;
_height: 500px; /*IE6対策*/
min-height: 500px;
}

【ソースサンプル】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<style type="text/css">
body {
background: #ddd;
margin: 0;
padding: 0;
}
h1 {
margin: 0;
padding: 0;
}

#Container {
background: url(http://a3.twimg.com/a/1302214109/images/themes/t …) left top repeat-x #0099B9;
}
#Container-inner {
background: url(http://twitter.com/images/themes/theme1/bg.png) left bottom repeat-x;
}

#Footer {
margin: 20px;
height: 40px;
}

</style>
</head>

<body>

<!-- ##### Container Start ##### -->
<div id="Container">
<!-- ##### Container-inner Start ##### -->
<div id="Container-inner">


<h1>サンプルHTML集</h1>
<pre>Contents-inner

























ああああ
</pre>
</div>
<!-- ##### /Container-inner End ##### -->
</div>
<!-- ##### /Container End ##### -->

<!-- ##### Footer Start ##### -->
<div id="Footer">
Footer
</div>
<!-- ##### /Footer End ##### -->
</body>
</html>
    • good
    • 0

css


------------------
body{margin:0;padding:0;background:yellow url(01.jpg) no-repeat top center;}
div#contents{margin:50px auto 0;width:500px;background:url(02.jpg) no-repeat bottom center;}
div#footer{margin:0;background-image:none;background:#999999; width:100%;border:none;text-align:center;}
div div{margin:0 auto 50px;padding:2em;border:2px solid #999999;height:300px;}

html
------------------
<body>
<div id="contents">
<div>コンテンツ</div>
</div>
<div id="footer">フッター</div>
</body>

背景の長さをページごとに変えていたら大変です。1枚の画像では伸び縮みしませんので、画像を2つにします。

が、cssでは1つのボックスに1つの背景画像しか置けません。この場合、bodyに上の背景と全体の色を、div contentsでコンテンツ全体を囲むことで2枚目の背景画像を表示し、その下にフッターを配置します。height:300px;は本来不要ですが、1つ目の画像と2つ目の画像の高さ以上の高さがdivにないと画像が表示されないので、入れました。
    • good
    • 0

NO.1さんの言う通りですが、


真ん中部分が画像が無いので、
そこは伸ばしても問題無いようですね。(伸ばすと言うより色で表現)
その条件下なら、
現在1枚の画像を2枚にスライスして上下に配置するって事。
その2枚の上下画像をBODYまたはDIVに上部の背景画像を設置し、
直下のDIVを追加し下部の背景画像を設置。
※ px部分の数値は適当に微調整
※ 当然、画像は透過の方が色の切れ目が一切無くなる。
-----------------

/* CSS */
#AAA{
background: yellow url(AAA.gif) no-repeat 50% 0; padding: 80px 0;
}
#BBB{
background: url(BBB.gif) no-repeat 50% 100%;
}
#AAA,#footer{ width:600px; margin:0 auto;}

<!-- HTML -->
<div id="AAA">
<div id="BBB">
<div style="margin:0 auto;width:400px;border:4px solid gray;">
<p>内容</p>
</div>
<div>
<div>
<div id="footer"><p>footer</p></div>
「ホームページの背景設定」の回答画像2
    • good
    • 0

普通背景を固定すればコンテンツが縦に長くなってもその分スクロールバーが出るので


背景を長くさせる必要ないし意味がありません。

この添付図を見ると背景の真ん中部分だけ間延びさせるように見ますが、
そんなこと何をどうやっても出来ません。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q携帯専用ホームページの作り方

携帯専用ホームページの作り方をご存知の方は教えてください。
無料レンタルホームページ(ポケスペ・魔法のiらんどなど)ではなく、全て自分で作る携帯専用ホームページの作り方を教えてください。あと、その場合費用はかかるのでしょうか?
よろしくお願い致します。

Aベストアンサー

PC向けサイトをHTMLタグで記述して、制作することができますか?
でしたら、その知識を利用して、iモード向けのサイトを作成すれば良いと思います。
個人で手打ち制作でキャリア別振り分けは、作る時は良くても(結構手間がかかりますが)更新が面倒になります。
個人運営の携帯サイトなら、プロバイダまたはレンタルサーバーなどでCGIが使えない場合は、掲示板などはレンタルで十分だと思います。
レンタルサーバーを借りるなら、そのレンタル料が費用としてかかります。
無料スペースの場合は、広告表示の問題があるため、携帯電話に対応しているか、どういう条件になっているかなどを確認してください。
(iswebなどではiフォルダなどにアップロードする等)

最近の携帯電話はともかく、旧来のものでは、表示できるページのサイズに制限があります。
サイトを制作する前に、ターゲット(利用者の年齢や利用携帯機種など)をきちんと設定した方が良いと思います。
携帯電話の機種によって、使えるタグや画像ファイルなどが異なってきます。
PCに比べて動向など変化しやすいせいもあると思いますが、携帯向けサイトのハウツー本はあるようでありません。
以前買ったことがありますが、あっという間に時代遅れになった上、大雑把な考え方は参考になりそうですが、技術やTIPSとしてはあまり参考になりません。
携帯向けのCGIを無料配布しているサイトがいくつかありますが、PC向けのCGIを設置したことのない又は不慣れな場合は、カウンタ・掲示板などの利用はレンタルをおすすめします。
なお、これらは個人運営のサイトのつもりで、書いています。

「しらぎくさいと>携帯電話向けコンテンツの書き方」
http://www.marguerite-site.com/Nihongo/HowToMakeYourWeb/Mobile/index.html

サイト制作に慣れた人ならば、また別のサービスをおすすめしますが、無料で、自作CGIなどの設置をしない場合には「FC2WEB」などが良いかもしれません。

[FC2WEB無料ホームページ]
http://www.fc2web.com/
[FC2無料ケータイHP]
http://k.fc2.com/

参考URL:http://www.nttdocomo.co.jp/p_s/imode/make/index.html

PC向けサイトをHTMLタグで記述して、制作することができますか?
でしたら、その知識を利用して、iモード向けのサイトを作成すれば良いと思います。
個人で手打ち制作でキャリア別振り分けは、作る時は良くても(結構手間がかかりますが)更新が面倒になります。
個人運営の携帯サイトなら、プロバイダまたはレンタルサーバーなどでCGIが使えない場合は、掲示板などはレンタルで十分だと思います。
レンタルサーバーを借りるなら、そのレンタル料が費用としてかかります。
無料スペースの場合は、広告表示の...続きを読む

QホームページZEROにて制作したHPなんですが、、、

御世話になります、HP初心者です宜しく御願い致します。

ホームページZEROにて、見様見真似でホームページを何とか作りWEB公開も出来ましたが、良く分からない事が何点か有ります。
自分で作ったHPを会社の同僚に見せようと開いたところ、スタイルが崩れて出てきました、空白部分やメニューボックスの書体も違ってます。自宅のPCでは綺麗に見えるのですが、作り方に問題が有るのでしょうか?
また、今度は更新を掛けたところスタイルは崩れてはいないのですが、空白になってしまうエリアも出てしまいます。
(プレビューで見ても同様で白く空白になってました)
何度かファイル、サイトの保存をすると解消されて現在は元の状態に直っていますが、更新やページの追加の度に度々発生してしまいます。
解決策が有れば教えて下さい。

サイト転送はレンタルサーバーへ独自ドメインで、ホームページZERO内にて転送してます。

Aベストアンサー

こういう場合、実際にURLを記載された方が、一目瞭然かと思います。
あと自分で確認する際に使ったブラウザのバージョンなど。

>空白部分やメニューボックスの書体も違ってます。
この辺の情報から察すると
(1)使っているフォントが環境依存
(2)スタイルシートが正しく反映されていない
あたりが伺えます。

ご自身の環境での画面のスクリーンショットと実際のURLを記載するのが一番確実な確認方法かと思います。

Qホームページの作り方

ホームページを作りたいのですが、全く分かりません。そこで初心者でも分かる作り方を教えてください。それか作り方が乗っているホームページを紹介してもらえないでしょうか?よろしくお願いします。

Aベストアンサー

全くの初心者なら、
楽天(http://isweb.www.infoseek.co.jp/)や、
ガイアックス(http://www.gaiax.com/)や、
カフェスタ(http://www.cafesta.com/index.jsp)
などが良いと思いますよ!
でも、ページのイメージなどは限られてしまいます。

自分で全てページを作りたいのなら、
やっぱり他のサーバーなどを借りるのがいいですね。
http://muryou3.fc2web.com/home.htmlなどを見て、
参考にしてください。

あとhttp://tohoho.wakusei.ne.jp/www.htmのサイトは、
とても有名で少しはHp作成に関して理解できますよ。

Qホームページビルダーにて制作する、ホームページにSEO対策を施すには??

どのような機能・手段を使えば宜しいのでしょうか?

現在、市販されている、ホームページビルダー13にて、
勉強をしながら、手探りで、ホームページを作成している初級者ですが、
完成⇒アップ後は、なるべく多くの方に見て頂けるよう―

SEO対策を意識した、ページづくりをしたいと考えています。

宜しくお願い致します。

Aベストアンサー

初心者ということは、「標準」モードで製作していらっしゃるということでしょうか?
SEOを意識したページ作りは、ソースを手打ちしないと行えません。
「HTMLソース」モードに切り替えると、HTMLのソースの編集ができるようになります。

ただ、ゼロからタグ手打ちは結構面倒なので、
まず「標準」モードでおおまかにページを作ってしまってから、
「HTMLモード」で手を加えるといいと思います。

なお、私が参考にしているSEOの指南サイトは↓です。
http://www.searchengineoptimization.jp/


一応念の為に申し添えておきますと、HTML並びにCSSの意味がわからないとSEOは難しいです。
HTMLがわからないと、指南サイトに何が書いてあるかが把握できないからです。
ですので、もしHTMLやCSSがよくわからないのであれば、「標準」モードではあまり凝った内容にしない方がいいと思います。修正を加えるのが大変なので。

頑張って下さい!

Qビーズのフクロウの作り方が載っているホームページや本を教えて欲しいです

ビーズのフクロウの作り方が載っているホームページや本を教えて欲しいです。

立体のビーズのものでかわいらしいものを探していますが、なかなか見つかりません。
ビーズモチーフっていうのかな?、アイロンビーズとは違い、立体のものです。

古い質問の中に、同じようにフクロウを探している質問がありましたが、回答に載っているホームページの中ではフクロウは見つかりませんでしたし、作り方は載っていないようです。

形を見ただけでは、よく作れないので、作り方が載っているようなホームページか本があればうれしいです。

知っている方がいらっしゃいましたら、よろしくお願いします。

Aベストアンサー

「ビーズ ふくろう 作り方」で検索しただけですが、以下あたりはどうでしょう?

http://poochnavi.com/beads/recipe/fukurou/rec01.html

Qホームページ制作会社に就職する際の必須技術

現在28歳の会社員です。

現在ホームページ制作会社への転職を考えているのですが、どの企業も実務経験1年以上若しくはそれ同等の技術が必須条件となっております。。。

私自身実務経験がないため、学校に通って技術を身に付けたいと思っているのですが、実務経験1年以上同等の技術というレベルがよく分からず、どこまで詰めた学習をすればいいのか迷っております。(レベルによって選ぶ学校や費用も変わってきますので・・・)

ホームページ制作会社で働く際に必ず身に付けておかないといけないスキルとそのレベルの目安をどなたか教えていただけませんか??

Aベストアンサー

とにかく制作を生業として働くのでしたら最低限作れることが必須となります。
また一般的には業務経験がある方が好まれます。

ご質問の制作会社に限っていうと入るための技術というのは自分の経験からいうと千差万別です。
ただ制作会社の大半は「作る」ことを目的としているのでビジュアル面とある程度のFlash技術があれば可能性があるように思います。
なので学校なり独学なりで制作をしてみて周りの人から評価を得られれば第一歩となるのではないでしょうか。

しかし制作業を必要としている会社は製作会社だけではありません。
インターネットで商売をしているところでしたら就職のチャンスがあります。
自社で運用しているサイトに対しての仕事となるので範囲は狭くなりますが、その分作ること以外のスキルも身に付きます。
またそういう会社の方が未経験者に対しての理解もあると思います。


制作会社だけに限らずいろいろと広く見渡してみることをお勧めいたします。
ちょっとご質問の趣旨とは離れてしまいますが参考になれば何よりです。

Qホームページの作り方☆

 ホームページの作り方がわかる、無料のソフトを教えて下さい。
 学生の時に一度作ったのですが、確か「じゅんこ」という名前のページで、作り方が書かれていたように思うのですが・・・。先生も「じゅんこさんのホームページで各自調べて作りましょう。」と言っていました。もちろん、そのじゅんこさんというのは、クラスメイトでもなく、全く知らない人です。
 もちろん、他の方法でもいいので、作り方を教えて下さい。お願い致します。

Aベストアンサー

インターネットエクスプローラーをお使いでしたら、下記アドレスが参考になるかと思います。
フリーのHP作成ソフトの導入方法とHPの作り方について詳しく解説されています。

参考URL:http://www.susono.com/~tkzw4a/

Qホームページビルダー7で作ったホームページの編集

「ホームページビルダー・7」で作ったホームページがあるのですが、
ワイド画面のパソコンで表示すると左に片寄ってしまいます。
中央に表示させたいのですが方法がわかりません。
何方かご教示いただけないでしょうか?

Aベストアンサー

http://www-06.ibm.com/jp/domino01/swhc/esupport.nsf/all/hpb0400

参考にしてください。

Qブログまたはホームページの作り方について

ブログまたはホームページの作り方について

小説を書け 簡単に作れ ヤフーやグーグルで検索したら出てくる?(携帯サイトで出ても出なくてもいいですがパソコン インターネットで出るのがいいです)
ブログまたはホームページの作り方を教えてください
またそのような事ができるサイトを教えてください

Aベストアンサー

>小説を書け 簡単に作れ ヤフーやグーグルで検索したら出てくる?

どこのサービスでも小説は書けるし、簡単に作れるし。
YahooやGoogleの検索結果に出したいのなら、自分でそれらの検索サイトに、検索対象にしてくれるように申請を出せば検索結果に出て来るけど、申請しなけりゃ出るかどうかは運任せ。

[参考]FC2 -無料ホームページ アクセス解析 ブログ 動画 レンタルサーバー SEO 対策 等 -
http://fc2.com/

Qホームページビルダーでホームページを作って公開していますが

内容を変えて作り直したものを転送してもトップページが新しいページに変わりません
次のページにリンクを貼っていて、リンクを開いて戻ると新しいページが表示されます。
どうしてなのかさっぱりわかりません。
新しく作ったものをすべて表示させ、
すべて保存にしてサイトに公開というところで転送するのですが何回やってもダメです
分かる方教えてください。

Aベストアンサー

Ctrl+F5キーを押してもダメですか?
インターネットオプションから、一時ファイルを全て削除、もやってみるとか。


人気Q&Aランキング

おすすめ情報