ベストアンサー

CSS初心者です

2009/07/08 22:12

はじめまして、ホームページ初心者の者です。友人のパソコンを借りて、現在ホームページを作成しています。使用しているソフトはAdobe Dreamweaver CS 4です。ソフトは素晴らしく、すぐにCSSでHeader,Menu,MainContent,Footerを分けることができたのですが、肝心の TextFieldの部分がうまくいきません。（また、HTMLを観て見るとグチャグチャになってて、、、汗　Divとか使用して綺麗にしろといわれたのですが、意味不明です、、、）また出来れば、このテキストフィールドはDreamweaver無しでも簡易的に更新ができるように仕上げたいのですが、皆様ならこいうレイアウトのホームページをCSSで作成する場合、どいう風にされるか是非教えてください。 Header　900x125 Menu　900x30 mainContent　900x420 Footer　900x25 TextField　550x350 http://upload.fam.cx/cgi-bin/img-box/3um90708103139.gif *ちなみにheaderとMainContentは作成した画像をBGで付けている為（リピート無し）、サイズは固定にしています。現在、TextField以外はすべてうまくいったのですが、TextFieldだけどうやって作ればよいのか悩みます（汗　どうか、お力をお貸しください。どうぞ、宜しくお願いいたします。

sonywood
お礼率50% (102/204)

HTML
回答数8
ありがとう数5

みんなの回答 （8）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

abril
ベストアンサー率69% (388/560)

2009/07/10 16:45 回答No.7

すみません、No.6のCSSで2つ補足を書き忘れました。 .header {～}中の"text-transform: none;"は、初期値が元々autoですので不要です。削除してあります。 .footer {～}中の"clip: rect(auto,auto,auto,auto);"は削除してあります。 clipプロパティは絶対配置"position: absolute;"を指定された要素しか適用対象になりませんし、初期値も元々autoですので不要です。削除してあります。

質問者

お礼 2009/07/13 15:31

お返事が遅くなりまして、大変申し訳ございません。 abril様のアドバイスに従ってCSSを構成してみたところ、うまくいきました！本当にありがとうございます。希望通り以上の仕上がりが出来ただけでなく、abril様の丁寧なご説明おかげで、色々とHTMLとCSSを学びながらホームページを修正することができました。abril様の多々なるご足労おかけしてしまいましたが、本当に感謝しております。ありがとうございました！！ sonywood

その他の回答 (7)

noname#119957

2009/07/13 03:24 回答No.8

IE以外では、ブロック要素（divなど）でheight（高さ）をピクセル単位で指定すると、中身が縦に伸びたときに困ります。 ※これを解決する方法です。１ピクセル四方のBOXをclear:both;で挿入します。 ■HTML <div div="box"><h2>見出し</h2><p>内容</p><dic class="dummy"></div></div> ■CSS #box { width:500px; clear:both;}/*高さ指定なし*/ .dummy {width:1px; height:1px; line-height:1px; clear:both;}/*boxの高さを指定しないが、IE以外でも中身のテキストが拡大されたときにboxが自動で伸縮させることができます。（IE以外でも・・）*/ ■同様に、<div class="dummy"></div>は、float-left とfloat-rightの下に持ってくると、どちから自動で拡大する中身にあわせて、これを囲む外側の<div>の高さを自動調整することができます。 <div class="wrapper"> <div class="floatleft-box">左寄せBOX</div> <div class="floatright-box">右寄せBOX</div> <div class="dummy"></div> </div>これでwrapperの高さが伸縮します。

質問者

お礼 2009/07/13 15:36

はじめまして、ken_tyan様、ご回答していただきまして誠にありがとうございます。なるほど、上記のやり方も良いですね！中身が縦に伸びて困ったこともありました。自動調整についてのご説明はご丁寧で、非常に勉強になりました。ありがとうございます！ sonywood

abril
ベストアンサー率69% (388/560)

2009/07/10 16:38 回答No.6

