拡大/縮小表示について
HTMLにおいて
現在、ブラウザを横に拡大すると、タイトルなどブラウザの拡大/縮小にに合わせて自動的に
拡大・縮小してしまいます。
これを
ブラウザを拡大しても表示しているタイトルなどは固定のサイズで表示し
縮小すると、固定のサイズで表示しスクロールバーを表示したいのですがどうすればいいでしょうか
アドバイスください。
現状
<空白>-------タイトル1--------<空白>
<空白>初めての方-------------<空白>
<空白>------ホームページに戻る<空白>
拡大すると
<空白>------------タイトル1-------------<空白>
<空白>初めての方-----------------------<空白>
<空白>----------------ホームページに戻る<空白>
縮小すると
<空白>-----タイトル1----<空白>
<空白>初めての方-------<空白>
<空白>ホームページに戻る<空白>
こんな感じです。(わかりにくてすいません。)
これを
拡大すると
<空白><空白>-------タイトル1--------<空白><空白>
<空白><空白>初めての方-------------<空白><空白>
<空白><空白>------ホームページに戻る<空白><空白>
縮小すると
<空白>-------タイトル1--
<空白>初めての方-------
<空白>------ホームページ
<---スクロールバー表示----->
にしたいのですが?
関係ある部分を抜粋しました
*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" >タイトル1</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>
*css
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ゴシック", "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;
}
お礼
ご回答ありがとうございました。 参考URLを確認し、できました! とっても感謝しています。 CSSを全く使っていないサイトだったので、影響範囲がとっても心配でしたが、最小限の修正で実現できそうです。 本当にありがとうございました。