拡大・縮小表示についてのアドバイスは？
- 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> <title>検索</title> <meta http-equiv="Pragma" content="No-Cashe" /> <meta http-equiv="Cache-Control" content="No-Cache" /> <meta http-equiv="Content-Type" content="text/html;" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link type="text/css" rel="stylesheet" href="search.css" /> <body > <h1 align="center" >タイトル１</h1> <p align="left" style="font-size:12px; margin-left:5px;">初めての方</p> <p align="right" style="font-size:12px; margin-right:5px;">ホームページに戻る</p> </body> <HEAD> <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"> </HEAD> </html> ＊ｃｓｓ html, body, body{ height:100%; } html{ overflow-y:scroll; } body{ /* width:100%; org */ width:80%; /* margin:0px; */ margin:0 auto auto auto ; padding:0px; background:#fff; color:#000; font-size:1em; font-family:Verdana, sans-serif,"ＭＳ Ｐゴシック", "MS P Gothic","Osaka",Arial,Helvetica; } a:link, a:visited{ color:#5555ff; /* text-decoration:none; */ text-decoration:underline; } a:hover{ color:#5555ff; /* text-decoration:none; */ text-decoration:underline; } a:active{ color:#c00; } input{ padding:2px; font-size:12px; } img{ border:0; vertical-align:middle; } hr{ height:1px; /* width:620px; */ width:640px; border:1; border-bottom:1px solid #cddcf2; } p{ margin:.5em 0; } input{ vertical-align:middle; } form{ padding:0; /* margin:0; */ /* margin:auto; */ } strong{ color:red; } /* h1,h2,h3{ margin:0; } */ h1{ margin:0; align:center; /* width 80%; */ /* font-size:1.5em; */ font-style:normal; font-size:22px; /* background: #43a917 none repeat scroll 0%; */ background: #777788; color:#eeeeff; line-height:1em; padding: 7px 7px 5px; text-align:center; } /* h2{ font-size:1.3em; background: #d3ebc3 none repeat scroll 0%; color:#4b962a; margin-top:1em; padding: 7px 7px 5px; text-align:center; } h3{ font-size:1.0em; } */ address{ font-style:normal; font-size:12px; font-family:"Lucida Sans Unicode"; } .pcenter{ text-align:center; } .message{ padding:5px 10px; background:#dfffc0; border:2px solid #fff; } #footer{ /* background: #d3ebc3; */ background: #ccccdd; color:#000; height:16px; padding:3px; text-align:center; }
- tatotu
- お礼率56% (56/100)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
min-width,max-width,widthを使います。 ただ、特定の要素だけ固定することは不可能です。 たとえば、div.body_text{margin:0 auto;width:80%;min-width:640px;max-width:1120px;} とか・・ firefoxでしたら、画像だけ拡大とか、文字だけ拡大とかアドオンとの組み見合わせてできますが、あくまでユーザー側に任せるべきです。HTMLとはそうしたものです。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より
その他の回答 (1)
- okacc
- ベストアンサー率40% (2/5)
タイトルあたりの、<h1><h1/>のタグを<font size>系のタグにしてみてはどうでしょうか？ おそらく固定されると思います。
関連するQ&A
- ボックス間の隙間を埋める方法
私が作ったHPなのですが、 タイトルと文字の間に空白が出来てしまっています。 オレンジの背景をくっつけたいのですがどのようにすればよろしいでしょうか？ 以下の設定をしています。 h1#title{ height: 40px; margin: 0; float:left; font-size: 35px; padding-right: 2px; color: #ffffff; background-color: #ff6600; } h2#renewal_time{ height: 40px; margin: 0; font-size: 18px; text-align: right; padding-top: 20px; padding-bottom: 0px; background-color: #ff6600; }
- ベストアンサー
- CSS
- CSS IDごとのCLASS指定
以下のようなCSSがあった場合に、それぞれのIDに同じ名前で中身の違うCLASSを指定する事は出来るのでしょうか？ #main{ margin:0; padding:0; background: transparent; float : left; font-size : 0.8em; } #menu{ margin:0; padding:0; width:140px; float : left; font-size : 0.8em; background :url('img/back.gif') no-repeat left top; color:#17F600; } #mainにはこれ、 .txt { font-size : 1em; line-height : 120%; margin:0 0 5px 380px; padding:0 0 0 30px; text-align : left; color:#69788A; } #menuにはこれ .txt{ font-size : 1em; padding:0 0 0 10px; margin:5px 30px 5px 0; text-align : left; color:#69788A; border-bottom:1px solid #CFDEEF; } といったかんじなのですが…
- ベストアンサー
- HTML
- フッターの画像の位置づけ指定方法がわからない
ヘッダー・メイン・サイドバー（左右）・フッターの５コマ組みのサイトを表現したいのですが、 フッターに指定した画像を全体サイズでセンターに寄せて（画像の上に、真ん中寄せでテキストを乗せたい）反映させるにはどうしたらいいのでしょうか。フッターに指定しているjpg画像のサイズは、(○●.jpg);511×229pxです、よろしくお願いします。 <style type="text/css"> body /* コンテナ */ div#container{width: 100%; margin-left: auto; margin-right: auto} /* ヘッダー */ div#header{background-color: #ffffff; font-color:#4876ff; /*background-image: url(.jpg);*/ background-repeat: no-repeat; background-position: center top; /*padding: 28px 20px 150px*/ } div#header h1{margin: 0} div#header p{color: #ffffff; font-size: 0.50em; margin: 0} /* メイン */ div#main{width: 100%; float: left; margin-right: -230px} /* コンテンツ */ div#content{width: 100%; float: right; margin-left: -186px; margin-right: auto; margin-bottom: 25px} div#content h2, div#content h3, div#content p {margin-left: 186px; margin-right: 230px} div#content h2{background-color: #92c9ff; background-image: url(); background-repeat: repeat-x; border: solid 1px #84c2ff; font-size: 0.875em; color: #00688b; line-height: 32px; padding-left: 6px; margin-top: 0; margin-bottom: 0} div#content h3{background-color: #ffffff; background-image: url(); background-repeat: no-repeat; background-position: 0px 2px; font-size: 0.875em; line-height: 22px; padding-left: 26px; margin-top: 30px; margin-bottom: 0} div#content p{font-size: 0.75em; line-height: 1.6; margin-top: 10px} /* サイドバー */ div#sidebar{ background-image:url(.jpg); width: 170px; float: left; margin-bottom: 25px} ul.sidemenu{font-size: 0.90em; margin-top: 0; margin-left: 0; padding-left: 0; line-height: 0} ul.sidemenu li{list-style-type: none} ul.sidemenu li a{ display: block; line-height: 25px; text-decoration: none; text-align:right background-img:url(.gif); padding-left: 10px} ul.sidemenu li a:hover{background-color: #cdc1c5 color: #8b1c62 } ul.sidemenu ul {margin: 0; padding: 0} ul.sidemenu ul li a {background-img:url(gif); color:#5d478b; border-bottom: solid 1px #ab82ff; line-height: 24px} ul.sidemenu ul li a:hover {background-color: #eee0e5; color:#ffffff; border-bottom: solid 1px #ab82ff; } p.feed{margin-bottom: 10px} p.feed a{font-size: 0.75em; color: #444444; text-decoration: none; line-height: 30px; border: solid 1px #888888; padding: 5px} p.feed img{border: none; vertical-align: middle} /* 右サイドバー */ div#sidebar-right{width: 150px; float: right} div.info{border: solid 1px #84c2ff; margin-bottom: 18px} div#sidebar-right h2{background-color: #c6e3ff; background-image: url(); color: #3c5916; font-size: 0.75em; text-align: center; padding: 5px; margin-top: 0; margin-bottom: 3px} div#sidebar-right p.photo{text-align: center} div#sidebar-right p{font-size: 0.75em; margin: 10px 5px} div#sidebar-right ul{font-size: 0.75em; margin: 5px; padding: 0} div#sidebar-right ul li {background-image: url(); background-repeat: no-repeat; background-position: 0 6px; padding-left: 13px; list-style-type: none} /* フッター */ div#footer{background-image:url(○●.jpg); background-repeat: no-repeat; width: 100%; margin-top: ; padding-top: 8px; clear: both} address{font-size: 0.75em; font-style: normal; text-align: center} </style> ・・・・・・・・ここまで指定 ここから、html打ち込み↓ <!-- フッター --> <div id="footer"align="center"> ～～テキスト文章～～<br> <address><big>～アドレスのテキスト～</address></big> <br>○○おなじくテキスト</div> <div align="center"> ～◆◆サイトの名前～ <img src="○○.jpg"border="0"bordercolor="#87ceeb"alt=""> <br><br> </body> </html> 少しいじると、おかしな反映になります、お助け下さい。
- 締切済み
- CSS
- CSS ブログ本文とサイドバーのバランス
質問させてください！ weeblyの2カラム標準テンプレートを使用しweb siteを運営しているのですが、 両端の空白をもう少し縮め、本文とサイドバーをその分広げたいと思い、CSSを 調整しようと調べながら各数値を変更してみたのですがうまくいきません。 どの数値を変更するべきなのか教えていただけたらと思います。 理想のサイトのリンク先も貼付けておきます。 http://www.fecalface.com/ body { background-color:#fff; font-family:"helvetica",arial,sans-serif; font-size:62.5%; color:#777; margin:0; padding:0; } acronym { cursor:help; border-bottom:1px dotted #ddd; } #container { font-size:1.2em; width:800px; margin:0 auto; } #header { color:#444; margin:0; padding:0px; background:#fff url(%%HEADERIMG%%) no-repeat bottom right; } #header h1 { font-family:"helvetica",arial,sans-serif; font-size:2em; color:#333; margin:30px 0 0 0; font-weight:normal; line-height:1.5; } #header h1 strong { color:#c00; } #header h2 { margin:1000px 0 0 0; font-size:1em; font-weight:normal; color:#999; } #navigation { text-align:right; margin:10px 10px 10px auto; } #navigation { margin:0 10px 0 0; padding:0; } #navigation li { margin:0; padding:0; list-style:none; display:inline; } #navigation li a { padding:5px 6px 2px 4px; margin:0 2px 0 0px; color:#000000; text-decoration:none; font-weight:helvetica; border-bottom:1px solid #ddd; } #navigation li a:hover { color:#C00; border-bottom:1px solid #c00; } #active a:link { color:#C00; border-bottom:1px solid #c00; } #active a:hover { color:#C00; border-bottom:1px solid #c00; } #active a:visited { color:#C00; border-bottom:1px solid #c00; } #content { margin:20px 0 20px 10px; padding:0; } #content p { padding:2px; text-align:justify; line-height:1.5; } #content h1 { display:block; margin:50px 0 0 10px; padding:0; font-family:"helvetica",arial,sans-serif; font-size:1.8em; color:#c00; border-color:#ddd; border-style:solid; border-width:0 0 1px 0; } #content h2 { display:block; margin:40px 40px 0 0px; padding:0 長くなってしまいましたがよろしくお願いします！
- ベストアンサー
- HTML
- XHTML、CSSレイアウトでフッターを常に最下部に配置するには?
フッターを最下部に表示したいのですが、#footerに position: fixed; bottom:0;を付け加えてもフッター だけ最下部に表示されコンテンツ部分がついてきません。 ヘイトに100%をつけくわえるのでしょうか? どうかご教授願います。 body { margin: 0; padding: 0; text-align:center; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:1em; background-color:#CCCCCC; } ol,ul,li { margin: 0; padding: 0; } li { list-style:none; } h1,h2,h3,p { margin: 0; padding: 0; } #container { margin: 0 auto; text-align: left; width: 740px; height: 100%; background-color:#FFFFFF; } #header { width:740px; height:80px; margin:0; padding:0; background-color:#FFFFFF; background-image:url(img/nine_rogo.gif); background-repeat:no-repeat; background-position:left center; } #contents { width:740px; height:100%; margin:0; padding:0; background-color:#FFFFFF; } #menu { float:left; width:140px; height: auto; margin:0; padding:0; background-color:#FFFFFF; color:#000000; } #main { float:right; width:580px; height:auto; margin:0; padding:0 0 0 10px; background-color:#FFFFFF; color:#000000 } #footer { clear:both; width:740px; height:auto; background-color:#FFFFFF; color:#000000; font-size:1em; padding:0.3em 0; text-align:center; }
- 締切済み
- ホームページ作成ソフト
- 背景色を入れたいのですがよろしくお願いいたします。
<!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" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="author" content="xxxxxxxx" /> <meta name="keywords" content="xxxxxxxx" /> <title>xxxxxxxx </title> <link ref="stylesheet" type="text/css" href="cut.css" /> <style type="text/css"> body {margin: 0px 5em; } #container { width:800px; margin-left:auto; margin-right:auto; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #999; border-color:#000000; } #header {background-color:#ffffff;}←ここの色を黒に変えたいのですが変わりません。 どうすればいいのでしょうか？ h1 { margin-left:20px; color:#ffffff; font-size:1.25em; padding-top:30px;} ul {list-style-type:none; margin-left:100px; padding-left:0px;} li {display:inline; padding-right:20px; font-size:1.0em;} li a {text-decoration:none; line-height:2.2 } a { color:#000000} a:hover {color:#990000; } address a:hover {color:#990000;} p { font-size:1.25em; margin-left:50px; color:#ffffff;} .isu {text-align:right; margin-right:2px; } .moji {font-size:2em; line-height:200%; } .name { color:#ffff99; text-align:right; margin-right:50px; margin-bottom:50px; text-align:bottom;} .champ {text-indent:1em; font-size:2em;} .midasi { color:#ffff99; text-align:bottom; margin-left:100px; } .coment { color:#000000; text-align:left; margin-left:150px; line-height:2em; width:600px;} .http {font-size:0.9em; color:#000000; text-align:right; margin-right:0px; line-height:2em; padding-right:30px;} .denwa {color:#000000; text-align:right; line-height:2em; padding-right:30px;} hr {background-color:#000000; height:2px; width:250px; align-right;} .addless {text-align:right; color:#000000; padding-right:30px;} </style> </herd> <body> <div id="container"> <div id="header">←ここから <h1>xxxxxxxx </h1> <p class="isu"><img src="isuA.jpg" alt="xxxxxxxx" align="right" width="400px" height="250px" /> <br /> <p class="moji" >xxxxxxxx</p> <p class="champ">xxxxxxxx</p> <p class="midasi">xxxxxxxx</p> <p class="name">xxxxxxxx</p> <br /clear="all"></p> <br /> </div>←ここまでの背景色を黒に変えたいのですが変わりません。 どうすればいいのでしょうか？ <br /> <br /> <p class="http">xxxxxxxx</p> <p class="addless">xxxxxxxx</p> <hr width="250" size="10" align="right"> <p class="denwa"> (黒電話) xxxxxxxx</p> <ul> <li><a href="top.html">トップページ</a></li> <li><a href="profile.html">プロフィール</a></li> <li><a href="staff.html">スタッフ</a></li> <li><a href="ryoukin.html">メニュー・マップ</a></li> <li><a href="mail.html">お客様メール</a></li> </ul> <br /> <br /> <p class="coment">xxxxxxxxxxxxxxxxxxxxxxxx</p> <br /> <br /> <br /> <address>Copyright(C)<a href="mailto:saitou@gmail.com">Hair Salon Saitou</address> </div> </body> </html>
- ベストアンサー
- Windows XP
- h1のみが反映されない！？
外部.cssに body { font-size : 80%; font-family:Verdana,Chicago,osaka,sans-serif,"ＭＳ Ｐゴシック"; line-height: 140%; text-align: center; background-color : #ffffff; color:#555; } /* タイトル*/ h1 { font-size:2.3em; color:#ffffff; text-align:left; padding: 10px 0px 0px 10px; } h2 { font-size:1.2em; color:#ff0000; text-align:left; padding: 10px 0px 0px 10px; } h3 { font-size:1.2em; color:#ff0000; text-align:rihgt; padding: 10px 10px 0px 0px; } と設定し、HTML内で任意の＊＊＊場所に <div id="＊＊＊"> <h1>タイトル</h1> </div> と記述してもデフォルトサイズと#555のカラーになってしまいます。 text-align:left; や padding: 10px 0px 0px 10px; も全く反映しません。 タイトルの位置を任意の場所を変更しても、状況は同じで <h1>を<h2>や<h3>に打ち直すと.css通りきちんと反映されます。 全体.css記述をコピーすると膨大なので省略しますが、解せないのは<h2>や<h3>なら反映するのに、<h1>のみ反映しないのがわかりません。 色々試してみましたが、今現在は<h1>で表示したいタイトルを h2 { font-size:2.3em; color:#ffffff; text-align:left; padding: 10px 0px 0px 10px; } としてＵＰしてますが、<h1>と記述してWEB上で反映しない原因は何でしょうか？宜しくお願い致します。
- ベストアンサー
- HTML
- 背景の色がコンテンツ部分にも表示されてしまいます
サイトに背景色をつけて、コンテンツ部分は白にしたのですが、どうしても背景色が表示されてしまいます。今はbody以外の各divの背景を白にしていますが、contentsの右下が背景色が表示されてしまします。 お手数ですが、ご指摘頂けると幸いです。よろしくお願いいたします。 <html> <body> <div id="wrapper"> <div id="header"></div> <div id="contents"> <div id="banner"></div> <div id="navi"> <h2><a href="../service/index.html"><em>あああ</em></a></h2> 中略 </div> <div id="bread"><a href="index.html">トップページ</a> > あああ</div> <div id="main"> <p>あああ</p> </div> <div id="sidenavi"> <h3>あああ</h3> <p>あああ</p> </div> <div id="pagetop"><a href="#"></a></div> <div id="footer">Copyright (c) 2009 All Right Reserved </div> </div> </body> </html> <css> body { text-align: center; margin: 0px; padding: 0px; background: #FFCCFF; } #wrapper { text-align: left; margin: 0px auto; padding: 0px; height: 800px; width: 850px; background: #FFFFFF; } #header { margin: 0px; padding: 0px; height: auto; width: 850px; background: #FFFFFF; } #contents #banner { background: url(image/banner.jpg) no-repeat; margin: 0px; padding: 0px; height: 304px; width: 850px; } #contents #navi { background: url(image/menu.jpg) no-repeat; margin: 0px; padding: 0px; height: 61px; width: 850px; } #contents #navi2 { background: url(image/menu2.jpg) no-repeat; margin: 0px; padding: 0px; height: 61px; width: 850px; } #navi h2 { font-size: 12px; margin: 0px; padding: 0px; float: left; } #navi em { visibility: hidden; } #navi2 h2 { font-size: 12px; margin: 0px; padding: 0px; float: left; } #navi2 em { visibility: hidden; } #contents { margin: 0px; padding: 0px; height: 500px; width: 850px; background: #FFFFFF; } #contents #sidenavi p { font-size: 95%; line-height: 1.1em; margin-right: 5px; margin-left: 5px; } #sidenavi h3 { font-size: 105%; font-weight: bold; border-left: 7px solid #FF3366; padding-left: 5px; background: #FFCC33; margin: 0px; padding-top: 5px; padding-bottom: 5px; } #navi a { margin: 0px; padding: 0px; height: 61px; width: 169.5px; display: block; text-decoration: none; } #navi2 a { margin: 0px; padding: 0px; height: 61px; width: 170px; display: block; text-decoration: none; } #contents #main { margin: 10px 0px 0px; padding: 0px 10px 10px; height: auto; width: 610px; float: left; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "メイリオ"; background: #FFFFFF; } #contents #pagetop { clear: both; background: #FFFFFF; margin: 0px; padding: 0px; } #contents #sidenavi { margin: 10px 5px 0px 0px; padding: 0px; float: right; width: 200px; border: 1px dashed #FF3399; background: #FFFFFF; } #footer { font-size: 90%; color: #FF3366; text-align: center; margin: 0px; padding: 10px 0px 0px; clear: both; border-top: 1px dotted #333333; border-right-color: #333333; border-bottom-color: #333333; border-left-color: #333333; background: #FFFFFF; } #main p { font: bold 120% "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #FF3399; padding: 0px; margin-top: 5px; margin-bottom: 5px; } #pagetop img { text-align: center; padding-top: 10px; margin: 0px; padding-bottom: 10px; padding-left: 5px; } .p1 { font-size: 130px; color: #FF3366; padding: 10px; width: 590px; border: 2px dashed #FF3399; background: #FFCCFF; margin: 10px; text-align: center; } #main img { margin: 0px; padding: 0px 0px 10px; } #contents #bread { margin: 5px 0px 0px; padding: 5px 5px 0px 10px; font-size: 100%; width: 830px; }
- 締切済み
- HTML
- HTMLとCSSの記述で表示がうまくされません
現在HTMLとCSSを使ってウェブのページを作っているのですが どうしても思ったように表示が出来ません。 HTMLの他にCSSの記述を記載致しました。 なにが出来ないかと申しますと 下記の <p class="section"> <h2>解決できる方法</h2> <img src="mark.gif" alt="*" width="14" height="18"><font color="#FF0000">再短時間と最小の労力で職場や学校のマルマルが解決できる方法!!</font> 心理学の知識がない人でも簡単にできた<br> あまりにも効果的な<font color="#FF0000">『門外不出』</font>の<font color="#FF0000">aaaaa</font>対処法とは？ </p> 記述部分を枠の中に入れたいのですが、どうしても外に出て表示されてしまいます。 どなたか解決方法をご存知の方はお教え頂けないでしょうか？ HTMLの記述がこちらになっております。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <meta http-equiv="Content-Type"content="text/html;charset=shift_jis"/> <head> <title>aaaa</title> <meta http-equiv="description"content="bbbb"> <meta http-equiv="keywords"content=""> <link rel="stylesheet" type="text/css" href="index.css" media="all"> </head> <body> <p class="head"><span lang="en"></span></p> <h1></h1> <div class="img"><img src="header.gif" alt="" width="800" height="165"></div> <div class="menu"> <a href="index.html"><img src="navi_top.gif" width="195" height="35" alt="top"></a> <a href="02.html"><img src="navi_ijime.gif" width="195" height="35" alt=""></a> <a href="03.html"><img src="navi_shokuba.gif" width="195" height="35" alt=""></a> <a href="04.html"><img src="navi_plofile.gif" width="195" height="35" alt=""></a> </div> <p class="section"> <h2>解決できる方法</h2> <img src="mark.gif" alt="*" width="14" height="18"><font color="#FF0000">再短時間と最小の労力で職場や学校のマルマルが解決できる方法!!</font> 心理学の知識がない人でも簡単にできた<br> あまりにも効果的な<font color="#FF0000">『門外不出』</font>の<font color="#FF0000">aaaaa</font>対処法とは？ </p> <p class="text_bg"> <div class="text">text</div> </p> </body> </html> CSSの記述がこちらになっております。 body{ text-align:center; width:800px; } p{ text-align:center; font-size:0.85em; color:#333333; } p.head { font-size:0.6em; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight:bold; color:#666666; text-align:left; margin-bottom:0px; } .img{ margin-top:0; margin-bottom:0; } .menu { padding-left:1px; margin-bottom:0; margin-top:0; } h1{ font-size:0.5em; display:none; } h2{ font-size:0.5em; display:none; } h2 img{ vertical-align:middle; } .mark{ margin-right:10px; } .section{ font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; margin-bottom:0px; margin-top:0px; background-image:url(back_01.gif); background-repeat:no-repeat; width:800px; height:165px; color:#666666; font-size:1em; } p.01{ text-align:center; font-size:1.05em; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } p.text_bg{ background-image:url(back_02.jpg); background-repeat:no-repeat; margin-top:10px; width:800px; height:365px; } .text{ margin-top:10px; text-align:center; }
- ベストアンサー
- HTML
- HP ページごとにタイトル画像を変えたいです
以前質問したのですが、解決せず再度質問です。 HPを作成中です。 タイトル部（ヘッダ）の画像をページごとに変えようとしています。 bodyタグにclassを使用して変えようと思ったのですが、エディターでは上手く表示されるものの いざUPすると変更したい部分だけ表示されず背景色（黒）になってしまいます。 作成した外部cssとHTMLは css @charset "shift_jis"; body { font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; font-size: 75%; line-height: 2; color: #ffffff; background-color: #000000; margin: 0px; padding: 0px; text-align: center; } h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form{ margin: 0px; padding: 0px; } ul{ list-style-type: none; } img { border: none; } input,textarea,select { font-size: 1em; } form { margin: 0px; } table { border-collapse:collapse; font-size: 100%; border-spacing: 0; } ---------------------------------------------------------------------------*/ a { color: #ffffff; } a:hover { color: #FF0000; text-decoration: none; } ---------------------------------------------------------------------------*/ #container { width: 910px; text-align: left; margin-right: auto; margin-left: auto; } ---------------------------------------------------------------------------*/ .★★★ #header { background-image: url(images/mainimg.jpg); background-repeat: no-repeat; width: 100%; height: 360px; } .●●● #header { background-image: url(images/mainimg-2.jpg); background-repeat: no-repeat; width: 100%; height: 655px; } .■■■ #header { background-image: url(images/allstars-1.jpg); background-repeat: no-repeat; width: 100%; height: 560px; } .▲▲▲ #header { background-image: url(images/allstars-2.jpg); background-repeat: no-repeat; width: 100%; height: 605px; } .■■■ #header { background-image: url(images/allstars-3.jpg); background-repeat: no-repeat; width: 100%; height: 560px; } #header h1 { font-size: 10px; color: #FFFFFF; line-height: 40px; font-weight: normal; text-align: right; } HTML <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>〇〇〇</title> <meta name="description" content="×××" /> <meta name="keywords" content="....." /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="script.js"></script> </head> <body class="●●●"> <div id="container"> <div id="header"> <h1>〇〇〇</h1> </div> <!--/header--> こんな感じです。 mainimg部（大きさが異なります）の変更のみです。 不具合箇所を教えてください。 よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
ありがとうございます。 widthを％の指定ではなくpxの指定で、できました。