- ベストアンサー
ｃｓｓの記述についておしえてください2
cssの記述、xhtmlの作成について教えていただきたいのですがcontainerを箱として考えた場合、その入れ子になるsidebarやcontentの天地（height）を統一したいのですがheightを100％の設定で指定する場合containerのサイズを予め決めてしまえば出来たのでが・・・・これで正解ですか？？？またcontainerのサイズ指定していない場合入れ子になるsidebarなどのheightを揃えるにはどの様にするのが一般的ですか？？
- mikity58g
- お礼率68% (273/396)
- ホームページ作成ソフト
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
前のサンプルで、親ブロックの文字数を変えても、それに追随して子ブロックの下端はそろうはず。 ｃｓｓの記述についておしえてください - 教えて！goo ( http://oshiete1.goo.ne.jp/qa5604094.html ) 単純に、子ブロックにheight:100%とするだけ、 （floatなら、ちょっと小技が必要）
お礼
誠に有難うございます。でもまだ理解が十分に出来ていません。すみません。
関連するQ&A
- ｃｓｓの記述についておしえてください
ｃｓｓの記述についておしえてください。bodyそしてcontainer次にsidebarまたはmenuと作ったとしてmenuの天地サイズを自動にしてcontainer等のサイズに反映させる事は可能ですか？フロートは分かるのですがサイズの伸縮について分かりません。
- ベストアンサー
- ホームページ作成ソフト
- cssハックについて
現在Safariに対してcssハックを適用させようとしているのですが、 そのハックがなぜか他ブラウザにまで影響してしまいます… （Firefox、Operaなど。IEは大丈夫です） なぜ他ブラウザにまで影響してしまうのかが判らないので、 教えて頂けると嬉しいです。 宜しくお願いします。 htmlに対するcss読み込みの記述--------- <link rel="stylesheet" type="text/css" href="css/importtop.css" /> importtop.css内の記述--------- /* For Specific Browsers */ @import "safari.css"; safari.css内の記述--------------- /* Safari4 */ body:first-of-type #content { height: 635px; } body:first-of-type #container { height: 635px; } body:first-of-type #sidebar { height: 635px; } body:first-of-type #content { height: 635px; } body:first-of-type .sbar { height: 635px; } /* Safari3 */ html:not(:only-child:only-child) #container { height: 635px; } html:not(:only-child:only-child) #content { height: 635px; } html:not(:only-child:only-child) #sidebar { height: 635px; } html:not(:only-child:only-child) .sbar { height: 635px; }
- 締切済み
- CSS
- 【CSS】_font-size: 84%;ってどういう意味の記述？
CSSの勉強のために、 http://cdn.oshiete.goo.ne.jp/css/oshiete-base.css をながめていたのですが、 font-size: 12px; line-height: 1.4em; /*\*/ _font-size: 84%; /**/ という記述がありました。 この、最後の３行はなんのための記述なのしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
- cssでの要素間の余白について。
ホームページを作成しており、画像の下にdivをくっつけて、配置したいのですが、どうやっても、余白が出来てしまいます。styleでdiv要素にmargin-bottom:0、h2にmargin-top:0と記述しても、余白が出来てしまい、困っています。 さらにdiv containerの大きさについても、styleでwidth,heightで、大きさを指定しているのですが、横に画面一杯に広がってしまい、大きさ指定が反映されません。 初歩的な質問かもしれませんが、どこに問題がありますでしょうか？ ご教授お願いいたします。 "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=Shift_JIS"/> <title>xxxxxxxxxxxxxx</title> <style type="text/css"> body {background-color:#f5f5f5} div#container {width="800" height="40";background-color:#fff4d8} h1 {color:#330000;font-family:Geogia,Times New Roman,sans-selif} h2 {color:#330000;font-family:Geogia,Times New Roman,sans-selif;margin-top:0} </style> </head> <body> <div id="content"> <h1><img src="xxxxxx.jpg" alt="xxxxxxxxx" </h1> </div> <div id="container"> <h2> xxxxxxxx </h2> </div> </body> </html>
- ベストアンサー
- CSS
- css初心者です。プラウザの表示について
以下のような記述を行い、確認為にプラウザに表示させようとしましたが、なぜかsafariではうまくいかずに、googlecromeでは表示されました。どのような事が原因なのでしょうか？ よろしくお願いします。 //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-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="box1.css" type="text/css"> </head> <body> <div class="box">箱の表示を作ろうと思います。</div> <p class="box2">こちらはどうなのでしょうか？</p> </body> </html> //css @charset "UTF-8"; /* CSS Document */ .box{ border:4px solid #9C3; width:50px; height:60px; padding:15px 15px; margin:50px 0px 0px 50px } .box2{ width:300; height:200; border:3px solid #F33; padding:10px; } よろしくお願いします。
- ベストアンサー
- HTML
- ＣＳＳで、わからないところがあります
ＣＳＳを独学で勉強していますがあるところでソースをもらったのですがこういうのがありました。 ＣＳＳのはフォルダを作っています。 default.css import.css style.css の3つです。 内容は下に書いています。 default.cssには @charset "UTF-8"; body { margin: 0; padding: 0; background-color:#FFFFFF; text-align:left; } import.cssには @charset "UTF-8"; /* CSS Document */ @import "default.css"; @import "style.css"; style.css これは他のＣＳＳと同じように沢山書いています。 @charset "UTF-8"; /* CSS Document */ * { font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック'; font-size: 14px; line-height: 1.6em; } 以下続く 質問1 なぜ3つも必要のなのでしょうか？style.css1つにまとめてもいいのではないでしょうか？ 質問2 style.cssの * { font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック'; font-size: 14px; line-height: 1.6em; } これはアスタリスク*に対して指定しているのでしょうか？ 質問3 ＨＴＭＬ側にはShift_JISとなっていますが、ＣＳＳは@charset "UTF-8";となっており、これって間違いではないのでしょうか？ ネットで調べたら、文字化けの要因になると書いていました。 これはあっているのでしょうか？ ＨＴＭＬ側 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> 質問4 <div id="header" style="background-image:url(img/header.jpg);"> <div id="a"> <div id="b"> <h1 id="a">猫の気持ち</h1> <div id="c"> <span class="blue big3 b">猫の気持ち</span> </div> というソースがありました。 <span class="blue big3 b">猫の気持ち</span> の中の、blue big3 bというの指定が見当たりません。 blue big3 b という各自の指定はＣＳＳでされています。 3つを合わせて指定することができるのでしょうか？ それともこれってタグですか？ <span class="">って、 色、サイズ、太さをこのように指定するとこのようになるのでしょうか？ 確かに色は青で太字でしたbig3は不明ですが・・・ 初心者並の質問ですみません。 よろしくお願いします。 ＣＳＳの簡単なサイトを見てもやはりよく分からないのです。
- ベストアンサー
- HTML
- CSSで高さ100％のレイアウト
テーブルを使用せずCSSでのレイアウトなのですが フッター位置をブラウザの一番下にマージン無しで指定したいのですが出来ません。 テーブルでは <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top">内容</td> </tr> <tr> <td valign="bottom">フッター</td> </tr> </table> というように指定していたのですが CSSでのレイアウトはHTMLを <div id="container"> <div class="content">内容</div> <div id="footer">フッター</div> </div> .CSS では #container { height: 100%; } は無効なのでしょうか？ 他のやり方でもフッターをブラウザの一番下にマージン無しでレイアウトできる方法があったら教えて下さい。
- ベストアンサー
- CSS
- 【css】marginについて質問です。
現在Webサイト構築をしています。いきなり躓きました。コードを見てください。 （一部だけ抜粋しています） 【cssコード】 #container_all{ width:920px; height:520px; margin:0 auto; padding:0; } #container{ width:900px; height:500px; margin:10px; padding:0; } 【XHTMLコード】 <div id=container_all> <div id=container> </div> <div> このような場合、#container_allの中に#containerがマージン10pxでちょうど中心に収まるものかと思ってましたが、見事にマージンのtopが効いてませんでした。 marginは効かないのでしょうか？教えてください。
- 締切済み
- デザイナー・クリエイティブ職
- htmlおよびcssについて
自分で、htmlとcssを記述したのですが、表示が少しおかしいようです。contentの上に空白ができてしまいます。IE、Firafox、cromeでレンダリングしてみましたが、同じです。ソースは以下のとおりです。どこがおかしいのでしょうか？ http://check.zouri.jp/ <?xml version="1.0" encoding="UTF-8"?> <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="キーワード1,キーワード2,キーワード3,キーワード4,キーワード5" /> <meta name="description" content="ここに、あなたがつくろうとするウェブサイトの内容・特徴を記述する" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="INDEX" href="./index.html" /> <link rel="NEXT" href="next.html" /> <link rel="PREV" href="prev.html" /> <link rel="stylesheet" href="base.css" type="text/css" media="all" /> <!--[if IE]> <link rel="stylesheet" href="ie.css" type="text/css" media="all" /> <![endif]--> <link rev="MADE" href="mailto:aaa@yahoo.co.jp" /> <title>あなたのウェブサイトのタイトル名</title> </head> <body> <div id="wrapper"> <div id="header">headerです </div> <div id="globalnavigation">globalnavigationです </div> <div id="topicpath">topicpathです </div> <div id="container"> <div id="primary">primaryです <div id="content">contentです </div> </div> <div id="secondary">secondaryです </div> </div> <div id="advertisement">advertisementです </div> <div id="pagelinks">pagelinksです </div> <div id="footer">footerです </div> </div> </body> </html> @charset "UTF-8" * {margin:0; padding:0;} #wrapper { width:100%; } #header { background-color:#dddddd; height:50px; } #globalnavigation { background-color:#cccccc; height:50px; } #container { float:left; width:100%; margin-right:-145px; } #primary { float:right; width:100%; margin:10px 0 10px -145px; background-color:#c7d5ed; } #content { margin:0 155px; background-color:#caedc7; } #secondary { float:left; width:145px; margin:10px 0 10px 0px; background-color:#e5c7ed; } #advertisement { float:right; width:145px; margin:10px 0; background-color:#e5c7ed; } #pagelinks { clear:both; background-color:#dddddd; height:50px; } #footer { background-color:#dddddd; height:50px; }
- ベストアンサー
- HTML
- docomoをxhtmｌ記述をしたところインラインcssが無視されます
携帯サイトを制作しています。docomoの機種で文字の後ろに背景色を 設定したいため、以下のような記述に変更しました。 docomo ヘッダーの記述↓------------------------------------------- <?php echo "<?xml version=\"1.0\" encoding=\"Shift_JIS\"?>"; ?> <?header("Content-type: application/xhtml+xml" );?> <!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.1) 1.0//EN" "i-xhtml_4ja_10.dtd"> <html> <head> ----------------------------------------------------------- .hacessの追記記述↓ AddType application/x-httpd-php .xhtml 背景を変えたいところを、<div style="～">文字</div> で変えたところ、文字の背景に背景色をつけることができたのですが、 フォントの指定がいっさい無視されてしまいます。 ・<font color="#FFFFFF" size="1">文字</font> <div align="right">～</div> 色指定も、サイズ指定も全て無視されてしまいます。 右寄せ、左寄せ指定も無視されています。 phpには全く詳しくありませんので、調べながら、 ヘッダーや.hacessに情報を追記しました。 その指定がなんらかの形で影響していると思われるのですが・・。 softbankとAUは全て、文字のサイズ、色、文字後ろの背景色の指定、 回り込み等、全て問題がありません。 出来る限り調べていますが、わからずに困っています。 宜しくお願いします。
- 締切済み
- docomo
補足
有難うございます、私の質問が悪かったです。floatは全て忘れてください。コンテナ対ブロックの際コンテナのheightの指定していない場合、子ブロックのheightを親と同じ高さにするにはどの様に指定すればいいですか。（つまりHPの下の方を揃える方法。）