ここから本文です

ホームページ制作で質問があります。

nat********さん

2015/10/110:58:18

ホームページ制作で質問があります。

PCで閲覧したところ、レイアウトが崩れないのですが、

スマホ(iPhone6プラス)で閲覧したところ、画面からはみ出てしまい、

ヘッダー部分のレイアウトが崩れてしまいます。

インナーとフロートの使い方が悪いのが原因だとおもうのですが・・・

まだまだ勉強不足の為、ご指導よろしくお願い致します。

制作中URL http://www.nextfrontier.jp/yumetirashi/

以下HTML部分

<!--------[ ページ本文 ]-------->
<body>
<!--------[ タイトル ]-------->
<div id="title">
<div class="titleinner">
<img src="image/titel_01.jpg" alt="" class="burnerL">
<img src="image/titel_02.jpg" alt="" class="burnerR1">
<img src="image/titel_03.jpg" alt="" class="burnerR2">
<img src="image/titel_04.jpg" alt="" class="burnerR1">
<img src="image/titel_05.jpg" alt="" class="burnerR1">
<img src="image/titel_06.jpg" alt="" class="burnerR3">
<img src="image/titel_08.jpg" alt="" class="burnerR5">
<img src="image/titel_09.jpg" alt="" class="burnerR6">
<img src="image/titel_10.jpg" alt="" class="burnerR7">
<img src="image/titel_07.jpg" alt="" class="burnerR4">
<div class="clear"><br></div><!-- フロート解除 -->
</div>
</div><!-- タイトル -->
<!--------[ ヘッダー ]-------->
<div class="header">
<div class="headerinner">
<div id="slider">
<div class="slider-view">
<div class="slider-container">
<div><img src="image/main.jpg" alt="" style="width:1024px; height:400px;"></div>
<div><img src="image/production_main.jpg" alt="" style="width:1024px; height:400px;"></div>
<div><img src="image/price_main.jpg" alt="" style="width:1024px; height:400px;"></div>
<div><img src="image/management_main.jpg" alt="" style="width:1024px; height:400px;"></div>
<div><img src="image/inquiry_main.jpg" alt="" style="width:1024px; height:400px;"></div>
</div><!-- // .slider-container -->
</div><!-- // .slider-view -->
<a href="#" id="slide-prev">&laquo;</a><a href="#" id="slide-next">&raquo;</a>
</div><!-- // #slide -->
</div>
</div><!-- ヘッダー -->
<!--------[ コンテンツ ]-------->
<div class="content">
<!--------[ サイドメニュー ]-------->
<div class="inner">
<div id="sidemenu">
省略
</div><!-- インナー -->
<!--------[ コンテンツメイン ]-------->
<div class="r">
省略
</div>
</div><!-- サイドメニュー -->
</div><!-- コンテンツ -->
<div class="footer">
<div class="inner">
省略
</div><!-- インナー -->
</div><!-- フッター -->
</body>

CSS部分

/*==== 共通 の スタイル ====*/
a{
text-decoration: none;
}
a:hover{
opacity: 0.6;
filter: alpha(opacity=40);
}
.clear{
height: 0px !important;
line-height: 0px !important;
margin: 0px !important;
padding: 0px !important;
clear: both;
}

/*====[ タイトル ]====*/
#title{
width:100%;
margin:0 auto;
color:#666;
padding:0px;
overflow:hidden;
text-align: left;
font-size: 16px;
padding: 0;
}
#title img.burnerL{
width: 265px;
height: 206px;
margin: 0px;
}
#title img.burnerR1{
width: 144px;
height: 37px;
margin: 0px 0px 0px 5px;
float: right;
}
#title img.burnerR2{
width: 99px;
height: 37px;
margin: 0px 0px 0px 5px;
float: right;
}
#title img.burnerR3{
width: 189px;
height: 37px;
margin: 0px 0px 0px 5px;
float: right;
}
#title img.burnerR4{
width: 420px;
height: 112px;
margin: 0px;
float: right;
}
#title img.burnerR5{
width: 310px;
height: 159px;
margin: 10px 0px 0px 10px;
float: right;
}
#title img.burnerR6{
width: 207px;
height: 37px;
margin: 10px 0px;
float: right;
}
#title img.burnerR7{
width: 207px;
height: 37px;
margin: 10px 6px 10px 0px;
float: right;
}
.titleinner{
width:1024px;
margin:0 auto;
color:#666;
padding:0px;
overflow:hidden;
}
/*====[ ヘッダー ]====*/
.header{
width:100%;
background:#395CA6;
}
.headerinner{
width:1024px;margin:0 auto;
color:#666;
padding:10px 0px;
overflow:hidden;
}

