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

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

ただいまの
回答率

91.02%

  • HTML5

    3374questions

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

  • CSS3

    1743questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

カラム落ちとレイアウト崩れの解消法を知りたいです。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 181
退会済みユーザー

退会済みユーザー

度々の質問申し訳ございません。

現在コーディングをしていて、どうしても右側に配置しているサイドバーがカラム落ち?してしまい、上に持ってくることが出来ません。。
また、カラム落ちの影響なのか、ページに配置している画像などが中央に配置するつもりが全体的に左に寄ってしまい、修正することが出来なくなってしまいました。
どなたか、解消法をご教授お願いいたします。

    margin: 0px;
    padding: 0px;
}
.line-decoration {
    width: 100%;
    height: 12px;
    margin: 0px;
    padding: 0px;
    background: url(img/head-bg.jpg) repeat-x center top;
}
.request-icon{
    float: right;
    display: block;
    width: 93px;
    height: 27px;
    margin-right: 10px;
}
.reserve-icon{
    float: right;
    display: block;
    width: 93px;
    height: 27px;
    margin-left: 10px;
}
a{
    text-decoration: none;
    display:block;
    text-indent:-9999px;
    background-image :url(img/head-menu.jpg);
    height:49px;
    width:100%;
    background-position: 0 top;
}
#globalnav {
    display: block;
    clear: both;
}    
#globalnav .idea a{
    background-image :url("img/head-menu.jpg");
    background-repeat: no-repeat;
    background-position: -150px top;
}
#globalnav .service a{
    background-image :url("img/head-menu.jpg");
    background-repeat: no-repeat;
    background-position: -300px top;
}
#globalnav .company a{
    background-image :url("img/head-menu.jpg");
    background-repeat: no-repeat;
    background-position: -450px top;
}
#globalnav .FAQ a{
    background-image :url("img/head-menu.jpg");
    background-repeat: no-repeat;
    background-position: -600px top;
}
#globalnav .access a{
    background-image :url("img/head-menu.jpg");
    background-repeat: no-repeat;
    background-position: -750px top;
}
.box {
    margin: 10px 0;
    float: left;
    width: 100%;
    background: #ffffff ;
}
.box img {
    max-width: 100%;
    float: right;
    margin: 0;
}
.box p {
    margin: 0;    padding: 0px;
}
#sidebar a {
    text-decoration: none;
    float: left;
    display:block;
    text-indent:-9999px;
    width: 255px;
    height: 60px;
    background-image :url(img/top-menu.jpg);
    background-repeat: no-repeat;
    background-position:  0, left bottom;
}
ul#sidebar {
    display: block;
    height: 300px;
}
ul#sidebar li {
    display: block;
    height: 60px;
    list-style-type:none;
}
ul#sidebar .careplan a {
    background-image: url(img/top-menu.jpg);
    background-repeat: no-repeat;
    background-position: left 0px;
    display:block;
    height:60px;
}
ul#sidebar .grouphome a {
    background-image: url(img/top-menu.jpg);
    background-repeat: no-repeat;
    background-position: left -60px;
    display:block;
    height:60px;
}
ul#sidebar .service a {
    background-image: url(img/top-menu.jpg);
    background-repeat: no-repeat;
    background-position: left -120px;
    display:block;
    height:60px;
}
ul#sidebar .homehelp a {
    background-image: url(img/top-menu.jpg) ;
    background-repeat: no-repeat;
    background-position: left -180px;
    display:block;
    height:60px;
}
ul#sidebar .daycare a {
    background-image: url(img/top-menu.jpg) ;
    background-repeat: no-repeat;
    background-position: left -240px;
    display:block;
    height:60px;
}
.left {
    float: left;
}
h1{
    color:#ffffff;
    margin:0px;
}
h2{
    height:80px;
    padding-top:24px;
    padding-left:20px;
    margin:0px;
    color:#000000;
    clear:both;
    }
#content .newsdl dt {
    clear: left;
    float: left;
    padding-left: 30px;
    color: #ffc0c7;
    display: block;
    margin-top:0px;
    margin-right: 0;
    margin-left: 0px;
    background-image: url(img/top-li.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    line-height: 20px;
}
dd{
    margin-left:30px;
    margin-bottom: 15px;
    float: left;
    width: 520px;
}
dt{
    float:left;
    clear:left;
    width:125px;
    color:#ffc0c7;
}
.newsdl .arrow-icon {
        position: relative;
        top: 4px;
        margin-right: 10px;
}
ul#globalnav li{
    float:left;
    width:150px;
    list-style-type:none;
    background-color:#ff9fbf;
    }
ul{
    padding:0px;
    margin:0px;
    }
