質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.54%

  • HTML

    11108questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    7261questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4974questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTMLCSSのオブジェクト配置について

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 490

revoiot

score 116

HTMLCSSを使い、オブジェクトの配置について、どうしてもわからないことがあるため、この場を借りて、質問させていただきます。
今回の質問は、オブジェクトの配置に関することであり、部分的な部分のHTMLCSSの情報では、解決するのは、難しいと考えたため、大変恐れ入りながら、比較的いつもより情報を多く、記載させていただいております。

質問至る経緯ならびに、改善しようとするため取り組んだこと

①自分の作ったホームページのPC観覧の際、拡大縮小をすると、web画面のレイアウトが崩れた。それを改善しようと、websiteで調べた。
そこには、オブジェクトの幅、高さなどをパーセント表示にすると、拡大縮小する際、レイアウトが崩れる可能性があるため、すべて実値にしたほうが、よいとあった。

②そのことから、私はGoogle開発ツールを使い、画面大きさ100%の時の全てのオブジェクトの大きさを確認し、%表示されているものを、ピクセル表示に変えていった。しかし、どういうわけか、画面大きさ100%の時でレイアウトがくずれてしまうようになった。それが下記の写真の通りである。mainと左のサイドバーが右のサイドバーに潜り込む形になってしまっている。次に私は、これを改善するため、様々なところを書き換えたりした。
menu_naviに、float:rightを入力
mainの画像それぞれの縮尺の変更
mainのtdの縮尺の変更
mainに、float:rightまたは、float:left;を入力
左のサイドバーにfloat:rightまたは、float:left;を入力
content_boxに、float:left;を入力

以上を試行しましたが、うまくいかずレイアウトが崩れたままでした。

mainと左のサイドバーを上に戻し、拡大縮小表示にかかわらず、レイアウトが崩れない方法をどなたかわかる方大変恐縮ですが、ご教授頂けないでしょうか?

よろしくお願いします。

イメージ説明

下に記載のURLは、①の段階の時のURLです。110%拡大の際は問題ありませんが、これ以外の画面の大きさですとレイアウトが崩れます。
co-712.it.3919.com

コード



<body>



<div id="container">

<div id="header" class="clearfix">
<div class="header-bloc clearfix">

<div id="wrapper">


<div id="contens-area" class="clearfix">


<div id="side" class="clearfix">

<div class="menu_navi">
    <p class="menutitle"><img src="img/menu.png" alt="メニュー"></p>
    <ul>
    <li><a href="index.html"><img src="img/top-menu.png" alt="トップ"></a></li>
    <li><a href="charge.html"><img src="img/course.png" alt="コース・料金案内"></a></li>
    <li><a href="access.html"><img src="img/access.png" alt="アクセス"></a></li>
    </ul>
</div><!--/menu_navi-->
<p class="L_cy_box">
</p>

<p class="L_cy_box">
■詳しくはNEWS & TOPIXをご覧ください。<br>
<br>
■お客様からのお電話をお待ちしております<br>
tel :  075-746-3155
</p>
</div> 
<div id="main" class="clearfix">

<table cellspacing="0" cellpadding="0" class = "table6">
<tr>
<td colspan="2"><img src="img/mainimage.png" alt="mainimage" class = "mainimage"></td>
</tr>
<tr>
<td align="left" width="50%"><img src="img/sofa.png" alt="ゆったりとしたソファー" class="sofa"></td>
<td align="left" width="50%"><img src="img/appearance.png" alt="お店の外観"class="appearance"></td>
</tr>
<tr>
<td align="left" valign="top"  class="pd1"><span class="color_1">※ゆったりとしたソファーでお待ち頂けます。</span></td>
<td align="left" valign="top" class="pd1"><span class="color_1">※お店の外観です。</span></td>
</tr>
</table>


<div id="side2" class="clearfix">    
<div class="menu_navo">
    <p class="menutitlo"></p>
    <ul>
    <li class = "facebook"><iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fjoze.beauty%2F&width=50px&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId" width="50px" height="30" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></li>
    <li class = "facebook2">もしよければいいねボタン押してみてください!</li>
    <li class ="qr"><img src="qr.png" alt="QRコード" class ="qrcode">美容所 joze&ARCH OF JOZE 烏丸御池店のケイタイ</li>
    </ul>
    <li class = "ek"><img src="Reviews.gif" alt="口コミ" class ="Reviews" >口コミランキング<br>1位獲得!</li>
</div><!--/menu_navi-->    
</div>    



<div class="content_box" style="margin:36px 0 65px 0;">

<h3><img src="img/joze.png" alt="JOZE & ARCH OF JOZE" class="joze"></h3>
<!--<div class="title_line"></div>-->

</div><!--/content_box-->

<div class="content_box">

<h3><img src="img/news.png" alt="NEWS"></h3>
<!--<div class="title_line"></div>-->

<div style="width:100%; margin:20px 0; border-bottom:1px solid #aaaaaa;"></div>


</div><!--/content_box-->

</div>  <!--main-end-->

</div>  <!--contens-area-end-->

</div><!--wrapper-end-->


コード

CSS

img.sofa{
    width:124px;
    height:175px;

}

img.appearance{
    width:124px;
    height:175px;
}



img.mainimage{
    width:470px;
    height:248px;
}



img.qrcode{
    width:69px;
    height:69px;
}

img.Reviews{
    width:69px;
    height:69px;
}