えーと、まだ色々間違って（勘違いされて？）らっしゃるみたいなので、追加の補足のご希望も含む形でHTMLから書き直させて頂きました。まず、HTMLは下記をベースにして下さい。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>タイトル</title> <link href="susukino_layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="header"> 【ヘッダー領域】 <ul class="navi"> <li><a href="#">ナビ1</a>　｜</li> <li><a href="#">ナビ2</a>　｜</li> <li><a href="#">お問い合わせ・場所</a>　｜</li> </ul> </div> <div class="menu"> 【メニュー領域】 </div> <div class="mainContent"> 【メインコンテント領域】 <div class="TextField"> <p>【TextField領域】文字文字文字文字</p> </div> </div> <div class="footer">copyright c 2009 Susukino Soroban Class all rights reserved.</div> </body> </html> ---------------------------------------------------------------------- 主な変更点です。 ◆【～】は各領域が分かり易い様に仮に入れてあります。 ◆オリジナルでは何故かTextFieldのスタイルだけHTMLファイルのhead内にstyle要素で直接記述されていましたが、外部ファイルで一括管理する事をお奨めしますので、susukino_layout.cssの中に含ませて頂きました。 ◆bodyのclassは不要と思われますので削除しました。もし何かどうしてもclass属性を与えてスタイルを変えなければならない理由があるならお知らせ下さい。 ◆header内の「お問い合わせ～」等は他にもいくつか項目があるナビ部分と想定しましたので、リストでマークアップしてみました。 ◆menu内は、 <div align="center">～</div>で入れ子にしなくても既にCSSでセンタリングが指定されていますので、不要です。 ◆No.5でも指摘しましたが、TextFieldはmainContentの子要素でないと構造がおかしくなります。 ---------------------------------------------------------------------- 【CSS】susukino_layout.css 「※」のコメント部分は実際にCSSファイルとして使う時は必ず削除して下さい。 ---------------------------------------------------------------------- body { background-color: #C96; } ※"background-position: center center;"は無意味ですので削除。 .header { position: relative;※子要素のul.naviをheader内の「下端・右端」に合わせる為に必要。 width: 900px; height: 125px; margin: 0 auto;※一括指定できるプロパティはまとめて記述をすっきりさせます。 background: url(Topbar_tittle.gif) no-repeat;※同上 font-family: "ＭＳＰ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 12px; font-style: normal; } ※"text-align: right;"は、header内のul.navi部分以外の要素に適用する必要がないのであれば、不要ですので削除を。 .header ul.navi {※新規追加。リストにしてheaderの領域に対して絶対位置で「下端・右端」に配置される様に指定しています。 position: absolute; bottom: 0; right: 0; list-style: none; margin: 0; padding: 0; } .header ul.navi li {※新規追加。リストアイテムを横並びにしてアイテム毎に右側に余白を持たせています。 display: inline; margin: 0 0.5em 0 0; padding: 0; } .menu { width: 900px; height: 30px; margin: 0 auto;※一括指定に。 padding-top: 5px; background-color: #FC9; text-align: center; } .mainContent { position: relative;※抜けてました。 background: url(BodyBG_Numbers.gif) no-repeat;※一括指定に。 height: 420px; width: 900px; margin: 0 auto;※一括指定に。 } ※「Text Fieldがどうしてもズレ」ていたのは、"position: relative;"が抜けており、計算の基点がおかしくなってしまった為です。 .TextField { position: absolute; width: 550px; height: 350px; top: 30px;※「（"position: relative;"を指定してある）mainContentを基準にした位置」で計算し直したものです。 left: 300px;※同上。この2つの値はお好みで調節して下さい。 border: medium outset #FFF;※一括指定に。 border-bottom-color: #999;※上記一括指定と”異なる部分だけ”を上書きしています。 background-color: #FFF; overflow: auto; } .footer { width: 900px; height: 25px; margin: 0 auto;※一括指定に。 background-color: #FFCC66; color: #333; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; font-size: 18px; font-style: normal; text-align: right; } ---------------------------------------------------------------------- 上記サンプルで、IE6/7、Firefox2/3、Safari3、Google Chrome、Opera9.61で同様の表示結果を得られています。これで試してみて、不具合やご希望と違う点、もしくはよくわらかない点がある様でしたら具体的に補足して下さい。

