Dreamweaver4を使ってHPを創っています。半年くらいで3.4つのHPを創った程度のものです。
最近、背景はスクロールせず、コンテンツだけがスクロールするページを見るのですが、そのようなページを創りたいと思っていますが、Dreamweaver4でできるのかどうか、どうすれば出来るのか、またほとんどのブラウザーで確認できるのか、などどんなことでも教えてください。よろしくお願いします。

A 回答 (2件)

CSSで指定できます。


私が使っているDREAMWEAVERは3なのですが、たぶん4でも同じだと思うので、手順を書きますね。

1.画面上で右クリック、[CSSスタイル][スタイルシートの編集]を表示
2.[新規作成]押下
3.[HTMLタグの再定義]を選択し、下のプルダウンから[body]を選択
4.[カテゴリ][背景]を選択
5.[背景イメージ]にセットしたい画像を指定し、
 [リピート]=「リピートなし」
 [添付]=「固定」
 を指定
以上で実現できるはずです。

CSSに対応しているブラウザは、再現できたはずです。
詳細バージョンは忘れてしまいました。(^^;;
たぶん、ネスケ、IEともに4以上ならOKのはずです。
    • good
    • 0
この回答へのお礼

ありがとうございました。ver4でも同じでした。スタイルシートの理解がいまいちで少し苦労していますがこんな風に皆さんに聞きながら出来ること自体すばらしいですよね。解ると嬉しくなります。私も早くHIROYOさんのように答えてあげられるようになって少しは人に役に立ちたいですね。ありがとうございました。

お礼日時:2001/12/06 17:46

 こんにちは。



 スタイルシートの記述は、以下のようになります。

body {background-attachment:fixed;}

 ―これで、背景画像が固定できます。

 ちなみにIEでは4以上、NNでは6以上で対応しているようですね。
    • good
    • 0

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

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

Qフッタを常に下部へ固定しメインコンテンツ部をスクロールさせる方法

現在
http://www.stylish-style.com/csstec/ultimate/fix-foot.html
で紹介されている方法を使いフッタを常に最下部へ表示させています。#containerでページを囲み、#mainでフッタのパンディングを確保、
#mainのheightは100%-フッタ用パンディングの30pxとなっています。
#main内にヘッダ、ナビゲーションを上部から順に配置し
ナビゲーション以降を#main2としコンテンツ部として表示させようと考えています。
ただ、この方法ではフッタが固定されるもののコンテンツはどんどん下へと伸びてしまいます。
私の考えている表示としては、
(1)コンテンツ部は常にフッタまでボックスを広げる。
(2)コンテンツがoverflowした場合はスクロールする。
この2点をクリアさせたいです。
#main2のheightをピクセルで固定させればできそうですが
解像度の変化に対応できないと思うので…
どなたか良い方法を知っている方がいれば教えていただければ幸いです。

htmlとcssは下記URLです。
http://beatprovider.info/test/index.html
http://beatprovider.info/test/style_d.css

よろしくお願いします。

現在
http://www.stylish-style.com/csstec/ultimate/fix-foot.html
で紹介されている方法を使いフッタを常に最下部へ表示させています。#containerでページを囲み、#mainでフッタのパンディングを確保、
#mainのheightは100%-フッタ用パンディングの30pxとなっています。
#main内にヘッダ、ナビゲーションを上部から順に配置し
ナビゲーション以降を#main2としコンテンツ部として表示させようと考えています。
ただ、この方法ではフッタが固定されるもののコンテンツはどんどん下へと伸びてしまいます。
...続きを読む

Aベストアンサー

普通はフッタをposition:fixed;でbottom:0px;してしまえば、あとはコンテ
ンツのpadding-bottom:をフッタの高さ分指定しておしまいです。

そのサイトは最近のブラウザで唯一position:fixed;に対応できないIE6を
ナントカしようと思って失敗しているんでしょう。「position:fixed IE6」で
検索すると他の手口が見つかりますので、色々試してみるといいでしょう。

Qホームページビルダーでフレームのないページのスクロールバーを消すには?

タイトル通りです。
ホームページビルダーで作ったHPのトップが、
全画面なので、スクロールバーがついたままになってしまいます。
タグはわからないのでビルダーの操作で消したいのですが、
どうしたら消えますか?フレームじゃないので方法がわかりません。

Aベストアンサー

ホームページビルダーのバージョンがいくつなのかが書かれていませんので,勝手にVer6かVer6.5だと想像して書きます。
たぶんですが,「どこでも配置モード」で作ってしまわなかったでしょうか?
これで作ると,ページの大きさが指定され,例え,すべてのコンテンツが画面内に収まったとしてもスクロールバーが出現してしまいます。
「標準モード」で作成しなおすか,「どこでも配置モード」のままならページの大きさを指定してください。
ページの大きさ指定の方法は,ホームページビルダー右側の「数字×数字」の部分をクリックし,出てきたものの中から選ぶか,「サイズ未設定」か,「ページサイズ設定」をクリックして,好きなサイズと説明を登録したあと,もう一度そのサイズを同じようにして選択してください。
たぶん,「サイズ未設定」で構わないと思いますが・・・。

Q古いブラウザーに対応したHPづくりは必要?

自社ホームページですが、企業のため古いネスケや
ファイアーフォックスに対応したホームページをしたほうが
よいとご忠告を頂きました。

実際、古すぎるブラウザーに対応したホームページづくりは
必要でしょうか?

もし必要だとすれば、どんなタグに気をつけるとページのスタイルが
くずれにくくなるのでしょうか?

なお、いまのホームページは携帯ページとPCページとに振りわけて
2つのページを作っております。

Aベストアンサー

まず、IEやNetscapeの4.xに対応させる必要はないでしょう。
この頃のブラウザはスタイルシートの実装がいいかげんですから、これらでも同じデザインで見えるようにしようとすると、表(Table)を用いたレイアウトにする事なります。
時代の流れに反するし、修正とか面倒ですが、レイアウト崩れる事はありません。

自分は、HTML+CSSでNetScape4.xではCSS適用されないようにしています。
そうすればネスケ4.xではデザインもへったくれもない、初期の携帯サイトやこの解答のような状態になりますが、情報だけは確実に伝わりますので。


Firefoxに対応させるのは必須です。
#3の方が述べているように、IEはほんとにいい加減で無茶苦茶です。
Firefoxでも正しく見れれば、他のブラウザ(IE除く)でもまず問題ありません。
Macだと現在はSafariが主流ですが、これもFirefox同様にw3m推奨のweb標準に準しています。
ちなみに最近話題のGoogle ChromeもSafariのレンダリングエンジンWebKitがベースになっています。
あと、○囲み数字やローマ数字、(株)(一文字で表せるの)といった機種依存文字は使わないように。


・CSSハック一覧 HTML│CSSタグ辞書
http://d-lover.com/css/hack.shtml
IEにしか認識できない書き方とかあるので、それを応用して下さい。

・Another HTML-lint gateway
http://openlab.ring.gr.jp/k16/htmllint/htmllintl.html
満点とらなくていいから、重大なエラーだけは出ないように


・やってはいけない!! ホームページの掟
http://www2.plala.or.jp/Cool/okite/
・訪問者に優しいWebサイト作り
http://web8341.info/index.html
・【記事】ユーザビリティ関連の豆知識集 - [ホームページ作成]All About(1/2)
http://allabout.co.jp/internet/hpcreate/subject/msubsub_usability.htm

まず、IEやNetscapeの4.xに対応させる必要はないでしょう。
この頃のブラウザはスタイルシートの実装がいいかげんですから、これらでも同じデザインで見えるようにしようとすると、表(Table)を用いたレイアウトにする事なります。
時代の流れに反するし、修正とか面倒ですが、レイアウト崩れる事はありません。

自分は、HTML+CSSでNetScape4.xではCSS適用されないようにしています。
そうすればネスケ4.xではデザインもへったくれもない、初期の携帯サイトやこの解答のような状態になりますが、情報だけは...続きを読む

Qコンテンツとコンテンツの詰まり

Windows XP あるいは8
HTML 4.01

コピー ~ TOP.html copyTOP.css
あああああ と  いいいいいの間隔はあいているのに
いいいいい と  うううううの間隔はなぜか詰ってしまっています。
間隔を空けるにはどうしたらいいでしょうか?
コードは以下の通りです。

[ HTML 側 ]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Transitional.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS">
<META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="~">
<title>aaaaaaaaaa</title>

<link rel="stylesheet" href="copyTOP.css" type="text/css">


</head>


<body>

<div id="zentai">



<div id="part">
<p class="title">あああああ</p>
<div id="partnerwaku">
<div id="partnerimage">
<a href="" alt="のロゴ" class=""></a>
<a href="" alt="のロゴ" class=""></a>
<a href=""><img src=".gif" alt="のロゴ" class=""></a>
<a href=""><img src=".jpg" alt="のロゴ" class="A"></a>
<a href=""><img src=".jpg" alt="のロゴ" class=""></a>
</div>
</div>
</div>

<div id="PR">
&lt;PR&gt;
<br>
<div id="PRsection">
<br>
<a href="">
<img src="" alt="" class="PRimage01"></a>
</div>
</div>


<div id="PR2">
<br>
&lt;PR&gt;
<br>
<div id="PRsection2">
<br>
<a href="">
<img src="" alt="" class="PRimage02"></a>
</div>
</div>


<div id="columnwaku">
<div id="columnbun">
<p class="title">いいいいい</p>
<div id="columncontents">
<p><a href=""><img src =".jpg" class="columnarticle01"></a></p>
</div>
</div>
</div>

<br>
<br>
<br>
<br>


<div id="PR3">
<br>
&lt;PR&gt;
<br>
<div id="PRsection3">
<br>
<a href=""><img src="" alt="" class="PRimage03"></a>
</div>
</div>

<br>
<br>
<br>
<br>
<br>


<div id="questionnairesection">
<div id="questionnaire">
<p class="title">ううううう</p>
<div id="questionnairecontents">えええええ</div>
</div>
</div>

<div id="PR4">
<br>
&lt;ddd&gt;
<br>
<div id="PRsection4">
<br>
<a href="">
<img src="" alt="" class="PRimage04"></a>
</div>
</div>


<div id="pagetop">
<br>
<br>
<a href="#logoimage">ページの先頭へ▲</a>
</div>

<hr class="beforefooter">

<div id="aboutus">
<div id="aboutussection">
<p class="aboutustitle">管理会社</p>
<p><a href="Aboutus.html"><img src ="Aboutus.jpg" class="aboutusimage"></a></p>
</div>
</div>

<br>
<br>

<hr class="beforefooter">


</div> <!--全体のdiv-->

</body>
</html>

[ css側]
@charset "Shift_Jis";

body {
overflow-y:auto
overflow-x:auto
text-align:center;
cursor:url("images/.png");
}

#allitem{
cursor:url("images/.png");
}

