![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
この方のホームページでの質問ですが、
http://yuki930.v-colors.com/
背景として、 上下に雲の画像を固定して、中をスクロールできるようになっていますが、
このように、上下の画像を画面に固定するには、どのようにcssを編集すれば良いのでしょうか?
宜しくお願いします。
No.1ベストアンサー
- 回答日時:
とっても酷いサイトなのであまり参考にはならないと思いますが・・(^^)
⇒Another HTML Lint( http://www.htmllint.net/html-lint/htmllint.cgi )
Lynxで見ると内容はほとんど空っぽ・・
『Lynx などのテキスト ブラウザを使用して、サイトを確認します(ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります)。( https://support.google.com/webmasters/answer/357 … )』
・とってもうざくって、ニ度と訪れようと思わない。
例えばページ内リンク( http://yuki930.v-colors.com/#twitterFeed )でターゲットが隠れる。
仕方ないので、ブラウザの表示メニューから[スタイルシートなし]にして利用せざるを得ない。
・とにかく煩雑、DIVをデザインのために多用しているため、まるでDIVスープ
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』ためのもので、デザインのために使用するのは間違い。
・印刷されたらわかる(^^)
>上下の画像を画面に固定するには、
★仕組み自体はposition:fixedでウィンドウの上下に配置しているだけです。
下は兎も角、上部にfixedさせると、「リンクターゲットが隠れる」という致命的欠点がある。また、表示範囲が小さくなるという欠点があります。表示面積の小さいスマホなどで閲覧するとき困ります。
ウェブサイトを作られているなら、開発者向けツール( https://addons.mozilla.jp/firefox/extensions/dev … )の豊富なfirefoxを御利用だと思いますが、そのアドオンの Firebug( https://addons.mozilla.jp/firefox/details/1843 )を使用すれば、簡単にわかります。
ただ、このようなサイトは初心者は参考にすべきではありません。ウェブやHTMLの根本から大きく外れています。
【引用】____________ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。・・・【中略】・・・もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
・・・【中略】・・・
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
ちゃんと記述すれば、HTMLはその数分の一ですむ内容です。---そのページのソースを見て、何が書かれているか分からないと思います。--もちろん検索エンジンにもわからない---。内容を修正するとなると大変でしょうね。
あなたが多く利用されているサイトは、デザインじゃなく内容だと思います。
対照的なページを紹介しておきます。
⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
(chromeを除く)ブラウザの表示メニューからスタイルを選択するとデザインが変更できます。---HTMLに文書構造しか書かれていないからどのようにもデザインできるということ。
ソースはシンプルですし、Another HTML Lint もパスするし、印刷しても良いし、ディスプレイ幅に依存しないし、スタイルが利用できない端末でも利用できる。もちろん視覚障害者がスクリーンリーダーで利用もできる。
[例]
div.header,div.footer{position:fixed;height:80px;width:100%;}
div.header{top:0px;background-image:url(./images/background/topCloud.gif);z-index:100;}
div.footer{bottom:0px;background-image:url(./images/background/topCloud.gif);}
次で簡単なサンプル提示します。
ありがとうございます。質問した内容以上にいろいろな発見をすることができました。感謝します。正しいHTMLの書き方などについてこれまで考えたことも無かったので、とても参考になりました。
No.3
- 回答日時:
固定したいエリアのCSSに、position:fixed;を記述する。
上下だと、headerとfooterということになるかな?・・・
*************************************************
#header,footer{
background-img:url(claud.png);
postion:fixed;
}
*************************************************
No.2
- 回答日時:
サンプルです。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
でチェック済みHTML4.01strictです。
★タブは_に置換してあるので戻す。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:100%;min-width:630px;margin:0 auto;padding:5px;}
div.section{position:relative;}
div.section div.section{width:auto;min-width:0padding-top:100px;}
div.section h2,div.section p,div.section div.section{margin-left:160px;}
div.section div.section p{margin-left:0;}
div.section div.nav{position:absolute;top:105px;left:0;width:140px;}
/* 上下に固定 */
div.header,div.footer{position:fixed;width:100%;}
div.header{height:80px;top:0px;background-image:url(./images/background/topCloud.gif);z-index:100;}
div.section{padding-top:100px;}
div.footer{height:40px;bottom:0px;background-image:url(./images/background/topCloud.gif);}
div.footer h2{display:none;}
div.footer dt{float:left;font-weight:bold;}
div.footer dt:after{content:" : ";}
/* わかりやすいように */
body{background-color:gray;}
div.section{background-color:white;}
div.section div.section{min-height:1000px;}
/* 画像をおく場合は以下は着色しない */
div.header{background-color:aqua;}
div.footer{background-color:yellow;}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>本文はsection</p>
__<div class="section" id="SUB_SECTION1">
___<h3>項見出し</h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
__<div class="section" id="SUB_SECTION2">
___<h3>項見出し</h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
__<div class="section" id="SUB_SECTION3">
___<h3>項見出し</h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
__<div class="nav">
___<ol>
____<li><a href="#SUB_SECTION1">1項</a></li>
____<li><a href="#SUB_SECTION2">2項</a></li>
____<li><a href="#SUB_SECTION3">3項</a></li>
___</ol>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-03</dd>
__</dl>
_</div>
</body>
</html>
ありがとうございます。質問した内容以上にいろいろな発見をすることができました。感謝します。正しいHTMLの書き方などについてこれまで考えたことも無かったので、とても参考になりました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 差し込み画像にをcssで大きさ指定したい 1 2022/11/23 23:14
- Windows 10 zoomで自分の顔の背景 3 2023/06/07 22:34
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS svgクリップパスの応用コーディング方法 2 2022/04/09 09:07
- フリーソフト GIMPの使い方 1 2022/07/11 13:52
- Photoshop(フォトショップ) 【Photoshop】画像拡大時に急激に画面外まで拡大してしまうのを制御したい 1 2023/08/25 03:04
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- その他(パソコン・スマホ・電化製品) アンドロイドスマホの画面にクリックするとJPG写真が開くショートカットを作りたいのですが、方法をおし 3 2023/08/27 10:01
- 写真・ビデオ iphoneで風景の加工についての質問です。 上の空の色(画像)を下の空の色(画像)のような色合いに 1 2022/07/25 21:52
- Excel(エクセル) エクセルの編集オプション セル移動 2 2022/04/02 09:19
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
htmlの見出しタグ(<h1>)の次...
-
divを横に並べる方法
-
1サイト内にHTML5とXHTMLが混在...
-
hタグの右横に画像を表示
-
html の divとtable の役割
-
html5でheaderの中にnav
-
複数のボタンを等間隔に、かつ...
-
h1のテキストサイズよりh2の方...
-
div要素が重なってします
-
CSS 背景色が下まで伸びません
-
グリッドレイアウトで"auto-fit...
-
セクションをdivで囲むと見出し...
-
開始タグと終了タグについて
-
min-heightとheightの違いについて
-
特定範囲内のCSSの継承を断ち切...
-
動画を掲載すると最下部のフッ...
-
1時間30分を簡単に表したいで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
要素間、要素内に隙間が空く
-
画面を縮小するとカラムが落ち...
-
h1のテキストサイズよりh2の方...
-
divの中に外部のHTMLを埋め込む
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
hタグの右横に画像を表示
-
グリッドレイアウトで"auto-fit...
-
セクションをdivで囲むと見出し...
-
開閉式の隠し要素が一瞬表示さ...
-
html5でheaderの中にnav
おすすめ情報