- 締切済み
フッターの画像の位置づけ指定方法がわからない
ヘッダー・メイン・サイドバー（左右）・フッターの５コマ組みのサイトを表現したいのですが、 フッターに指定した画像を全体サイズでセンターに寄せて（画像の上に、真ん中寄せでテキストを乗せたい）反映させるにはどうしたらいいのでしょうか。フッターに指定しているjpg画像のサイズは、(○●.jpg);511×229pxです、よろしくお願いします。 <style type="text/css"> body /* コンテナ */ div#container{width: 100%; margin-left: auto; margin-right: auto} /* ヘッダー */ div#header{background-color: #ffffff; font-color:#4876ff; /*background-image: url(.jpg);*/ background-repeat: no-repeat; background-position: center top; /*padding: 28px 20px 150px*/ } div#header h1{margin: 0} div#header p{color: #ffffff; font-size: 0.50em; margin: 0} /* メイン */ div#main{width: 100%; float: left; margin-right: -230px} /* コンテンツ */ div#content{width: 100%; float: right; margin-left: -186px; margin-right: auto; margin-bottom: 25px} div#content h2, div#content h3, div#content p {margin-left: 186px; margin-right: 230px} div#content h2{background-color: #92c9ff; background-image: url(); background-repeat: repeat-x; border: solid 1px #84c2ff; font-size: 0.875em; color: #00688b; line-height: 32px; padding-left: 6px; margin-top: 0; margin-bottom: 0} div#content h3{background-color: #ffffff; background-image: url(); background-repeat: no-repeat; background-position: 0px 2px; font-size: 0.875em; line-height: 22px; padding-left: 26px; margin-top: 30px; margin-bottom: 0} div#content p{font-size: 0.75em; line-height: 1.6; margin-top: 10px} /* サイドバー */ div#sidebar{ background-image:url(.jpg); width: 170px; float: left; margin-bottom: 25px} ul.sidemenu{font-size: 0.90em; margin-top: 0; margin-left: 0; padding-left: 0; line-height: 0} ul.sidemenu li{list-style-type: none} ul.sidemenu li a{ display: block; line-height: 25px; text-decoration: none; text-align:right background-img:url(.gif); padding-left: 10px} ul.sidemenu li a:hover{background-color: #cdc1c5 color: #8b1c62 } ul.sidemenu ul {margin: 0; padding: 0} ul.sidemenu ul li a {background-img:url(gif); color:#5d478b; border-bottom: solid 1px #ab82ff; line-height: 24px} ul.sidemenu ul li a:hover {background-color: #eee0e5; color:#ffffff; border-bottom: solid 1px #ab82ff; } p.feed{margin-bottom: 10px} p.feed a{font-size: 0.75em; color: #444444; text-decoration: none; line-height: 30px; border: solid 1px #888888; padding: 5px} p.feed img{border: none; vertical-align: middle} /* 右サイドバー */ div#sidebar-right{width: 150px; float: right} div.info{border: solid 1px #84c2ff; margin-bottom: 18px} div#sidebar-right h2{background-color: #c6e3ff; background-image: url(); color: #3c5916; font-size: 0.75em; text-align: center; padding: 5px; margin-top: 0; margin-bottom: 3px} div#sidebar-right p.photo{text-align: center} div#sidebar-right p{font-size: 0.75em; margin: 10px 5px} div#sidebar-right ul{font-size: 0.75em; margin: 5px; padding: 0} div#sidebar-right ul li {background-image: url(); background-repeat: no-repeat; background-position: 0 6px; padding-left: 13px; list-style-type: none} /* フッター */ div#footer{background-image:url(○●.jpg); background-repeat: no-repeat; width: 100%; margin-top: ; padding-top: 8px; clear: both} address{font-size: 0.75em; font-style: normal; text-align: center} </style> ・・・・・・・・ここまで指定 ここから、html打ち込み↓ <!-- フッター --> <div id="footer"align="center"> ～～テキスト文章～～<br> <address><big>～アドレスのテキスト～</address></big> <br>○○おなじくテキスト</div> <div align="center"> ～◆◆サイトの名前～ <img src="○○.jpg"border="0"bordercolor="#87ceeb"alt=""> <br><br> </body> </html> 少しいじると、おかしな反映になります、お助け下さい。
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞ＡＮｏ１の方にも、指摘されましたが、資料が間違っているとはどういうことなのでしょう どうも、文章を読むのが苦手なようですね。No.1もNo.2も同じですし、No.2はNo.1の続きです。(苦笑) とりあえず、No.1で示したHTMLとNo.2で示したHTMLをつなげてひとつにして、＿をタブに、：を:に置換して戻して元の形に戻して、内容をしっかり見て理解することから始めてください。画像のファイル名などはあなたのものに合わせてください。 そして、検証サイトでチェックしてエラーがあれば直してください。 ・Another HTML Lintは前文 ・CSSチェッカーはスタイルシート部分だけ これは、あなたがHTMLやCSSを作成したら必ずチェックしてみる練習です。Lintは宗教的なものも含まれるので100点満点の必要はありませんが、とてもよい教師役をしてくれるはずです。 まず、HTMLをよく見てください。あなたはHTML全体を示されていませんので想像を含めて一般的な形にしてあります。一読されればわかるように、どこにどういう内容が書かれているか理解できると思います。そしてプレゼンテーション(見栄え)に関わる記述が一切無いことも理解できるでしょう。HTMLをあのように文書構造をマークアップしたものにすると、極めてシンプルになることもわかると思います。 次にスタイルシートですが、floartは一切使われていませんから ＞clear: both;★→これで回り込みをどう指定しているのですか？ は要らないのです。floatは、本来テキスト中の挿絵などの周囲にテキストを回りこませるためのもので、ページ全体の配置に使用するのは本来は避けるべきです。 →段組/Webデザインにおける段組 - Wikipedia ( http://ja.wikipedia.org/wiki/%E6%AE%B5%E7%B5%84#Web.E3.83.87.E3.82.B6.E3.82.A4.E3.83.B3.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E6.AE.B5.E7.B5.84 ) デザインのためにHTMLを書くのではなく、HTMLは文書構造をひたすら「マークアップ」するのです。スタイルシートは、その文書構造を元にプレゼンテーションを指定していくのです。先に書かれたHTMLをデザインするために足りないところがあれば、それは文書構造がマークアップしきれていないのです。 そして、 ＊ 本文中のコラム(本文と直接関係ない記事--aside--)は本文の右側に本文の20%幅で置こう →div.section div.aside{posotion:absolute;right:0;top:0;width:20%;} と言う風にスタイルシートを書いていくのですよ。 そうしておけば、先でコラムは下に置こう（上記スタイルを消せば--）という変更もできます。あなたのようのsidemenue-rightなんてしていたら、困るでしょう。(class名のつけ方など) 初心者にもわかるように、私としては珍しく丁寧に書いておきましたから、理解もしやすいと思います。でも読んでもらえなけりゃ意味ないです。 ＞１０年以上も前の情報しかなかったりします HTML4.01の勧告が1999年12月、CSS2の勧告が1998年5月、CSS2.1の勧告が2011年4月ですが、それでも・・ 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』--1999年12月勧告のHTML4.01仕様書 でありながら、さすがにHTML5が騒がれるようになって減りましたが、いまだにtransitinalが多く使われているのが現状です。 なにが正しいかは法律ではありませんから、人によって基準は異なりますが、すくなくとも多くのベンダーがHTML4.01strict＋CSS2.1をウェブ標準とみなしていることには多くの異存は無いでしょう。だとしたら、その二つの仕様書を読んでおくのが良いと考えます。 ＞ＯＳはＷｉｎＸｐ、ブラウザはＩＥ８のまま維持するつもりで、ほかのブラウザへの ＞反映についても網羅している、わかりやすいサイトはありませんか？そもそもひとつ ＞も誤りのないタグだけを打ちこむことは、可能なのですか？ 私も基本はWinXP+IE8です。そして、<!DOCTYPE・・>でHTML4.01strictを宣言して、どのブラウザも標準モードで動作するように指定していますから、ブラウザ間の差を考えることはありません。 タグやスタイルのチェックは検証サイトを使いますのでミスは基本的に無いはずです。 ★No.1からNo.3の回答をとにかく読んで、実行してみてください。 繰り返しますが、そんなに難しかったり複雑ではないはずです。
お礼
懇切丁寧にどうもありがとうございます。 お作りいただいたものを実際に、フッター部分に画像を設定し反映させてみました、色づけをしていただいたため、全体の構成と位置づけが一目で私にもわかりやすく～細かなタグの意味づけや関係づけの理解はこれからですが～ 貴重なお時間を割いていただいたのだと、感謝しきりです。 お礼を記入してから直後、お一人の方からの二度回答だと気づきましたが、 「続きます、続きです」とお書きいただいていなかったため、また連休３日パソコンの前に張り付けでファイル整理をし続け疲労しきっておりました結果、パワー切れ、読解力が至らず失礼いたしました。 ただ未だに、レイアウトする目的達成とスタイルシートの本来の役割活用との関連づけがよく理解できません。デザインすることに凝ってしまう素人だからこその穴なのでしょうか。 私は、あれこれ気が変わるタイプではなく、１０年前に開設し約７年前くらいに作ったレイアウトを一度もいじらず、ただ、記事内容を更新していくことで目的は遂げられていたため、いずれこうして対面するべき問題を長く放置して来たと言えば、そうでした。 ご紹介サイトの提示構文の負っておられる役割や信頼度は存じておりましたが、正直申し上げて、好んで読み進みたい面白いと思う代物ではありません、とにかく、読みこなすこと理解を進めていくことに困難苦痛なのです。 それなら、まぁとにかく作ってやれ、という勢いに逃げてしまったのでしょうね。 しかしながら、マークアップ言語という原点に戻ってひとつひとつ頭に入れていく必要性を痛く感じました。 よい勉強の機会を与えていただきました、おそらく貴方様らしくなく、ご親切にしていただけたのは全く本当だと感じ入っている次第です（苦。 また、カーッとなり気が動転しては変てこな質問を寄せ、お目に留まることはなるべく避けるようにしたいです、今度はもうない知らないよ、ですかね、、、、 本当にとんちんかんな有態にお付き合いいただき、どうもありがとうございました。 （日を変えて記入） 指摘されたことのショックから立ち直れていません、ファイルマネージャーを開く勇気が起こりません、、、、時間をかけて基礎から順々に頭に入れていきます。 取り急ぎ、私のUPしてある例のページのhtmlをコピーします、（このページだけが唯一私のオリジナルではなく、他人様のお作りになったものです） 背景上部中央にひとつの画像（更新していく）を固定して置き、その上をスライドして本文内容を乗せたいのです、内容とは、中央にコンテンツ文、左にメニュー（背景あり）の囲み、右にリンク一覧の囲み、下部（ここが問題のフッター）にコピーライトやバナーなどを、という配置。フッター（コンテンツの幅と同じで中央寄せ）に画像がハマれば、問題解決なのですが・・・。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML> <head> <title>○●○</title> <meta name="keyword"content="○●○"> <meta name="description="content="○●○"> <META http-equiv="Content-Type"content="text/html;charset=euc-jp"> <META http-equiv="Content-style-Type"content="text/css"> <META NAME="auther"content="○●○"> <META NAME="copyright="content="c2012○●○."> <meta name="robots"content="index"> <style type="text/css"> body { font-family:"Lucida Sans Unicode","Verdana","Arial",sans-serif; font-size:11pt; background-color:#ffffff; background-image:url(○●○.jpg); background-repeat:no-repeat; background-position:50% 8%; background-attachment:fixed; A{text-decoration:none; cursor:w-resize; } A:HOVER{ text-decoration:none; border-width:1px 1px 1px 1px; border-style:solid solid solid solid; border-color:#7868ee; cursor:w-resize; } /*a {color: #017acd}*/ /* コンテナ */ div#container {width: 100%; margin-left: auto; margin-right: auto} /* ヘッダー */ div#header {background-color: #ffffff; font-color:#4876ff; /*background-image: url(★☆★.jpg);*/ background-repeat: no-repeat; background-position: center top; /*padding: 28px 20px 150px*/ } div#header h1 {margin: 0} div#header p {color: #ffffff; font-size: 0.50em; margin: 0} /* パンくずリスト */ p#bread {font-size: 0.85em; color:#191970; margin-top: 3px; margin-bottom: 30px} /* メイン */ div#main {width: 100%; float: left; margin-right: -230px} /* コンテンツ */ div#content {width: 100%; float: right; margin-left: -186px; margin-right: auto; margin-bottom: 25px} div#content h2, div#content h3, div#content p {margin-left: 186px; margin-right: 230px} div#content h2 {background-color: #92c9ff; background-image: url(); background-repeat: repeat-x; border: solid 1px #84c2ff; font-size: 0.875em; color: #00688b; line-height: 32px; padding-left: 6px; margin-top: 0; margin-bottom: 0} div#content h3 {background-color: #ffffff; background-image: url(); background-repeat: no-repeat; background-position: 0px 2px; font-size: 0.875em; line-height: 22px; padding-left: 26px; margin-top: 30px; margin-bottom: 0} div#content p {font-size: 0.75em; line-height: 1.6; margin-top: 10px} /* サイドバー */ div#sidebar { background-image:url(★☆★.jpg); width: 140px; float: left; margin-bottom: 25px} ul.sidemenu {font-size: 0.90em; margin-top: 0; margin-left: 0; padding-left: 0; line-height: 0} ul.sidemenu li {list-style-type: none} ul.sidemenu li a { display: block; line-height: 25px; text-decoration: none; text-align:right background-img:url(★☆★); padding-left: 10px} ul.sidemenu li a:hover { background-color: #cdc1c5; color: #8b1c62 } ～～～続
補足
～～続き ul.sidemenu ul {margin: 0;padding: 0} ul.sidemenu ul li a {background-img:url(★☆★); color:#5d478b; border-bottom: solid 1px #ab82ff; line-height: 24px} ul.sidemenu ul li a:hover {background-color: #eee0e5; color:#ffffff; border-bottom: solid 1px #ab82ff; }p.feed {略} /* 右サイドバー */ div#sidebar-right {width:150px;float: right} div.info {border: solid 1px #84c2ff; margin-bottom: 18px} div#sidebar-right h2 {background-color: #c6e3ff; background-image: url(grad-skyblue.png); color: #3c5916; font-size: 0.75em; text-align: center; padding: 5px; margin-top: 0; margin-bottom: 3px} div#sidebar-right p.photo {text-align: center} div#sidebar-right p {font-size: 0.75em;margin: 10px 5px} div#sidebar-right ul {font-size: 0.75em;margin: 5px;padding: 0} div#sidebar-right ul li {background-image: url(); background-repeat: no-repeat; background-position: 0 6px; padding-left: 13px; list-style-type: none} /* フッター */ div#footer { background-image:url(★☆★.jpg); background-repeat:no-repeat; background-position:top center; background-width:511px; background-height:229px; padding-top: 8px;;clear: both;margin:0 auto address {font-size: 0.75em; font-style: normal; text-align: center} </style></head> <body> <!-- ヘッダー --> <div id="header"> <!--新しいカウンター--> <script language="javascript" type="text/javascript" src="★☆★"> </script><noscript> <img src="http://★☆★"></noscript> <font color="#8db6cd"> <small> ○○○ ○○○更新日 <center> </div> <!-- メイン --> <div id="main"> <!-- コンテンツ --> <div id="content"> <center> <br><img src="rogo_★☆★.gif"valign="top"align="center"><br><br> <br>★☆★ <br><br> <!--★☆★--> <span style="font-size:11pt;font-weight:;font-style:italic;color:#bc8f8f;font-family:tempus sans itc;"> ★☆★ <br>★☆★<br> </span> <br><br><span align="center">◆～お知らせ～◆～<br><br> <!--★☆★ここから--> <center> <select name="プルダウンメニュー" size="1"> <option style="font-family:MS UI Gothic;background-color:#d3d3d3;color:#8b668b"align="center"> * ★☆★ * -12/ 05/ 02- *</option> </select><br><br> </div> <!-- サイドバー --> <div id="sidebar"> <ul class="sidemenu"> <li><a href="link.html"target="div#main">トップ</a></li> <li> ★☆★ <img src="○●○.gif"border="0"> <ul> <li><a href="○●○.html"link.html"target="content"><img src="○●○.gif"border="0"> ★☆★ <img src="../kira_r.gif"border="0"></a></li> <li><a href="link.html">★☆★</a></li> <li><a href="link.html">★☆★</a></li> </ul> </li> <li> ★☆★ <img src="○●○.gif"border="0"> <ul> <li><a href="link.html">★☆★</a></li> <li><a href="link.html">★☆★</a></li> <li><a href="link.html"><img src="○●○.gif"border="0"> ★☆★ <img src="../○●○.gif"border="0"></a></li> </ul> </li> <li> <img src="○●○.gif"border="0"> ★☆★ <ul> <li><a href="link.html"><img src="○●○.gif"border="0"> ★☆★ <img src="../○●○.gif"border="0"></a></li> <li><a href="link.html">★☆★</a></li> </ul> </li> <li> プロフィール <img src="★☆★.gif"border="0"> <ul> <li><a href="link.html">★☆★</a></li> <li><a href="link.html">自己紹介</a></li> <li><a href="link.html"> 日記 </a></li> <li><a href="link.html"> Mail </a></li> </ul> </li></ul> </div></div> <!-- 右サイドバー --> <div class="info"> <h2> * リンク * </h2> <ul> <li><a href="★☆★"target="_blank"><img src="box_old_bana/★☆★.gif"border="0"alt=" "></a></li><br> /*略*/ </ul> </div> <!-- フッター --> <div id="footer"> <font color="#191970"> ★☆★の著作権を、”★☆★”が有します<br> <address><big>Copyright ⓒ 2002-2012 metoeruri all right reserved.</address></big> <br>Since ★☆★<br> ★☆★ <img src="★☆★.jpg"bordercolor="#87ceeb"alt="★☆★"><br><br> </div> </body></html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
/* 配置以外以外のフォントサイズなど細かい指定 */ /* 提示されたサンプルを基にしています。以下は消したほうがわかりやすいかも */ div.nav,div.aside{font-size:0.9em;} div.header{position:relative;} div.header h1{color:white;margin:0;font-size:0.5em;} div.header p{color: #ffffff;font-size: 0.5em;} div.header div.nav ul li{text-align:center;} div.header div.nav{background:yellow url(.jpg);} div.header div.nav ul li a{background:url(.gif) lime;} div.header div.nav ul li a:hover{background-color: #cdc1c5;color: #8b1c62} div.section{background-color:silver;} div.section h2{ ＿background: #92c9ff url() repeat-x; ＿border: solid 1px #84c2ff; ＿font-size: 0.875em; ＿color: #00688b; } div.section div.section h3{ ＿background:white url() no-repeat 0px 2px; ＿font-size: 0.875em; } div.section div.aside{ ＿position:absolute; ＿top:0;right:0; ＿width:150px; ＿height:100%; } /* わかりやすくするための背景色や追加スタイルなど */ body{background-color:gray;} p{ ＿line-height:1.6em; ＿text-indent:1em; ＿margin:0 1em; } div.header div.nav h2{display:none;} div.header div.nav ul li a{ ＿border:outset 2px green; } div.section,div.header div.nav{min-height:480px;} div.section div.section{min-height:0;} --> ＿</style> </head> <body> ＿<div class="header" id="TOP"> ＿＿<h1>サンプル</h1> ＿＿<div class="nav"> ＿＿＿<h2>サイト内リンク</h2> ＿＿＿<ul> ＿＿＿＿<li><a href="../">Top</a></li> ＿＿＿＿<li><a href="./books">書籍</a></li> ＿＿＿＿<li><a href="./profile">自己紹介</a></li> ＿＿＿</ul> ＿＿＿<div class="feedBack"> ＿＿＿＿<p> ＿＿＿＿＿あいう ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿かきく ＿＿＿＿</p> ＿＿＿</div> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>本文見出し</h2> ＿＿<div class="section" id="Question"> ＿＿＿<h3>質問</h3> ＿＿＿<p> ＿＿＿＿ヘッダー・メイン・サイドバー（左右）・フッターの５コマ組みのサイトを表現したいのですが、フッターに指定した画像を全体サイズでセンターに寄せて（画像の上に、真ん中寄せでテキストを乗せたい）反映させるにはどうしたらいいのでしょうか。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿フッターに指定しているjpg画像のサイズは、(○●.jpg);511×229pxです、よろしくお願いします。 ＿＿＿</p> ＿＿</div> ＿＿<div class="section" id="Answer"> ＿＿＿<h3>回答</h3> ＿＿＿<p> ＿＿＿＿背景画像を中心に配置し、その上に同サイズでテキストの入っているブロックを置くことになります。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿なお、HTMLやスタイルシートに多くの誤りがありますが、必要ならどこがどう違うのかを説明します。とりあえず検証サイトでチェックしてみてください。 ＿＿＿</p> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>サイト外リンク</h3> ＿＿＿<p> ＿＿＿＿このサイトに関係する外部リンクです。 ＿＿＿</p> ＿＿＿<ul> ＿＿＿＿<li><a href="http：//www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html">HTML 4.01 仕様書(邦訳)</a></li> ＿＿＿＿<li><a href="http：//www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html">REC-CSS2 邦訳</a></li> ＿＿＿＿<li><a href="http：//www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS2.1) Specification</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<p>～～テキスト文章～～</p> ＿＿<address>～アドレスのテキスト～</address> ＿＿<p>○○おなじくテキスト</p> ＿＿<p><img src="Logo.jpg" width="240" height="10" alt="～◆◆(サイトの名前)～"></p> ＿</div> </body> </html>
お礼
ご回答を参考に直してみましたが、 今度は、フッターが、右サイドバーの下部に横付けになり、 スクロールして初めて読める位置に反映していまいます。 /* フッター */ div#footer { background-image:url(○●jpg); background-repeat:no-repeat; background-position:50% 50%; width:511px; height:229px; margin-top: 0px; padding-top: 8px; clear: both;★→これで回り込みをどう指定しているのですか？ address {font-size: 0.75em; font-style: normal; text-align: center} </style> どこをどう直せばいいですか。 もう、さっぱりわかりません。 理解の外ですが、もうテーブル組みで全部処理した方が早いですか？ よろしくお願いいたします。
補足
ご回答ありがとうございます。 >HTMLやスタイルシートに多くの誤りがありますが そうですか・・・ ＡＮｏ１の方にも、指摘されましたが、資料が間違っているとはどういうことなのでしょう、、、奨励されている多くの選択肢から何を信じとり何を選びとればいいのか全く混乱します。 わたくしの理解度に問題があるのは承知しておりましたが、、、。 もちろん、ホームページビルダーなどにも頼らずに自己流で学び、運営してきたサイトなのですが、かなり落ち込みました。 今後は、こういう行為は止めることにします。 ちなみに、今まではフレームセットで二分割のページを作っていました、つまり、リンクをクリックすれば、左側の狭いフレームはそのままで、右側大きな方のフレームだけ更新させる方法で問題なくやってきました、今回は、フレーム批判を知ったため、新しく組み治しをしたかったのです。 採用するにしても自分でもっとわかっていなければならないはずですね。 フッターに、左サイドバーの背景と姉妹の背景画像を設定したかった、それだけなのです。しかし、フッターって何？何に属するの？意味もわかっていませんでした、 それなら全て一面にしてテーブルでも組んで作ればいいかな、と疑いながらの質問でした、反省しきりです・・・ スタイルシートで検索すればするで、１０年以上も前の情報しかなかったりします、それが実情なんです、いったいどこにどうやって最も信頼性のある情報があることを知り、私の発想のどこが古くどこが間違っていてどこが足らないのでしょうか。ＯＳはＷｉｎＸｐ、ブラウザはＩＥ８のまま維持するつもりで、ほかのブラウザへの反映についても網羅している、わかりやすいサイトはありませんか？そもそもひとつも誤りのないタグだけを打ちこむことは、可能なのですか？
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そんな冗長なスタイルシートや文書構造がわからないHTMLじゃ、他人は無論、自分でも訳がわからないでしょう。 私も途中であきらめました。 とてもきついですが、初歩から学びなおしたほうが良いです。この回答の最後にサンプルを書いておきますので、それをよく読んでください。 まず、 ・HTMLは、HTML4.01strict(ないしXHTML1.0strict,XHTML1.1)で作成しましょう。 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 『スタイルやフォーマットを整えるためには、HTMLのプレゼンテーション属性ではなくスタイルシートを使用すべきである。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 『構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 以上、1999年勧告のHTML4.01の仕様書より・・・後でこれらの前後をよく読んで置いてください。 本題ですが、 ＞ヘッダー・メイン・サイドバー（左右）・フッターの５コマ組みのサイトを表現したい これは、最初の第一歩が間違っているのです。HTMLは、上記のリンクを読まれるとわかるように文書を読み解き、それを構成する構成要素に分解してタグでマークアップする言語です。その時点ではデザインは考えません。 もし、デザインを先に考えてしまうと ・今右に置こうと考えていたけど、先で左に置くことにしたらHTMLを書き換えなきゃならない ・スタイルシートを読み取れない検索エンジンには文書の意味が読み取れない ・記事を書き直すとき、どこになにを書けば良いかわからない ・数年後に自身が見直しても訳がわからない ・HTMLもスタイルシートも煩雑になる。 難点を挙げたら膨大なものになるでしょう。 [HTML] ・class名は「文書に構造を付加するため」のものにする。 sidebar-right,sidemenuはその意味では失格です。 ・属性によるデザインの指定は非推奨です。 "align="center"、border="0"bordercolor="#87ceeb" ・アンカーターやjavascriptのターゲット以外の目的でidは使わない。 スタイルシートにため(だけ)に使用するとHTMLもCSSも煩雑になります。 [スタイルシート] ・継承されるプロパティは上位に一度だけ記述する ・継承されないプロパティは、セレクタをグループ化して一度しか書かない ・簡略化プロパティが用意されているものについては、それを利用する。 ★質問は立った次の数行で解決するはずです。 div.footer{ background:url(images/footer.jpg) no-repeat 50% 50% ; } div.footer *{margin:0 auto;width:511px;text-align:center;} サンプル後半は、次の回答でしめします。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み****HTML4.01strictでHTMLを書くようにしましょう。*** ※なお、\t(タブ)は＿に、:(コロン)は：(全角)に置換してあるので戻してください。 <!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"> <!-- /* 質問のフッターの指定方法 */ div.footer{ background:url(images/footer.jpg) no-repeat 50% 50% ; } div.footer *{margin:0 auto;width:511px;text-align:center;} /* 配置 */ html,body{margin:0;padding:0;} div.header,div.section,div.footer{ ＿width:100%;min-width:480px;max-width:1020px; ＿margin:0 auto; } div.header{position:relative;} div.header p{margin: 0;} div.header div.nav{ ＿position:absolute; ＿top:100%;left:0; ＿width:170px; ＿z-index:10; } div.header div.nav ul, div.header div.nav ul li{ ＿display:block;list-style: none; ＿margin:0;padding:0; ＿line-height: 25px; } div.header div.nav ul li{margin:4px 8px;} div.header div.nav ul li a{ ＿display: block; ＿text-decoration: none; ＿margin: 0 1em; } div.section{ ＿position:relative; } div.section h2, div.section div.section{ ＿width:auto;min-width:150px;max-width:690px; ＿margin:0 155px 0 175px ; } div.section h2,div.section h3{margin-top:0;margin-bottom:0;} div.section h2{line-height: 32px;padding-left: 6px;} div.section div.section h3{ ＿line-height: 22px; ＿padding-left: 26px; ＿margin-top: 30px; } div.section div.aside{ ＿position:absolute;top:0;right:0; ＿width:150px;height:100%; }
お礼
★W3C CSS 検証サービス よく読みます、ありがとうございました。
補足
ご回答ありがとうございます。 >初歩から学びなおしたほうが良いです その通りです。 今までは、第一歩から自己流で全てタグ打ち（参考サイトをコピペしたりして）をしてきました、（数年経っていますが、おっしゃるように、あとから見ると、外部ｃｓｓなどを書いたものはさっぱりわからないということも、まま生じていました） 今回のこのタグは、たまたまサーバーを引っ越しする機会があり新しいデザインにしたいと、ある資料（普通に販売されており入手も可能です）を元に、ほぼ、コピーしたものなのです、 （これまでは、フレームで二分割をしていましたが、どこかでそもそもフレーム自体が時代遅れだという記事を読みまして） まず、その資料を、そしてその資料を記述した方、そしてその資料を採用した私を否定されました、 おっしゃるように、「一度いじって設定したら、更新するテキスト部分だけ、コピペしていけばいいだけだから、自分でよくわかっていなくても、まぁ、いいや」 そういう投げやりな態度は私にありました・・・。 資料を鵜呑みにしない～ということで納得できました。 ご指示のように、推奨の<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http：//www.w3.org/TR/html4/strict.dtd"> 宣言から始まるタグを打ってはいます。 デザインに凝りたくなると、もっと上つまりjavascriptなどを採用したくなりますが、私には土台無理だとあきらめ、今回、資料の通りに反映させてみようと試みました。勉強するにしても大変ですね、仕事をやめて時間を取るしか方法はないです。 しかしそれは無理な話なので・・・ とにかく、いろんな記事、いろんな考えの記事やサイトがあるため、なおさら自分の手法が確立していない初心者としては混乱します。それが実情です。 結論としては、手法が確立していない事項については、安易に質問はしないことにしました、人や資料に頼らないことですね。 回答のタグは参考になりました。ありがとうございました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ご質問についてですが、 <style type="text/css"> body { font-family:"Lucida Sans Unicode","Verdana","Arial",sans-serif; font-size:11pt; background-color:#ffffff; background-image:url(○●○.jpg); background-repeat:no-repeat; background-position:50% 8%; background-attachment:fixed; この部分のbackground-image:url(○●○.jpg); の画像をアタッチメントで固定し、全体をスクロールしていっても、そのまま動かないレイアウトにしてあるのです、 もちろんコンテンツ本文を整理しコンパクトにすれば、あまり意味ない指定なのですが、この画像を更新によって日々替えていきたいのです。このレイアウト部分は、古い前のページを活かして私が作り込んだものです。
補足
いろいろとありがとうございます、 月末で忙しいため、確認作業はこれからなのですが、 質問があります、 フレームについてはどうお考えになりますか？ 私のサイトの性質上、実はフレームでサイドバーを反映させ続けることが理想なのですが、フレームを否定されたりインラインフレームを推奨されたりします。 フレームセットを使用することについて、注意することなどがきちんと書かれているサイトなどはありますか？ （読んで下さいとお書きいただいている文章そのものにありますか？（未完読ですみません）