#zentai{
width:1000px;
margin-left:auto;
margin-right:auto;
}

.title{
margin-top:0px;
margin-bottom:0px;
font-size : 20px;
border-style:solid;
width:592px;
background-color:#FFFF99;
padding:3px;
}


#part{
clear:left;
float:left;
height:180px;
width:642px;
padding-right:147px;
font-size : 20px;
}

#partnerwaku{
height:140px;
width:600px;
border-style:solid;
border-color: #000099;
}


#PR{
float:left;
width:180px;
height:120px;
}

#PRsection{
border-style:solid;
border-color: #000099;
}

#PR2{
float:left;
width:185px;
height:150px;
}

#PRsection2{
border-style:solid;
border-color: #000099;
}

.PRimage01{
width:170px;
height:80px;
}

.PRimage02{
width:165px;
height:100px;
}

#kuhaku{
clear:left;
height:20px;
}

#columnwaku{
float:left;
clear:left;
height:130px;
width:790px;
}

#columnbun{
height:120px;
width:600px;
}

#columncontents{
height:140px;
width:600px;
border-style:solid;
border-color: #000099;
}

.columnarticle01{
height:70px;
width:400px;
background-color:#CC99CC;
}

#PR3{
float:left;
width:185px;
height:150px;
}

#PRsection3{
border-style:solid;
border-color: #000099;
}

