• ベストアンサー

cssの記述についておしえてください

cssの記述についておしえてください。bodyそしてcontainer次にsidebarまたはmenuと作ったとしてmenuの天地サイズを自動にしてcontainer等のサイズに反映させる事は可能ですか?フロートは分かるのですがサイズの伸縮について分かりません。

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

 意味なくfloatを使う理由がわかりません。floatは画像などの周囲に文章を回りこませるためで、ブロックの配置に使えなくはないが、えてして良い結果を招かない。  どこかで誰かがはじめて、はやってるみたいだけど・・  親のコンテナブロックをstatic以外で配置して、その子供ブロックをabsoluteで配置すればよい。ウィンドウのサイズにも追随できるし、heightは100%にすれば、親ブロックの高さに合わせられる。 ★サンプルは見やすくするためタブを全角スペース2個で置換してある。元に戻してテストすること <!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 http-equiv="Content-Style-Type" content="text/css">   <style type="text/css"> <!--   div#content{     position:relative;     width: 60%;     border: solid 1px red;     margin-left:auto;     margin-right:auto;   }   div#content ul.nav{     margin-top:0px;     position: absolute;     width: 100px;     top: 0px;     left: -140px;     height: 100%;     border:solid blue 1px;   }   -->   </style>   <link rel="START" href="../index.html"> </head> <body>   <h1>サンプル</h1>   <div id="content">     <h2 id="V1">見出し(レベル2)</h2>     <p>段落文</p>     <p>段落</p>     <p>段落</p>     <p>段落</p>     <h2>見出し(レベル2)</h2>     <p id="V2">段落文</p>     <p>段落</p>     <p>段落</p>     <p>段落</p>     <h2>見出し(レベル2)</h2>     <p id="V3">段落文</p>     <p>段落</p>     <p>段落</p>     <p>段落</p>     <h2 id="V4">見出し(レベル2)</h2>     <p>段落文</p>     <p>段落</p>     <p>段落</p>     <p>段落</p>     <ul class="nav">       <li><a href="#V1">項目1</a></li>       <li><a href="#V2">項目2</a></li>       <li><a href="#V3">項目3</a></li>       <li><a href="#V4">項目4</a></li>     </ul>   </div> </body> </html>

mikity58g
質問者

お礼