body {




.clearfix {
    display: inline-block;
    min-height: 1%;
}

/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix { display: block;}
/* End hide from IE-mac */




body{


.ph{
    padding-top:6px;
    font-size:30px;
}

.ad{
    font-size:11px;
    line-height:15px;
    padding-top:4px;

}

.sd{
    font-size:11px;

}

.bg{
    line-height:15px;
    margin-top:3px;
    font-size:11px;
}

.qr{
    font-size:10px;
    line-height:10px;
    padding-bottom:30px;
}


.facebook{
    padding-left:5px;
    padding-top:50px;
    font-size:10px;
    line-height:10px;
}

.facebook2{
    font-size:10px;
    line-height:10px;
    padding-bottom:30px;
}

.ek{
     font-size:8px;
     line-height:10px;
}




#wrapper{
    background-color:#D2B48C;
}


#contens-area{
    width:904px;
    margin-left:auto;
    margin-right:auto;
    background:#fff;
}

.contens-area_single_icon{
    width:129px;
    height:96px;
    top:0px;
    right:-131px;
}


#main {
float:right;
width:665.99px;
height:1452.98px;
margin:0;
margin-bottom:100px;
padding-left:16px;
}





/* メニューバー */



li { list-style:none; }

.menu_navi{
width:200px;
margin-bottom:22px;
}


.menutitle{
width:190px;
margin:11px 0 8px 5px;
}


.menu_navi li{
width:185px;
margin:0 0 3px 7px;
}


.menu_navi a:hover img{
opacity: 0.7;
filter: alpha(opacity=70);
}


/* メニューバーend  */


/* 左のメニューバー */



li { list-style:none; }

.menu_navo{
width:81.82px;
margin-bottom:22px;
height:431.82px;
}


.menutitlo{
width:71px;
margin:11px 0 8px 5px;
}


.menu_navo li{
width:69px;
margin:0 0 3px 7px;
}


/* メニューバーend  */
#side{
float:right;
width:201px;
margin:0 22px 0 15px;
}

#side2{
float:left;
width:80px;
margin:0 22px 0 15px;
}

.L_cy_box{
width:197px;
margin:0 0 16px 3px;
}



.pd1{
padding-top:5px;
}


.content_box{
width:750px;
height:658px;
margin:32px 0 36px 0;
color:#313131;
padding-left:100px;
float:right;
}

.content_box2{
width:100%;
margin:32px 0 36px 0;
color:#313131;
padding-left:7px;
}

.title_line{
height:4px;
background: url("img/tw_line.png") bottom repeat-x;
margin:3px 0 0 0;
}


h3{
font-size:24px;
line-height:30px;
/*font-weight:bold;*/
color:#2a2a2a;
}

.table1 .op-td{
width:400px;
word-wrap: break-word;
white-space: normal;
padding-left: 20px;
}

.table1 .op-th{
}

.table5 .op-td{
  padding-left: 20px;
}

.table3 th, .table3 td{
padding: 10px 20px;
}

.table4 th, .table4 td{
padding: 10px 20px;
}

.table5 th{
text-align: center;  
}



.table3 {
  border-collapse: collapse;
}

.table4 {
  border-collapse: collapse;
  margin-top:  30px;

}
.table6 {
    float:right;
    width:470px;
}


コード
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

確認ですが、大雑把に言うと、id="contens-area"の中に、左から順に、side2/main/sideって並べばいいんですよね?
だとすると、side2(80px)+main(650px)+side(201px)+更に、両サイドが左右マージン合わせて37px*2で、
1005pxとなり、contens-areaで指定している、904pxを大きく超えています。

そこを治すだけで収まっちゃうような気がしますが…いかがでしょうか?

それ以外に、containerとwrapperが逆になっているところとか、色々ツッコみどころはありますが…

追記:大幅に変えちゃいます(後で気付きましたが、side2にborderが入っていたので、2px追加してます)

<div ="wrapper">
  <div id="header">中身そのまま</div>
  <div id="container">
    <div id="inner-container">
      <div id="main">mainの中身</div>
      <div id="side">sideの中身<div>
    <div>
    <div id="sub">Side2の中身</div>
  </div>
</div>
.clearfix:after,#container:after,#inner-container:after {
  content:"";
  display:block;
  clear:both;
}
#wrapper {/*既存の#containerと差し替え*/}
#container {/*id="contens-area"と差し替え*/
  margin:0 auto;
  width:1007px;
}
#inner-container {/*新規:main/sideをまとめて右へ*/
  float:right;
  width:888px;
}
#main {
  float:left;
  width:650px;
}
#side {
  float:right;
  width:223px;
}
#sub {/*side2と差し替え*/
  float:left;
  width:104px;
}
.menu_navi {/*追加*/
  margin-right:22px;
}
.menu_navo {/*追加*/
  margin-left:22px;
}


こんな感じです。
main/side/subには、class="clearfix"不要です。大元のcontainer/inner-containerにCSSの先頭で当てています。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/07 23:54

    ご返信ありがとうございます。

    はい、そうです。左から順に、side2/main/sideに並べたいと考えています。

    さきほど、contens-areaの幅を1005px以上にして書いたのですが、side2/mainを戻すことができませんでした。もし、他に改善方法がありましたら、教えていただきたいです。よろしくお願いします。

    キャンセル

  • 2017/02/08 12:23

    大変ご丁寧に多くの記述をしていただき、ありがとうございます。

    これから、いただいた回答を一つずつ、かみくだいて理解していき、基礎知識を蓄えていこうと思います。

    大変恐れ入りますが、作業中に、もしまたご不明ながありましたら、質問の際、ご回答いただけると幸いです。

    ご親切に対応していただきありがとうございました。

    キャンセル

同じタグがついた質問を見る

  • HTML

    11108questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    7261questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4974questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。