.PRimage03{
width:165px;
height:100px;
}

#questionnairesection{
clear:left;
float:left;
height:130px;
width:1050px;
}

#questionnaire{
width:600px;
border-radius: 20px;
}

#questionnairecontents{
height:140px;
width:600px;
border-style:solid;
border-color: #000099;
}

#PR4{
float:left;
width:185px;
height:150px;
}

#PRsection4{
border-style:solid;
border-color: #000099;
}

.PRimage04{
width:165px;
height:100px;
}

文字制限のため省略

Windows XP あるいは8
HTML 4.01

コピー ~ TOP.html copyTOP.css
あああああ と  いいいいいの間隔はあいているのに
いいいいい と  うううううの間隔はなぜか詰ってしまっています。
間隔を空けるにはどうしたらいいでしょうか?
コードは以下の通りです。

[ HTML 側 ]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Transitional.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS">
<META HTTP-EQUIV="CONTE...続きを読む

Aベストアンサー

スタイルシート部分です。
 CSS2の本来の書き方に則しています。
CSS2では、基点となるセレクタに続いて「つなげるセレクタ」でつなげていきます。そのため*(全称セレクタ)が追加されています。
 #PRとは、*#PRと感謝腐れます。idがPRの値のすべての要素と言う意味です。
しかし、基点となるセレクタを書く癖をつけたほうが後々楽です。他のページで別の箇所に同じPRidが使われていても適用されないので混乱しなくてすみます。
★子孫セレクタ、隣接セレクタ、属性セレクタなどを活用して、HTMLの文書構造にしたがってセレクタを書く技術を身につけましょう。ものすごく分かりやすくなります。極端に言うとHTMLを見なくてもデザインできるようになります。
[例]
div.section div.section p.Logo{
 はsection(本文)ブロックの内=子孫(半角スペース)のsectionブロック内のclass属性にLogoを持つp要素と読みます。
div.section div.section+div.section{margin-top:50px;}
 は、そのうちのdiv.sectionと隣接した(+)sectionについてのmargin-topの指定です。
div.section div.section{}で指定したmargin:0を上書きでます。
 詳細度が大きいからです。
  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
div.section div.section+div.section  詳細度 [0 0 3 3] ・・・33
div.section div.section  詳細度[0 0 2 2] ・・・22
div.section  詳細度[0 0 1 1] ・・・11

 ⇒5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html )
 ⇒6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )
 はスタイルシートを理解する時に必須です。これを知っていると知らないとでは、まるで違います。いちいちidやclassを書かなくて良くなるので楽です。メンテナンス性が劇的に改善される。