ご回答誠に有難うございます、でもまだ理解できないため再度質問を上げさせて頂きますので、恐れ入りますが教えていただけないでしょうか?

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • cssの記述についておしえてください2

    cssの記述、xhtmlの作成について教えていただきたいのですがcontainerを箱として考えた場合、その入れ子になるsidebarやcontentの天地(height)を統一したいのですがheightを100%の設定で指定する場合containerのサイズを予め決めてしまえば出来たのでが・・・・これで正解ですか???またcontainerのサイズ指定していない場合入れ子になるsidebarなどのheightを揃えるにはどの様にするのが一般的ですか??

  • スタイルシートのレイアウトについて

    こんにちは。 スタイルシートを使ってホームページを作成しているのですが、 わからないことがあり、質問させていただきます。 container body  header   sidebar   main  footer の構成をしていて、sidebarとmainは、左右にフロートさせています。 sidebarとmainを特になにも指定していのですが、 Q. mainが上下に長い時は、sidebarもその長さに合わせて長くなり、 sidebarが上下に長い時は、mainもその長さに合わせて長くなる、 そんな仕組みを作りたいのですが、heightを自動にしても、 長くなってくれません。 どのように記述をすると良いのでしょうか? 教えて下さい。お願いします。

    • ベストアンサー
    • CSS
  • 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の記述

    HTMLで普通のテキストのサイズを固定したいのですが、 うまくいきません。 何が間違っているのでしょうか。 一部のHTMLだけ、リンクの下線をはずしたいので、 HTMLに <LINK REL="stylesheet" HREF="css/style_win.css" TYPE="text/css"> <STYLE TYPE="text/css"> <!-- A { text-decoration: none; font-size: 10pt;} --> </STYLE> と記述。 こちらの方は大丈夫です。 だめなのは外部 css/style_win.css に body { font-size:10pt } と書いたほうがまったく制御していません。 初心者で、本もたくさん調べましたが わかりません。 どうかお願いいたします。

    • ベストアンサー
    • HTML
  • cssの、一つ目の記述がHTML側に反映されません。

    スタイルシートの超初心者です。 <style type="text/css"> body {background-color:#87cefa;} h1 {background-color:#ffddaa;} と記述すると、bodyの記述がHTMLの表示に反映されず、順番を入れ替えても、一つ目になった記述が反映されません。 <style type="text/css"> } body {background-color:#87cefa;} h1 {background-color:#ffddaa;} 試しに、上の様に「}」を挟んだら反映されたのですが、こんなのをダミーで入れているのは、とっても納得が行きません。どなたか、原因を教えて頂けないでしょうか?

    • ベストアンサー
    • HTML
  • 外部CSSの記述方法

    色々調べたのですが行き詰まってしまったので質問させて下さい。 HPのそれぞれのページの文字色や背景が違う為BODYをクラス分けしてCSSに記述しています。 ページによって違うリンク色等はそれぞれのページの<HEAD>内で指定していますが 外部CSSから指定する場合クラスを定義すれば出来ますが下記のBODYの中には どのように記述すれば良いか解かる方がいらっしゃいましたらご回答宜しくお願い致します。 (説明ベタですみません。要は外部CSSのそれぞれのBODYのクラス内に リンク色等の記述をしたいのです。(;^_^A ) 外部CSS BODY.top{ color:#2E8B57;background-color:#FFEAFA; } BODY.menu{ color:purple;background-color:#FFFFFF; } top.htmlの<HEAD>内の下記を外部CSSのBODY.topの中に入れたい A:visited { text-decoration:none;color:#CD1076;} A:active { text-decoration:none;color:blue;} menu.htmlの<HEAD>内の下記を外部CSSのBODY.menuの中に入れたい A:visited { text-decoration:none;color:purple;} A:active { text-decoration:none;color:#E1ACDA;}

    • ベストアンサー
    • CSS
  • CSS #containerについて

    えっと、CSSについての質問です。 最近勉強をはじめたのですが、 #container を下まで伸ばすのに height: 100%; min-width: 100%; をいれても下まで伸びない現象がおきています。 最初は伸びていたのですが、 ヘッダーとフッターを横に100%にしてから 様子がおかしくなりました。 減ったーフッターは横に全部伸ばしたくて、 コンテイナーは横は余白つけて下にのばしたいのです>< どなたか原因がわかる方、対処法わかる方 いましたらお願いします>< ------------------------------HTML--- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="index3.css"> </head> <body> <div id="container"> <div id="headerbg"> <div id="header"> <h1>header</h1> </div><!-- header --> </div><!-- headerbg --> <div id="menu"> <ul> <li><a href="">めにゅー1</a></li> <li><a href="">めにゅー2</a></li> <li><a href="">めにゅー3</a></li> <li><a href="">めにゅー4</a></li> <li><a href="">めにゅー5</a></li> <li><a href="">めにゅー6</a></li> </ul> </div> <div id="main"> <div id="contents"> </div><!-- contens --> <div id="sidebar"> </div><!-- sidebar --> </div><!-- main --> <div id="footerbg"> <div id="footer">Footer</div><!-- footer --> </div><!-- footerbg --> </div><!-- container --> </body> </html> -------------------------CSS--- html { background-image: url('hana3.jpg'); background-attachment: fixed; } body { font-family: Verdana, Arial; font-size: 20px; margin: 0px; padding: 0px; } html,body,#main,#container{ height:100%; } #container { height: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #headerbg{ width: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #header { padding: 40px; width: 100%; } #menu { } #menu>ul>li { float: left; } #main { overflow: hidden; } #sidebar { } #footerbg{ background-color: rgba(255,100,0,0.5); width: 100%; min-width: 100%; } #footer { padding: 50px; width: 100%; }

    • 締切済み
    • CSS
  • Ultimate CSSのhtml側の記述について

    いつもお世話になっております。 当方、htmlとcssについてはごく初心者。 主なツールはSeamonkeyとalphaEDITとcssはTeraPadを使っております。 さて、質問ですが、初歩的なものかもしれませんが、 webで検索しても出てこなかったので質問させて頂きます。 Ultimate CSS Gradient Generatorという自動cssソース作成サイトで、 cssの記述は掲載されているのですが、html側の記述が掲載されていません。 初歩的すぎな事なので記載されていないだけなのかもしれませんが, html側には何と指定してやったら良いのでしょうか? 因みに、cssは「style.css」としております。 html側のソースは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link href="./style.css" rel="stylesheet" type="text/css"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>index</title> </head> <body> </body> </html> としております。 どなたか、親切な方、ご指導、解説のほどを宜しくお願い致します。

    • ベストアンサー
    • CSS
  • CSSでの記述についてです。

    CSS初心者で独学でいろいろ試しているのですが、分からないことがあるので質問させてください。 1、スタイルシートの定義を個別にして、文章を書いたページのスタイルを一括で統一する方法を取っています。 2、ページの下の部分に「戻る」「次へ」のリンクを作って、リンクを張りました。 3、同じフォルダ内のページに対してリンクを貼ったとき、「戻る」と「次へ」の間にわずかに間隔があります。(それを保ちたいのです) 4、しかしひとつ階層が上の(フォルダ外)のページに対してリンクを貼ったとき、何故か「戻る」と「次へ」の間の間隔が狭くなってしまいます。 スタイルシートを文書の記述とは別に作って一括で処理しているので、その文書ページの記述に問題があるのだと思うのですが、どこが問題なのか分かりません。参考までに、以下にページの記述を記載します。 ---------------------------------------- <間隔がきちんとある方> <html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML lang="ja"> <head> <LINK rel="stylesheet" type="text/css" href="../stylesheet1.css"> <title>Torikago2</title> </head> <body><br> <p> 文書<br> </p> <br><br>    <a href="torikago1.html">戻る</a>    <a href="torikago3.html" class="01">次へ</a> </font> </body> </html> ------------------------------------------------- <間隔が狭くなる方> <html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML lang="ja"> <head> <LINK rel="stylesheet" type="text/css" href="../stylesheet1.css"> <title>Torikago1</title> </head> <body><br> <p> 文書<br> </p> <br><br> <a href="../toppage.html">戻る</a> <a href="torikago2.html" class="01">次へ</a> </font> </body> </html> ------------------------------------------------ ちなみに、スタイルシート>文書フォルダ となっていて、 間隔の狭くなってしまう方のページもその文書フォルダの中にあります。 スタイルシートのリンクに対しての記述も必要でしょうか? 以下のようなものです。 ------------------------------------------------ a {position:relative; right: -43%; bottom: 40px; background-color:white; opacity: 0.8; padding:10px; margin:0px; text-decoration: none;} a.01 {position:relative; bottom: 10px; background-color:white; opacity: 0.8; padding:10px; margin:0px; text-decoration: none;} どなたか教えて頂けると嬉しいです。

  • CSSで14px/1.4の部分の記述は正しい?

    とあるサイトのCSSを見ていたら次のような記述がありました。 font:normal normal normal 14px/1.4 "MS Pゴシック", "Osaka", "sans-serif"; normalが3つ続くのも謎ですが、フォントのサイズと思える部分で分数のようにして使われています。 14px/1.4で10pxのこと? このような記述はできるのでしょうか? そのサイトはCSSを使いこなせるような人が作っているようでデザインや文字などはとても読みやすくできています。

    • ベストアンサー
    • HTML
このQ&Aのポイント
  • eBand JS-10の正面右端の赤丸のボリュームが音量不調になってしまった場合、部品交換で修理可能か検討しています。部品はアルプス電気のものと思われます。愛用品が復活する可能性があるため、詳細を確認して部品を取り寄せる予定です。
  • eBand JS-10の音量調整ボリュームが正常に機能していないため、部品交換が必要です。ボリュームは正面右端にあり、赤丸で示されています。また、この部品はアルプス電気のものと類似している可能性があります。修理することで愛用品を復活させたいと考えています。
  • eBand JS-10の音量調整ボリュームに問題が発生しており、部品交換を検討しています。具体的には、正面右端にある赤丸の部品が関係していると思われます。同様の部品はアルプス電気のものと類似しているため、修理のために部品を取り寄せる予定です。愛用品を復活させるために、部品交換を試してみたいと考えています。
回答を見る

専門家に質問してみよう