abril
ベストアンサー率69% (388/560)

2009/07/10 14:48 回答No.5

No.3-4です。連続投稿ですみません。えーと。とりあえず、No.3のお礼の方にコピペされたHTMLのソースを再度見直してみたんですが、No.3で提供させて頂いたサンプルとは大枠の構造が変わっていたり（コピペの間違いですか？）、ちょっとどうかな、と思う点があります。「※」のコメント部分を確認して頂きたいのですが。 ---------------------------------------------------------------------- <body class="body"> ---------------------------------------------------------------------- ※間違い、というわけではないですが、class名に要素（タグ）名と被る様なものは紛らわしいので避けた方が宜しいかと… ---------------------------------------------------------------------- <div class="header"><font size="2"><br /> <br /> <br /> <br /> <br /> <br /> 　｜　<a href="a">お問い合わせ・場所</a>　｜</font></div> ---------------------------------------------------------------------- ※ヘッダー部分がこれだけ強制改行がある様な内容でしたら、高さを固定しない方が都合が良いと思いますが（デザインにもよりますが） ---------------------------------------------------------------------- <div class="mainContent"></div> <div class="TextField"> <p>class "TextField" の内容がここに入ります</p> </div> ---------------------------------------------------------------------- ※このマークアップだと、mainContentの外にTextFieldがある事になり、構造がおかしいです。

質問者

補足 2009/07/10 15:30

重ね重ね、ご足労をおかけいたします。「お問い合わせ」の部分ですが、デザイン的にどうしてもheaderの右下に表示させたかったのですが、CS4で「右側に寄せる」は見つかったのですが、下に表示させることができなかった為、強制改行で調整しました。修正したコードを再度投稿します。【HTML】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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">  </style> <link href="susukino_layout.css" rel="stylesheet" type="text/css" /> </head> <body class="body"> <div class="header"></div> <div class="menu"> <div align="center"></div> </div> <div class="mainContent"></div> <div class="TextField">文字文字文字文字</div> <div class="footer">フッター</div> </body> </html>

abril
ベストアンサー率69% (388/560)

2009/07/10 14:35 回答No.4

No.3です。 No.2へのお礼と補足を見ると、HTMLファイル内にはbodyとTextFieldのスタイルしか書かれていませんし、外部スタイルシート"susukino_layout.css"が存在している様ですので、そちらのCSSファイルのソースも補足して下さい。

質問者

補足 2009/07/10 15:23