/*====[ コンテンツ ]====*/
.content{
width:100%;
}

/*====[ インナー ]====*/
.inner{
width:1024px;margin:0 auto;
color:#666;
padding:10px;
overflow:hidden;
}
/*====[ サイドメニュー ]====*/
#sidemenu{
float:left;
width:272px;
}
/*====[ コンテンツメイン ]====*/
.r{
float:right;
width:722px;
padding:10px;
background:#ccc;
}
/*====[ フッター ]====*/
.footer{
width:100%;
background:#000;
}

閲覧数:
140
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

hir********さん

2015/10/118:41:46

こんにちは

製作中のサイトを見ましたが
ページ上部のレイアウトがIE以外で崩れていますね
これは
natofoolさんが書いたままだと
本当は崩れて表示されるべきものが
IEがHTML+CSSを正しく表示できずに
たまたま綺麗に収まってくれている状態です

iPhoneで崩れる原因にも通じていることなのですが
そもそものhtmlの組み方に問題がありますね

まず
floatが乱用状態になっているので
組み方を見直しましょう



1つのdivにみんな突っ込んで
突っ込んだ中身の画像やらメニューやらをfloatで…
とするのはちょっと雑な方法です
natofoolさんが便宜上「タイトル」という呼び方をしている
このエリアの中でも小分割しましょう

僕なら以下の画像のようにhtmlを割ります
http://test.hirokato.com/chiebukuro/20151001-1/001.jpg
緑色のメニューのところは本当はulでやったほうがいいんですけど
natofoolさんにはまだちょっと早いので割愛します


cssはまずこうして↓

#title .logo {
float:left;
}

#title .menu {
float:left;
}

#title .contact {
floato:left;
}

それぞれにwidthやheightなどを指定していきましょう
これももうちょっとスマートな書き方がありますが
あえてnatofoolさんに分かりやすいようにこう書きます

<div class="contact">の中身は
今現在のままfloat:right;で並べる方法でいけますね


この方法で
floatしている各ブロックの高さや幅をきっちり指定する
その各ブロック内に収まっているものがブロックの枠を押し広げないようにする
など…きっちり作れれば
iPhoneでの表示も崩れないと思いますが
natofoolさんは
まだまだ勉強不足とご自身でおっしゃっているように未熟な部分が多々あるので
また別の問題で崩れたりする可能性はあるかもしれませんね

頑張ってください

  • 質問者

    nat********さん

    2015/10/118:58:41

    ご指導ありがとうございました。

    少しやってみたのですが、相変わらずうまくいきません。

    #title .logo{
    float:left;
    width: 265px;
    height: 206px;
    margin: 0px;
    padding:0px;
    }
    #title .logo{
    float:left;
    width: 265px;
    height: 206px;
    margin: 0px;
    padding:0px;
    }
    #title .menu{
    float:left;
    width:759px;
    height: 37px;
    margin: 0px;
    padding:0px;
    }

    とcssに記載してみました。

    結果このような状態です。

    http://www.nextfrontier.jp/yumetirashi/

    ご指導頂けないでしょうか?


  • その他の返信を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

質問した人からのコメント

2015/10/3 13:15:59

回答ありがとうございました。

大変、勉強になりました。

またご指導よろしくお願い致します。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる