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

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

ただいまの
回答率

90.00%

リンクタグを設定したことによるレイアウト崩れ

受付中

回答 1

投稿 編集

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

退会済みユーザー

いつもお世話になっております。
タイトル通り、リンクタグを記入したことによってコーディングしたページのレイアウトが崩れてしまいました。
お手数おかけしますが、どなたかご教示お願いいたします。

こちらリンクタグ設定前です。

リンクタグ設定後です。

字数の制限に引っかかってしまうため、該当すると思われる箇所のみHTMLとcssを載せます。

<ul id = "globalnav">
        <li class="home"><a href="html.html">HOME</a></li>
        <li class="idea"><a href="html.html">理念</a></li>
        <li class="service"><a href="kohada.html">サービス</a></li>
        <li class="company"><a href="shimesaba.html">会社概要</a></li>
        <li class="FAQ"><a href="html.html">良くある質問</a></li>
        <li class="access"><a href="html.html">アクセス</a></li>
    </ul>
        <div class="clearfix">
        <div id="left">
        <div class="left">
        <div id="content">
        <h2 class="moji">
        <img src="grouphome/img/h2.png" alt="グループホーム" width="153" height="25">
        </h2>
    <ul id="plannavi">
     <li><a href="#p1">グループホームとは</a></li>
     <li><a href="#p2">サンベストビレッジ浮間公園の特徴</a></li>
     <li><a href="#p3">サンベストビレッジ浮間公園の生活</a></li>
     <li><a href="#p4">部屋の構成</a></li>
     <li><a href="#p5">ご入居までの流れ</a></li>
     <li><a href="#p6">料金</a></li>
     <li><a href="#p7">入居条件</a></li>
     </ul>
    </div>
    </div>
    <h3 class="setumei">グループホームとは</h3>
    認知症の疾患の方が、家庭的な環境の中で、スタッフの援助を受けながら共同生活を送り、家事な<br>どの日常生活を通じて残された能力を引き出すことで、その方の表情や行動が落ち着き、認知症の<br>症状を和らげる効果があると言われています。
    <p class="pagetop"><a href="#top">-△-</a></p>

コード
#plannavi {
    display: block;
    margin-left: 15px;
    overflow: hidden;
    margin-bottom: 30px;
}
#plannavi li {
    display: block;
    height: 34px;
    line-height: 32px;
    width: 290px;
    float: left;
    background-position: left top;
    margin-right: 40px;
    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-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;
    text-align: center;
}
#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;
}
.clearfix:after {
    clear: both;
     content: ''; display: block;
}
.page-top {
    text-align: right;
}
p.pagetop {
    text-align: right;
}

コード

リンク部分のコードは<p class="pagetop"><a href="#top">-△-</a></p>
を入力しております。

navi部分のcssがなかったので追加いたします。

#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;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • 退会済みユーザー

    退会済みユーザー

    2017/09/25 20:48

    環境はMac OSになります。

    キャンセル

  • asahina1979

    2017/09/25 20:52

    表示以外の箇所とあいまってくずれてるきがするよなぁ・・・

    キャンセル

  • Lhankor_Mhy

    2017/10/06 21:20

    すでに解決済みのよう( http://sunbest-village.jp/grouphome/index.html )ですね。

    キャンセル

回答 1

+1

直接の解答にはなってないので、参考にならなかったら無視してください。

けっこう見づらいので、できればご自身で書いたコードを書き直したほうが良いと思います。
aタグを追加したらクラスが壊れた場合やっぱり階層構造が崩れて、当たって欲しいスタイルが当たってないからっていう可能性もあるし、整理すればそんなに難しそうでもなさそうな気がします。

まず、インデントを直しましょう
あと、無意味なdivタグのネストも見づらいので消してください
↓こういうやつです。flexboxとか使って書き直した方がスッキリすると思います

<div class="clearfix">
<div id="left">
<div class="left">
<div id="content">

class, idの命名についてもひと目で分かるようにしないと自身で見て分からないものは、他人が見ても分からないと思います(left, right, moji等)

ここまでやったら、Chromeでデベロッパーツールでどこのスタイルが当たってないのか確認したら分かりやすいと思います。
イメージ説明

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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