- ベストアンサー
横長になってしまう
ホームページ作ってますが必要以上に横長になってしまいます。(右下セル) 画像サイズの横幅位にまとめたいのですが。なんで横長になっているか、直し方を教えてください。よろしくお願いします。
- ホームページ作成ソフト
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
サンプルHTML ★メニュー用画像は添付ファイルを参照 ★ソース中の全角スペースはタブに置換すること ★IEはカウンター追加非対応、Opera漢数字に非対応、firefox,safariは対応 ★携帯用スタイルシートは未作成 スタイルシート全体を@media screen{}で囲むと、携帯ではデフォルトの状態で表示される。 <!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"> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- html,body{margin:0px;padding:0px;background-color:rgb(200,255,255);text-align:center;} h1,h2{padding-left: 168px;} h1{font-size: 0.9em; padding-top: 2em;} h2{font-size: 1.4em;} body div.main{ width:90%;min-width:480px; max-width:980px; margin-left:auto;margin-right:auto; position:relative; background-color:white; } div.header{ background-image:url("img/pic_pc.jpg"); background-position: 100% 0px ;background-repeat:no-repeat; height:145px;margin-left: 0px; } div.header p{ position:absolute; width:181px;height: 139px;margin:0px; border:ridge 3px black;background-color:gray; top:0px;left:0px; } div.header p img{ width: 181px; height: 104px;margin-top:18px; } div.content{ margin-left: 200px; border:gray solid 1px; position:relative;padding: 1em; font-family: "HGP創英プレゼンスEB" ; text-align:center; } div.content h2{ font-family: "ＭＳ Ｐゴシック",Osaka,sans-serif; } div#message{ width: 80%;margin-left:auto;margin-right:auto; border:double blue 4px; padding: 2em 0.2em; } div#message h3{ font-size: 2em; } div#message p{ font-family:"HG行書体"; margin-left:10%;margin-right:10%;width:auto; border-bottom:dashed 1px black; font-size: 1.6em; } div.content h2{ text-align:left; padding: 0.5em 0px 0px 2px; border-left: blue 10px solid; border-bottom: blue 1px solid; } div.content>p{ margin: 2em 0em; width:100%; font-size:2em; } div.content ol{ font-size: 1.6em; text-align:center; letter-spacing: 1em; padding-left:0em; margin-left:0px; line-height: 1.6em; counter-reset: olcount 1; } div.content ol li{ list-style-type: none; padding-left:0em; margin-left:0px; } div.content ol li:before{ content: counter(olcount, cjk-ideographic) "、"; counter-increment: olcount 0; } div.content p.philosophy{ text-indent:2em; font-size: 1.4em; margin:3em 10% 10% 1em;width:auto; } div.content address{ text-align:center; font-family: "HG行書体"; font-size: 1.4em; } ul#nav{ font-family: "ＭＳ Ｐゴシック",Osaka,sans-serif; position:absolute;top:0px;left:-200px; margin:0px;padding:0px; width:200px;border:solid 1px gray; } ul#nav,ul#nav li{display:block;list-style:none;} ul#nav li{width:181px;height:41px;margin-bottom:10px;background-color:blue;color:white;font-weight:bold;font-size:20px;text-align:center;} ul#nav li a{width:181px;height:100%;display:block;text-decoration:none;padding-top:9px;background:blue url("img/menue.gif") 0px 0px repeat-x;} ul#nav li a:link{color:white;} ul#nav li a:visited{color:aqua;background-position:0px -153px;background-color:rgb(0,0,160);} ul#nav li a:hover,ul#nav li a:focus{color:red;background-position:0px -51px;background-color:aqua;} ul#nav li a:active{color:blue;background-position: 0px -102px;background-color:yellow;} --> </style> </head> <body> <div class="main"> <div class="header"> <p class="Logo"><img src="img/centrallogo.jpg" width="90" height="52" alt="ロゴ"></p> <h1>有限会社★★★ホームページ</h1> <h2>社長挨拶</h2> </div> <div class="content"> <div id="message"> <h3>"夢は大空へ努力は足元に”</h3> <p>代表取締役社長 ★★★★</p> </div> <p>日頃、お世話になっております。</p> <p class="photo"> <img src="img/president.jpg" width="364" height="220" alt="写真"> </p> <h2 id="slogan">社のスローガン</h2> <ol> <li>情熱</li> <li>執念</li> <li>感謝</li> </ol> <h2 id="philosophy">経営理念</h2> <p class="philosophy"> 企業は人なりを基本とし、常に誠意と熱意を持ってユーザーを大切にして、社会貢献を目的にし、努力邁進する。 </p> <address>有限会社★★</address> <ul id="nav"> <li><a href="index2.html">HOME</a></li> <li><a href="president.html">社長挨拶</a></li> <li><a href="companyinfo.html">会社概要</a></li> <li><a href="companyguide.html">会社案内</a></li> <li><a href="workinfot.html">業務内容</a></li> <li><a href="workinfo.html">営業拠点</a></li> <li><a href="branch.html">採用情報</a></li> <li><a href="inquiry.html">お問い合わせ</a></li> </ul> </div> </div> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
規約によりURLが削除されちゃったけど、後で時間が取れたら自分の練習を兼ねてサンプルを作ってみよう。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ビルダーの標準モードでの制作だと思いますが、ページを表で組み上げて、幅を指定している限りは、無理です。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから ページレイアウトの目的で表を用いる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より ホームページ・ビルダー - Wikipedia ( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%BB%E3%83%93%E3%83%AB%E3%83%80%E3%83%BC#.E6.A8.99.E6.BA.96.E3.83.A2.E3.83.BC.E3.83.89 ) ★応急処置としては、とりあえず、tableの幅をCSSにて%で指定する。 少なくとも企業サイトでしたら、色々なユーザーエージェントの訪問を考慮して、Web標準で作成するほうがよいのではないかと思います。 すなわち、きちんとマークアップしたHTMLを作成して、そのうえでCSSでデザインしていく。ビルダーを使っての作業は、最初からHTMLエディタ ( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83%BC%E3%82%B5%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB#HTML.E3.82.A8.E3.83.87.E3.82.A3.E3.82.BF )で作成するよりも、深くHTMLを知っていないと困難ですが、頑張ってください。 参考HTML:以下でよいはず、シンプルで携帯電話でも読めるはず、あとはスタイルシートで自由にデザインしてください。 <body> <div> <div class="header"> <h1>有限会社★★★ホームページ</h1> <h2>社長挨拶</h2> </div> <div id="message"> <h3>"夢は大空へ努力は足元に”</h3> <p>代表取締役社長 ★★★★</p> <p>日頃、お世話になっております。</p> <p><img src="/img/president.jpg" width="364" height="220" alt="写真"></p> </div> <div id="slogan"> <h3>社のスローガン</h3> <ol> <li>情熱</li> <li>執念</li> <li>感謝</li> </ol> </div> <div id="philosophy"> <h3>経営理念</h3> <p> 企業は人なりを基本とし、常に誠意と熱意を持ってユーザーを大切にして、社会貢献を目的にし、努力邁進する。</p> <address>有限会社★★</address> <ul id="nav"> <li><a href="index2.html">HOME</a></li> <li><a href="president.html">社長挨拶</a></li> <li><a href="companyinfo.html">会社概要</a></li> <li><a href="companyguide.html">会社案内</a></li> <li><a href="president.html">業務内容</a></li> <li><a href="workinfo.html">営業拠点</a></li> <li><a href="branch.html">採用情報</a></li> <li><a href="inquiry.html">お問い合わせ</a></li> </ul> </div> </div> </body> </html>