以下、スタイルシート部分
★タブは_に置換してあるので戻す。

_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
/* ディスプレイ幅に影響されないようリキッドにしておく */
/* スマホでも超幅広ディスプレイでも利用可能 */
div.header,
div.section,
div.footer{
_width:90%;min-width:630px;max-width:890px;
_margin:0 auto;padding:5px;
}
div.header div#contentTable h3,
div.section div.section h3{
_margin:0;line-height:1.8em;
_border-bottom:2px gray solid;
_padding:0 0.5em;
_background-color:rgb(255,255,200);
}
div.header div#contentTable ol,
div.header div#contentTable ol li{
_list-style:none;margin:0;padding:0;
_text-align:ceter;
}
div.header div#contentTable ol li{
_margin:3px;
}
div.header div#contentTable ol li{
_display:inline-block;
_width:22%;
_position:relative;
}
div.header div#contentTable ol li img{
_display:block;/* 画像をblockにしてサイズ変更するように */
_width:90%;height:auto;
}
div.section{position:relative;}
div.header div#contentTable,
div.section div.section{
_min-width:0;width:auto;
_margin-right:170px;
_border:solid 2px gray;
_min-height:160px;/* 挿絵画像のサイズが大きい場合はHTML側で指定 */
_padding:0;
_position:relative;/* 子孫のサイズ基にするためrelative */
}
div.section p{
_margin:0 1em;
_text-indent:1em;
_line-height:1.6em;
}
/* 二つ目以降(隣接セレクタ)のsub sectionの上マージンを指定*/
div.section div.section+div.section{
_margin-top:50px;
}
div.header div#contentTable p.Logo,
div.section div.section p.Logo{
_margin:0;height:100%;/* relativeな親ブロックのサイズを基準 */
_position:absolute;
_top:0;right:-170px;
_width:160px;
_text-align:center;
}
p.Logo img{
_display:block;/* 画像をblockにしてサイズ変更するように */
_width:90%;height:auto;
_margin:5px auto;
}
div.guest h3:before{content:"Gest ";}/* ゲスト記事の目印 */

