- ベストアンサー
CSSを用いたレイアウト（メニュー部分の幅指定）についての質問です
無料配布CSSテンプレートを用いてホームページ作成しているほぼ初心者です。 入門書を片手に文字の大きさや背景画像の位置などに微調整を加えいていたのですが、メニュー部分（擬似フレームと言うのでしょうか？）の幅の変更についてのみ、どの記述をいじればいいのかがわかりません。 配布元サイトは既に閉鎖しており、そちらへの質問は不可です。ネットでも検索しましたが、元制作者が使っているような記述がみつかりませんでした（テンプレートの該当部分はほぼ<body>と<menu>のみです）。 該当しそうなところに<wight=〇%>を書いては確認、という作業を繰り返しましたが、どうしてもうまくいかないので質問しました。どうぞよろしくお願いします。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
はじめまして この問題は、HTMLとCSSの両方を確認しないと分からないので、直接のアドバイスはできません。差し支えなければ、HTMLを教えてください。（外部にCSSがあれば、そのCSSも教えてください） また、以下の２つのHTMLを試してみてください。 １------------------------------------------------ <HTML> <HEAD> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>Sample</TITLE> <STYLE type="text/css"> <!-- .main{ border :1px solid #000000; width:160px; } --> </STYLE> </HEAD> <BODY> <DIV class="main">Hello world</DIV> </BODY> </HTML> ２------------------------------------------------ <HTML> <HEAD> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>Sample</TITLE> </HEAD> <BODY> <DIV style="border :1px solid #000000;width:160px;">Hello world</DIV> </BODY> </HTML>
その他の回答 (4)
- abril
- ベストアンサー率69% (388/560)
ANo.2です。ANo.1とANo.2への補足を読みましたが、やはりちょっと混乱をされている様な気がします。 > body{～}、menu{～}の中に<width=>を記述しても、どちらにも反映されない > body{}とmenu{}の幅を指定するには、どのような記述が適切でしょうか？ body {～}はともかく、”menu {～}"と"#menu {～}"というセレクタでは全く意味するところも適用される箇所も違いますよ。 bodyはbodyというHTMLの要素（ここではHTMLタグの事だと思っておいて下さい）ですから、body要素に対するプロパティの記述として、body {プロパティ名: 値; }という記述でおかしな点はありません。 ですが、もう一つの方がもし、「menu {～}」という記述だったら提供対象はmenuというHTMLの要素、という事になってしまいます。menuというHTMLタグは存在する事はしますが、メニューリストを作成する古いHTMLの要素で古いHTML文書との互換の為だけに残されているもので、非推奨であり現在主力のHTML文書上では廃止されている為、現状ではほとんど使われていません。CSSのテンプレートを配布するにあたって、わざわざこの様なmenuタグでのマークアップに対応する様な構成にはしないでしょう。実際、ANo.2でのCSSのソースの抜粋を見ましたら、案の定、"#menu {～}"というidセレクタの事でしたし。 まずはセレクタの意味するところをきちんと理解する事ですね。ここはCSSを使いこなすにあたっての基本中の基本の事ですので、あやふやな状態にしておくとこの先かなり苦労（応用がきかなくなる）されますよ。 相変わらずHTML側の実際のマークアップが提供されていないので、確証はありませんが、おそらく「メニュー」の部分は<ul id="menu">～</ul>か<div id="menu">～</div>かと推測します。また、「疑似フレーム」という事は、左右2コラムにわかれ、左コラムが上記部分で、右コラムのメイン部分が<div id="main">～</div>とか何とかいうマークアップでCSS中にはその部分に相当する"#main {～}"とかいうセレクタがあると思いますが、どうでしょう？ それとも、上がメニュー下がメイン、という上下2コラムですか？それによって話はまた違ってくるのですが。 左右2コラムだとすると、通常、「メニュー」と「メイン」を包む親要素が更にあって（contents、container、wrapperとかいうネーミングのidセレクタになっている事が多いです）、その中で左右コラムの幅をパーセンテージなりpxなりemなりの単位識別子で設定されているのが一般的です。 一方、上下2コラムだとすると、上記の様な親要素でコンテンツ全体の幅を決めておき、メニューはその親要素の幅をそのまま継承させる、というのが通常考えられるパターンですが？ その辺の情報を更に明らかにして下さい。
お礼
アドバイスありがとうございます。 CSSの方から勘違いがあったようですが、最終的にHTMLに誤りを発見し、解決しました。 詳しいご説明感謝いたします。
- askaaska
- ベストアンサー率35% (1455/4149)
回答ありがと。 やっぱわかんないや。 もし見ることが可能なら現物をまるまま見せてもらいたいわ。 #2様への回答も見たけど bodyへの幅指定は 例えばwidth:600px; 入れるなら #body{ color:#000000; font-size:70%; background:#ffffff url(./img/img.jpg) no-repeat; background-position:center bottom; width:600px; } こんな感じね。 menuも同様。 pxはピクセル指定と言う意味。ページ幅の割合なら%でいいわ。 body{ color:#000000; font-size:70%; background:#ffffff url(./img/img.jpg) no-repeat; background-position:center bottom; width:70%; } これで上手くいかないと言うなら ・他のスタイル指定が邪魔している ・HTMLが怪しい ・そもそもなにか考え違いをしている のうちどれかだと思うわ。 まずは上のを試してみて。 もちろん#menuの方にもね。
お礼
アドバイスありがとうございます。 HTMLの方に誤りを見つけて解決することができました。 ご指摘頂きありがとうございました。
- abril
- ベストアンサー率69% (388/560)
実際のソースがなければ確実な事は何も言えませんが… 現時点の情報で確実に間違っているのは、以下です。 > 該当しそうなところに<wight=〇%>を書いては確認、という作業を繰り返しましたが、 この”<wight=〇%>”記述は一体どのファイルのどの部分に書いているのですか？ CSSであれば、この様な記述は有り得ませんし、HTMLであれば、HTMLタグに<wight>というタグは存在しません。 推測ですが、ご質問内容が「メニュー部分（省略）の幅の変更について」と仰っているところを見ると、"wight”ではなく"width"（幅）の事だと思いますが、そうであっても、CSSファイルには”<width=〇%>”という記述法は有り得ませんし、HTMLタグとしても<width>というものはありません。 一般的な考え方であれば、まずHTMLファイル側に"menu"とかいうネーミングのidを持ったulなりdivなりのマークアップがされており、CSSファイル側にそのidセレクタに対するプロパティの設定があると思われるのですが、そうなってはいませんか？ 今一度、情報を整理して正確にお伝え下さればより適切なアドバイスができるかもしれません。
補足
コメントありがとうございます。少しずつ事態が飲み込めて来ました。 ＞CSSファイルには”<width=〇%>”という記述法は有り得ませんし、HTMLタグとしても<width>というものはありません。 これについてはまったく知りませんでした。お恥ずかしい限りです。 ＞HTMLファイル側に"menu"とかいうネーミングのidを持ったulなりdivなりのマークアップがされており、CSSファイル側にそのidセレクタに対するプロパティの設定があると思われるのですが こちらは該当します。CSSファイルの一部は以下の通りです。 --- body{color:#000000; font-size:70%; background:#ffffff url(./img/img.jpg) no-repeat; background-position:center bottom;} #menu,#entre{border-right:solid 1px #000000; margin-top:-1px; padding-top:1px;} #menu{background:#ffffff url(./img/back.jpg) no-repeat; background-position:left bottom;} --- body{}とmenu{}の幅を指定するには、どのような記述が適切でしょうか？
- askaaska
- ベストアンサー率35% (1455/4149)
幅はwightじゃなくてwidthよ。 私もわからないわ。 どう上手くいかないのか具体的に教えてくれないと どんなスタイルシートなのかもわからないし。 単なるスペルミスなのかしら？ 目で見ることができれば一発なんでしょうけど。
補足
ご回答ありがとうございます。後で気付いて<width>でやり直してみましたが、やはり変化なしです。 具体的に申しますと、body{～}、menu{～}の中に<width=>を記述しても、どちらにも反映されないという事象です。pxも％も指定してみましたが、同じくテンプレートで拾った時と同じ幅のまま動かせません。 現物を見て頂けたら一番なのですが、取り急ぎ口頭（？）での追記をさせて頂きます。
お礼
丁寧な記述、ありがとうございます。 頂いたタグを見比べていたら、HTMLに誤りを発見することができ、解決しました。 細かな例示、ありがとうございました。