プロが教えるわが家の防犯対策術！

横長になってしまう

解決済

  • 質問者：centralcsk
  • 質問日時：
  • 回答数：3件

ホームページ作ってますが必要以上に横長になってしまいます。(右下セル)
画像サイズの横幅位にまとめたいのですが。なんで横長になっているか、直し方を教えてください。よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

サンプル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>
「横長になってしまう」の回答画像3
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ORUKA1951
  • 回答日時：

規約によりURLが削除されちゃったけど、後で時間が取れたら自分の練習を兼ねてサンプルを作ってみよう。

    • good
    • 0
    • 件
通報する

No.1

  • 回答者： ORUKA1951
  • 回答日時：

　ビルダーの標準モードでの制作だと思いますが、ページを表で組み上げて、幅を指定している限りは、無理です。


【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
ページレイアウトの目的で表を用いる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
ホームページ・ビルダー - Wikipedia ( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC% … )

★応急処置としては、とりあえず、tableの幅をCSSにて%で指定する。

　少なくとも企業サイトでしたら、色々なユーザーエージェントの訪問を考慮して、Web標準で作成するほうがよいのではないかと思います。
　すなわち、きちんとマークアップしたHTMLを作成して、そのうえでCSSでデザインしていく。ビルダーを使っての作業は、最初からHTMLエディタ ( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83% … )で作成するよりも、深く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>


　
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報