/* 分かりやすいように色をつけておく */
div.header{background-color:yellow;}
div.section{background-color:silver;}
div.footer{background-color:aqua;}
div.section div.section{background-color:white;}
div.header div#contentTable{background-color:lime;}
div.section div.section p.Logo{background-color:fuchsia;}
div.header div#contentTable p.Logo{background-color:orange;}
div.section div.column h3{background-color:red;}
-->
_</style>

スタイルシート部分です。
 CSS2の本来の書き方に則しています。
CSS2では、基点となるセレクタに続いて「つなげるセレクタ」でつなげていきます。そのため*(全称セレクタ)が追加されています。
 #PRとは、*#PRと感謝腐れます。idがPRの値のすべての要素と言う意味です。
しかし、基点となるセレクタを書く癖をつけたほうが後々楽です。他のページで別の箇所に同じPRidが使われていても適用されないので混乱しなくてすみます。
★子孫セレクタ、隣接セレクタ、属性セレクタなどを活用して、HTMLの文書構造にした...続きを読む

Qホームページがブラウザーに表示される仕組み

ホームページがブラウザーに表示される仕組みに関する質問ですが、
ホームページがブラウザーに表示される場合、サーバからそのホームページのデータ(HTMLコード)がそのブラウザーがインストールされているコンピュータに送信されていると思います。この場合、ホームページのデータ(HTMLコード)は、コンピュータのどこに保存されるのでしょうか?インターネット一時ファイル(Temporary Internet Files等)というものがありますが、これらは一度表示したWebページを再び開くときに高速化したり、Webページをオフラインで表示するためのものであり、ブラウザーにWebページを表示するためのデータの保管場所ではないように思いますが?

そもそも、ホームページをブラウザーに表示するには、そのブラウザーがインストールされているコンピュータにホームページのデータ(HTMLコード)がサーバより送信され一旦”保存”される”必要”があるのでしょうか?それとも、一旦コンピュータにデータを保存しなくても、サーバにあるホームページのデータ(HTMLコード)が直接ブラウザーに表示されているのでしょうか?

ご存知の方、お教え下さい。
また、詳しく説明してあるサイトのURL等ありましたら、お教え下さい。

ホームページがブラウザーに表示される仕組みに関する質問ですが、
ホームページがブラウザーに表示される場合、サーバからそのホームページのデータ(HTMLコード)がそのブラウザーがインストールされているコンピュータに送信されていると思います。この場合、ホームページのデータ(HTMLコード)は、コンピュータのどこに保存されるのでしょうか?インターネット一時ファイル(Temporary Internet Files等)というものがありますが、これらは一度表示したWebページを再び開くときに高速化したり、Webページをオ...続きを読む

Aベストアンサー

ブラウザによってその辺りの原理や動作仕様は異なると思います。

IE(Trident)の場合は、多分以下のようにしていると思います。

キャッシュがないか条件からキャッシュが古いと判断され更新する
必要がでたときにサーバにアクセスしてメモリにデータをダウンロード
します。
その際にキャッシュが有効になっていればキャッシュに保存します。
また、キャッシュに保存されていればそのままキャッシュをメモリに
展開します。

その後にブラウジングエンジン(Trident)のパーサがHTMLをパースし、
それをエンジンのレンダラがブラウザ上に表示します。

他のレンダリングエンジンも大体はほとんど同じようにしている
はずです。

Temporary Internet FilesはデフォルトのTridentエンジンの
キャッシュ保存場所ですが設定やレジストリなどを書き換えれば変更も
可能です。


人気Q&Aランキング

おすすめ情報