div#left{
    float:left;
    width:680px;
    background-color:#ffffff;
}
div#right{
    float:right;
    width:220px;
    padding-left:0px;
}
div#right img{
    margin:0px;
}
.pagetop{
    margin-right: auto;
    margin-left; auto;
    text-align: right;
    padding-right: 45px;
    padding-bottom: 5px;
}
div#footer {
    text-align:center;
    color:#717171;
    clear:both;
    height: 60px;
    padding: 0;
    background-image: url(img/foot-bg.jpg);
    background-repeat: repeat-x;
    background-position: bottom;
    margin: 0px;
    width: 100%;
}
div#wrapper{
    width:900px;
    margin: 0 auto;
}
/*ここから下層ページのコード*/
#plannavi {
    display: block;
    margin-left: 15px;
    overflow: hidden;
    margin-bottom: 30px;
}
#plannavi li {
    display: block;
    height: 34px;
    line-height: 32px;
    width: 320px;
    float: left;
    background-position: left top;
    margin-right: 10px;
    margin-bottom: 10px;
}
ul#plannavi li a {
    background-image: url(grouphome/img/navi.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    display: block;
    height: 32px;
    padding-left: 30px;
    text-decoration: none;
    border: 1px solid #ffdee7;
    text-indent: initial;
}
h2.moji {
    text-align: center;
    background-image: url(img/con-h2.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    display: block;
    padding-bottom: 25px;
    padding-top: 25px;
    margin-bottom: 18px;
    width: 670px;
}
h3{
    line-height: 21px;
    background-image: url(grouphome/img/h3.png);
    background-repeat: no-repeat;
    background-position: left top;
    padding-left: 35px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    display: block;
}
.h3 .midashi {
    position: relative;
    top: 4px;
    margin-right: 10px;
}
#groupchart {
    width: 600px;
    overflow: hidden;
}
#groupchart .left,
#groupchart .right {
    float: left;
    width: 300px;
}
#groupchart .groupwrap {
    background-repeat: no-repeat;
    background-position: 25px bottom;
    padding-bottom: 25px;
    margin-bottom: 10px;
}
#groupchart .left .groupwrap {
    background-image: url(grouphome/img/arrow-pink.jpg);
}
#groupchart .right .groupwrap {
    background-image: url(grouphome/img/arrow-blue.jpg);
}

p.title1{
    background-color: #ffbac5;
    display: block;
    width: 230px;
    padding: 10px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}
p.title2{
    background-color: #b0d9fe;
    display: block;
    width: 230px;
    padding: 10px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}
table{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-radius: 5px;
    margin-left: 40px;
    margin-right: auto;
}
td{
    border: 1px solid #000000;
    border-collapse: collapse;
    padding: 10px;
}
th{
    border: 1px solid #000000;
    padding: 10px;
    background-color: #e6f3ff;
}
td.bgpink{
    background-color:#ffedf0;
}
#container {
    width: 900px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
div#right {
    float: right;
    width: 210px;
    padding: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 30px;
    margin-left: 0px;
    display: block;
}

イメージ説明

イメージ説明

イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/09/21 00:13

    HTMLが提示されていません。また、バッククオート3つの前後には改行を入れてください。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

    キャンセル

  • dit.

    2017/09/21 09:11

    HTMLの提示は画像ではなくコードでしてください。CSSも頭が切れているように見えますので、もう一度確認してください。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2017/09/21 12:35

    HTMLを載せようとしたのですが、文字数の制限に引っかかってしまうので、このような形になってしまいました。申し訳ございません。。

    キャンセル

回答 1

checkベストアンサー

+1

提示のコードでは完全には再現できませんので、気になる部分だけ挙げておきます。

以下全て提示の画像内の行数です。

  • 22行目 class="left"ではなくid="left"ではないか
  • 38行目~156行目まではid="left"内に配置するべきではないか?(37行目で閉じられている)
  • 118行目、120行目のaltの書き方はミス?

全体レイアウト用のidでのleftrightと、id="groupchart"内のclassleftrightがあり混乱しそうですね。

どの部分が左側(メインカラム)なのか、どの部分が右側(サイドバー)なのかを整理しておいた方がいいと思います。
適切なインデントを心掛ける事や</div>のところにコメントで何を閉じたか書いておくなどやりやすい方法を模索してください。
floatを多用していることで適切にclearしないとどんどん崩れます。
今回のようなカラム落ちを防ぐためにも、全体の構造を整理してみてください。

(そういえばCSSには#sidebarがありますがHTMLには無いですね。これもその内混乱のもとになりそうです)

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/09/24 00:46

    回答ありがとうございます。
    仰る通りid=leftではなくclass=leftの間違いや閉じタグの忘れが原因だったようで、なんとか解決できました。

    キャンセル

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

  • ただいまの回答率 91.02%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • HTML5

    3374questions

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

  • CSS3

    1743questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。