- ベストアンサー
サイズによって枠線をはみ出してしまう。
html内に<div id="contents_body">があり、外側の枠線が定義されているcssファイルを参照しています。 タグ内にある文字数や画像ファイルなどによっては、その枠線を下へはみ出してしまうことがあります。 CSSかもしくはHTMLの記述によって、自動的に広がる（可変になる）ということはできますでしょうか？
- ymoshimoshi
- お礼率24% (94/379)
- CSS
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- CSSでのdivタグに付いての質問です。
現在HTMLを学習し始めたばかりで困惑しております。 HTML内の<body>タグ内に<div>タグを作りidを"main"としました。 具体的には<div id="main">Main</div>と記述しました。 そこからCSSで#main {color: red;} と記述しましたが、文字色の変更が全く反映されない状態です。 他の<p>タグや<h1>タグ、また<body>タグは全て奇麗に反映されるのに<div>だけが全然ダメな状態です。 一体何が原因なのか教えて下さい。 初心者すぎる質問だと思いますが、どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- cssを使った枠線の表示について
css初心者です。宜しくお願いします。 タグ打ちしたHTMLファイルとcssファイルがあります。 cssファイルに「.waku {BORDER-WIDTH:5px;BORDER-COLOR:#FFFFFF;BORDER-STYLE:SOLID}」と記述し、 HTMLに「<P CLASS=waku>適当な文字列</P>」としました。 この、「適当な文字列」の周りに5pxの白い枠線が表示されたところまではうまくいったのですが、画面の左右いっぱいまで枠線が延びています。 (1)文字列の幅に合わせて、自動的に枠の幅を変えるにはどうすればいいのでしょうか？ (2)この枠の幅を「画面の50%」あるいは「500px」などと指定することは可能でしょうか？ (3)文字列と枠線との間隔を調整することは可能でしょうか？ 余談ですが、cssの記述の際、スペースを多様している例をよく見かけます。 冒頭での私の書き方でも正常に動作しているようですが、「.waku { BORDER-WIDTH : 5px ; BORDER-COLOR : #FFFFFF ; BORDER-STYLE : SOLID }」このように (4)各文字列や値の前後にスペースを入れる理由を教えてください。
- ベストアンサー
- ホームページ作成ソフト
- 「css」 と 「div」の使い方について
例えば、「CSS」でページ全体の要素をクラス「contents」で設定した場合、 HTML では次のどちらの記述が正しいのでしょうか？ １．<body class="contents">・・・ </body> ２．<body> <div="contents">・・・ </div> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
- background-imageが効かない
HTML5で組んだページでCSSを使っています。 bodyタグに設定したbackground-imageは背景に画像が表示されるのですが、body内に置いたid名をつけたdivタグに設定したbackground-imageが効きません。どのようにすれば効くのでしょうか。 【効く】 body { background-image: url("./images/haikei.jpg"); } 【効かない】 #contents { background-image: url("./images/haikei.jpg"); } そもそも、HTML5でdivタグを使うこと自体が誤りなのでしょうか。
- 締切済み
- CSS
- テーブルのボーダー（枠線）は何で指定したらいいですか？
テーブルの枠線の指定の仕方について質問です。 HTMLだけで指定するのであれば、 <table border="1"> ～～ </table> といった感じなのでしょうが、CSSも併用している場合、CSSで td{border:solid;] とし、HTMLでは <table> ～～ </table> という風に簡単（？）に書いたほうがいいんでしょうか？ なんでも見た目はCSSで定義しろとのことですし、テーブルの枠線ってHTMLとCSSとどっちで定義するのがいいんでしょうか？ 分かりにくい質問で申し訳ありません。初心者のため書き足りないところあるかもしれませんが、よろしくお願いします。
- ベストアンサー
- HTML
- 子<DIV>で定義したのに、親<DIV>の定義が優先表示
CSS の 子<DIV>で定義したのに、親<DIV>の定義が優先表示されてしまう。 CSSファイルで #oya {font-size: 1em;} .kodomo {font-size: 20pt;} と定義。 HTMLファイルで <body> <div id="oya"> AAAAA <div class="kodomo"> BBBBB </div> </div> </body> としても、AAAAA と BBBBB は同じ文字サイズです。 BBBBBは、#kodomo 定義の文字サイズで表示したいのですが、 どうすればよいですか？
- 締切済み
- HTML
- CSSでのセンタリングができません。
CSSでのセンタリングができません。 こちらのページを参考にCSSで下記のようにCSSを設定したのですが センタリングされません。設定方法がまずいのでしょうか? それともWEB上で確認せずローカルで確認していることに問題があるのでしょうか? 宜しくお願い致します。 (CSSの記述はヘッダーに入れておりHTMLはBODYに記述しております) http://desperadoes.biz/style/dan/ +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ * { margin : 0 ; padding : 0 ; } body { width : 100% ; float: center; } #my_body { position : relative ; margin-left:auto ; margin-right:auto; } #my_main { width : 950px ; } #my_header { width : 950px ; } #my_navigation { float : left ; width : 190px ; } #my_contents { float : left ; width : 750px ; } #my_contentsM { float : left ; width : 550px ; } #my_contentsS { float : right ; width : 190px ; } #my_contentsB { float : left ; width : 750px ; } HTML部分は <body> <div id="my_body"> <div id="my_header"> </div> <div id="my_main"> <div id="my_navigation"> </div> <div id="my_contents"> <div id="my_contentsM"> </div> <div id="my_contentsS"> </div> <div id="my_contentsB"> </div> </div> </div> </div> </body>
- ベストアンサー
- ブログ
- cssでの高さの調整がうまくいきません
はじめまして。当方css初心者です。 現在DreamWeaver8でCSS+XHTMLでホームページを作成しているのですが、どうもうまくいかないことがあります。よければご意見下さいませ。 以下のソースでmaincontentsに情報を盛り込み、bodyで背景に色をつけてるため、wrapperの背景を白にしてコンテンツ部を白にしたいのですが、maincontentsの情報が少し増えるとwrapperの枠を飛び出してしまいます。wrapperの高さを指定しておけばその範囲では大丈夫なのですが、ページによってmaincontentsの情報量が異なるので「高さ：自動」にすると、contentsの高さまでしか広がってくれません。 各ページの情報量が異なるためwrapperの高さも自動で広がって欲しいのですが、どのようにすればよろしいでしょうか。ソースの間違えあると思います。お手数ですが、よろしくお願い致します。 html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <link href="file:///E|/testweb/css.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <div id="header"> id "header" の内容がここに入ります</div> <div id="contents"> <div id="maincontents"> <p>id "maincontents" の内容がここに入ります</p> </div> <div id="sidenavi"> id "sidenavi" の内容がここに入ります</div> id "contents" の内容がここに入ります</div> id "wrapper" の内容がここに入ります</div> </body> </html> css #wrapper { height: auto; width: 850px; } #header { height: 50px; width: 850px; } #contents { width: 850px; } #contents #maincontents { width: 680px; float: left; } #contents #sidenavi { float: right; width: 90px; }
- ベストアンサー
- HTML
- ヘッダーとフッターを画面いっぱいにする方法について
添付画像のようにヘッダー部とフッター部だけを画面いっぱいにしたいと思っています。 HTMLはおおよそ以下のような構成になっています。 CSSでは <div id="container">に対して以下のように記述しています。 --------------------------------------- #container{ width:1000px; margin: 0,auto; } --------------------------------------- HTML内のheaderやfooterを<div>で囲むwrapを作り、それらにwidth: 100%;とCSSに記述してやればうまくいくような事を聞きましたがうまくいきませんでした。 それほど複雑な構成ではないシンプルなタグ構造だと思います。 ヘッダーとフッターの幅を添付画像のように画面いっぱいに広げるにはHTML, CSSにどのような記述をすればいいのでしょうか？ ご存知の方いらっしゃいましたら宜しくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル<title> </head> <body> <div id=container> <header> ヘッダー </header> <nav> </nav> <main> </main> <footer> フッター <footer> </div> </body> </html>
- 締切済み
- HTML
- PHP Smartyについて質問です。
レイアウトファイル(main.tpl)にタグを配置し そのタグをあるデータに置換したいと考えています。 例えば、以下のような感じです。 ～～～ main.tpl ～～～～～～～～～～～～～～～～ <html> <body> <div id="header">ヘッダー</div> <div id="nav">ナビゲーション</div> <div id="contents">#CONTENTS#</div> <div id="footer">フッター</div> </body> </html> ～～～～～～～～～～～～～～～～～～～～～～～ 上記の「#CONTENTS#」の部分をDBで保存している コンテンツに置換したいのですが {if}構文や{$hoge}などのSmartyタグが文字列として出力されてしまいます。 何か無理やりDBのデータをSmartyのコンパイラに通すメソッド等ありませんでしょうか？ もしくは、他のやり方で何かいい方法はありませんでしょうか？ DBで保存している部分をtplファイルにして、$smarty->fetch("fuga.tpl"); 等で読みだせば 解決するんですが、どうしてもこのコンテンツ部分はtplファイルにはせず DBから直接コンパイルしたいのです。 どなたかご教授くださいませ。 よろしくお願いいたします。
- ベストアンサー
- PHP