早速のお返事ありがとうございます。すみません、「お礼」の箇所にCSSをコピペしたつもりだったのですが、HTMLのコードが被っていました。申し訳ございません。下記にてCSSのコードをコピペいたしました。どうぞ、宜しくお願いいたします。【CSS】susukino_layout.css .body { background-color: #C96; background-position: center center; } .header { background-image: url(Topbar_tittle.gif); background-repeat: no-repeat; height: 125px; width: 900px; text-transform: none; font-family: "ＭＳＰ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 12px; font-style: normal; text-align: right; margin-right: auto; margin-left: auto; } .menu { background-color: #FC9; height: 30px; width: 900px; text-align: center; margin-right: auto; margin-left: auto; padding-top: 5px; } .mainContent { background-image: url(BodyBG_Numbers.gif); background-repeat: no-repeat; height: 420px; width: 900px; margin-right: auto; margin-left: auto; } .footer { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; font-size: 18px; font-style: normal; color: #333; background-color: #FFCC66; text-align: right; height: 25px; width: 900px; clip: rect(auto,auto,auto,auto); margin-right: auto; margin-left: auto; }

abril
ベストアンサー率69% (388/560)

2009/07/09 19:30 回答No.3

横から失礼します。 > Divで上記のようにしてみたところ、mainContentとTextFieldが被らず、mainContentの下にTextFieldが来るようになってしまいました。あのマークアップ（mainContentの子要素としてとTextFieldがある）であれば、CSSで余程妙な指定をしない限り、放っておいても「minContentとTextFieldが被」って「mainContentの」上に「TextFieldが来る」という基本形になる筈ですが…？もしかしてCSS側でpositionとか使ってますか？それとも、mainContentのコンテナ内にはTextField以外にも何か要素が入りますか？もし後者なら、本件の様な各主要コンテナの「高さ」が決め打ちされている場合はそれ相応の対処をしておかないと、その要素によってTextFieldのコンテナの描画領域がmainContent外まで押し出されてしまいますので、「mainContentの下にTextFieldが来る」という状態も有り得ます。つまり、 <div class="mainContent"> 要素要素要素要素要素要素要素… <div class="TextField">要素…</div> 要素要素… </div> という様なマークアップになっていれば、です。本件の場合、Header、Menu、Footerは内包する要素がある程度決め打ちできるものが想定されるので、高さを固定しても支障がない場合が多いですが、mainContentとTextFieldは、内包する要素のボリュームが流動的である場合がほとんどだと思います。その場合、その内包する要素がmainContentやTextFieldで固定された高さを”相対的にはみ出して”しまった場合、そのはみ出した分をどうするか、という事を必ず考えてそれぞれのスタイルを設定しておかねばなりません。 ”はみ出した”場合の対処として可能なのは、・はみ出した分を隠す・はみ出した分をそのまま表示（本来のコンテナの枠を超えて隣接するコンテナに重なって表示）・はみ出した分はコンテナにスクロールバーを出してスクロールして表示の3つです。といっても、上2つは閲覧者が必要な情報を適切に入手できない事になりますので、通常は最後の方法がとられます。何にせよ、現在CSSでどの様な指定を実際にしているのか、ソースを公開して頂かないと正確な検証は難しいですが、一応、No.2様のマークアップで、CSSは質問文中にある条件を満たす様に、仮のサンプルを作って検証してみました。＃質問者様のコンテテンツのDOCTYPE等が不明ですが、Dreamweaver CS4で作っておられるという事なので、仮にXHTML1.1/XML宣言無/UTF-8と想定しています。＃http://upload.fam.cx/cgi-bin/img-box/3um90708103139.gif　が現在Not Foundになってしまいますが、確か以前見た時のイメージでは、TextFieldのコンテナはmainContentに対して上下均等の余白を取り、右側にもいくばくかの余白があったと記憶していますので、そういう感じにしてあります。＃各コンテナブロックは領域が分かり易い様に背景色を変えています。【A】mainContentのコンテナ内にはTextField以外の要素が入らない場合 --------------------------------------------------------------------- 【HTML】 --------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> （省略） <div class="Header">ヘッダー</div> <div class="Menu">メニュー</div> <div class="mainContent"> <div class="TextField"> <p>最初テキストフィールド</p><p>テキストフィールド</p><p>テキストフィールド</p><p>テキストフィールド</p><p>テキストフィールド</p><p>テキストフィールド</p><p>テキストフィールド</p><p>テキストフィールド</p><p>テキストフィールド</p><p>テキストフィールド</p><p>テキストフィールド</p><p>テキストフィールド</p><p>最後テキストフィールド</p> </div> </div> <div class="Footer">フッター</div> （省略） --------------------------------------------------------------------- 【CSS】 --------------------------------------------------------------------- body { margin: 0; padding: 0; background: #fff; color: #000; font-size: 12px; } div.Header { width: 900px; height: 125px; background: #fcc; } div.Menu { width: 900px; height: 30px; background: #cfc; } div.mainContent { position: relative; width: 900px; height: 420px; background: #ffc; } div.TextField { position: absolute; width: 550px; height: 350px; top: 35px; left: 300px; background: #eee; overflow: auto; } div.Footer { width: 900px; height: 25px; background: #ccf; } --------------------------------------------------------------------- 【B】mainContentのコンテナ内にTextField以外の要素が入る合 --------------------------------------------------------------------- 【HTML】 --------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> （省略） <div class="Header">ヘッダー</div> <div class="Menu">メニュー</div> <div class="mainContent"> <p>(1)メインコンテントメインコンテントメインコンテントメインコンテントメインコンテントメインコンテントメインコンテント</p> <div class="TextField"> <p>最初テキストフィールド</p><p>テキストフィールド</p><p>テキストフィールド</p><p>テキストフィールド</p><p>テキストフィールド</p><p>テキストフィールド</p><p>テキストフィールド</p><p>テキストフィールド</p><p>テキストフィールド</p><p>テキストフィールド</p><p>テキストフィールド</p><p>テキストフィールド</p><p>最後テキストフィールド</p> </div> <p>(2)メインコンテントメインコンテントメインコンテントメインコンテントメインコンテントメインコンテントメインコンテント</p> </div> <div class="Footer">フッター</div> （省略） --------------------------------------------------------------------- 【CSS】 --------------------------------------------------------------------- body {（同上）} div.Header {（同上）} div.Menu {（同上）} div.mainContent {（同上）} div.mainContent p { width: 300px; } div.TextField {（同上）} div.Footer {（同上）} --------------------------------------------------------------------- あくまで一例です。HTML側の実際の内容によっては違うCSSのスタイルが必要な場合もあります。いかがでしょうか？ご希望通りにならないとか、検証条件が異なる様でしたら具体的に補足して下さい。

質問者

お礼 2009/07/10 13:34

すみません、文字数の関係でお礼の箇所にCSSのコードを表記させていただきます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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">  </style> <link href="susukino_layout.css" rel="stylesheet" type="text/css" /> <script type="text/javascript">  </script> </head> <body class="body"> <div class="header"><font size="2"><br /> <br /> <br /> <br /> <br /> <br /> 　｜　<a href="a">お問い合わせ・場所</a>　｜</font></div> <div class="menu"> <div align="center">　　　　　</div> </div> <div class="mainContent"></div> <div class="TextField"> <p>class "TextField" の内容がここに入ります</p> </div> <div class="footer">copyright c 2009 Susukino Soroban Class all rights reserved.</div> </body> </html>

質問者

補足 2009/07/10 13:20

お返事ありがとうございます！早速、ポジションをabsolute絶対にすることで、問題を解決することができました。ただ、私の説明不足で大変申し訳ないのですが、これらを全てセンターへするために、header,menu,mainContent,Footerなどのマージン、右と左をautoにした為、Text Fieldがどうしてもズレてしまいます。これは解消することは可能でしょうか？念のため、下記にて今の現状を書いておきます。どうぞ、宜しくお願いいたします。 HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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">  </style> <link href="susukino_layout.css" rel="stylesheet" type="text/css" /> <script type="text/javascript">  </script> </head> <body class="body"> <div class="header"><font size="2"> </div> <div class="menu"> <div align="center">　　　　　</div> </div> <div class="mainContent"></div> <div class="TextField"> <p>class "TextField" の内容がここに入ります</p> </div> <div class="footer">Footer</div> </body> </html>

Kirishima
ベストアンサー率32% (155/480)

2009/07/08 23:25 回答No.2

まずは、 divでこのような構造にしましょう。 <div class="Header"> </div> <div class="Menu"> </div> <div class="mainContent"> <div class="TextField"> </div> </div> <div class="Footer"> </div> TextFieldの周囲のアキはテキトーでいいんですか？

質問者

補足 2009/07/09 16:31

早速のご回答、ありがとうございます！ Divで上記のようにしてみたところ、minContentとTextFieldが被らず、mainContentの下にTextFieldが来るようになってしまいました。どのようにして、mainContentの上にTextFieldが来るように出来ますでしょうか？宜しくお願いいたします。

noname#100277

2009/07/08 22:52 回答No.1

コレだけでは回答出来ません。

質問者

補足 2009/07/09 16:26

お返事ありがとうございます。そうですね、僕自身もどう説明をすればいいのか分かってなかったかもしれません。申し訳ありません。 Kirishima様がおっしゃったように、構成はできたのですが、まずTextFieldが下にくるmainContentと被らせることが出来ず、mainContentの下にTextFieldが来てしまいます。まず、その修正がしたいという点が一つです。次に、もし出来るのであればTextField内に入れる文章をワードか何かで簡単に修正できるようにしたいのですが、それをどいうすればいいのかが分からないという事です。すみません、説明不足かもしれませんが、ほかにどいう情報が必要か教えていただければ助かります。どうぞ、宜しくお願いいたします。