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

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

ただいまの
回答率

90.86%

  • CSS

    4965questions

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

  • HTML5

    3482questions

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

  • レスポンシブWebデザイン

    194questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

レスポンシブ でナビが右端に行ってしまうのを直したい。

解決済

回答 2

投稿 編集

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

現在、あるHPの採用ページをレスポンス化しているのですが、
何故かスマホで表示されるナビの画像が、右端に出てしまいうまくレスポンシブにならない。
TOPだけはレスポンス対応になっているので、それを真似てみたがうまく行かない。
ID develop PASS PassW0rd
http://p53.kunokin.develop.lionheart.co.jp/

http://p53.kunokin.develop.lionheart.co.jp/recruit/

cssで対応しているのだがうまく行かず

/**
 * スマートフォン用
 */
@media screen and (max-width: 479px) {
    .wrapper {
        width: auto;
        min-width: 0;
        overflow: visible;
    }
    .layout {
        width: auto;
        padding:0 10px;
    }

    body {
        padding-top: 50px;
    }
    img {
        width: 100%;
        height: auto;
    }
    .h2-head img {
        height: 18px;
        width:auto;
    }
    #head {
        height: 50px;
        overflow: visible;
    }
        #head .head-h1 {
            display: none;
        }
        #head .logo {
            float: none;
            padding-top: 6px;
        }
            #head .logo img {
                width: 218px;
                height: auto;
            }
        #head .tel,
        #head .contact {
            display: none;
        }
        #head .sp-navi {
            display: block;
            position: absolute;
            right: 0;
            top: 0;
        }
            #head .sp-navi img {
                width: 50px;
                height: 50px;
            }

    #navi {
        display: none;
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        background: none;
        height: auto !important;
        z-index: 8;
    }
        #navi ul {
            margin: 20px 20px 20px;
        }
        #navi li {
            float: none;
            margin-bottom: 8px;
        }
        #navi li.sp {
            display: block;
        }
        #navi li a {
            display: block;
            height: 40px;
            background: #fff;
            color: #1a1a1a;
            text-align: center;
            line-height: 40px;
            text-decoration: none;
        }
            #navi li a:before {
                content: attr(title);
            }
        #navi li img {
            display: none;
        }
        #navi .close {
            display: block;
            text-align: center;
            margin: 20px 0;
        }
            #navi .close img {
                width: 30px;
                height: 30px;
            }
    #head .navi-wrap {
        background: rgba(0,0,0,.7);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 5;
    }
    .navi-view #navi,
    #head.navi-view .navi-wrap {
        display: block;
    }

    .contact-box {
        float: none;
        width: auto;
        height: auto;
        padding: 8px 12px;
    }
        .contact-box h2 {
            font-size: 14px;
            margin-bottom: 10px;
        }
            .contact-box li.tel {
                padding-bottom: 9px;
                margin-bottom: 10px;
                border-bottom: 1px solid #D9D9D9;
                text-align: center;
            }
                .contact-box li.tel img {
                    float: none;
                    width: 80%;
                    height: auto;
                    display: block;
                    margin: 0 auto 10px;
                }
                .contact-box li.tel span {
                    float: none;
                }
            .contact-box li.fax {
                margin-bottom: 12px;
                text-align: center;
            }
                .contact-box li.fax img {
                    width: 80%;
                    height: auto;
                    display: block;
                    margin: 0 auto 5px;
                }
                .contact-box li.fax span {
                    margin: 0 .5em;
                }
            .contact-box li.btn img {
                width: 100%;
                height: auto;
            }
    .recruit-ban {
        float: none;
        text-align: center;
        margin-top: 15px;
    }
        .recruit-ban img {
            max-width: 100%;
            width: auto;
            height: auto;
        }

    #foot-banner {
        padding: 5px 0 0;
        background: #231815;
    }
        #foot-banner ul {
            width: auto;
            padding-right: 5px;
            text-align: center;
            font-size: 0;
        }
            #foot-banner li {
                font-size: 12px;
                float: none;
                display: inline-block;
                margin-right: 0;
                width: 50%;
                padding-right: 5px;
                margin-bottom: 5px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                background: none;
            }
                #foot-banner li img {
                    max-width: 100%;
                    width: auto;
                    height: auto;
                }
    #foot {
        padding-top: 15px;
    }
        #foot .info-block {
            width: auto;
            float: none;
        }
            #foot .info-block .desc {
                font-size: 12px;
                text-align: center;
            }
            #foot .info-block h2 {
                text-align: center;
            }
            #foot .info-block h2 img {
                width: 200px;
                height: auto;
            }
        #foot .foot-sitemap-block {
            display: none;
        }
        #foot .copyright {
            text-align: center;
            margin-top: 15px;
            font-size: 10px;
        }
}

採用のTOPだけ表示がおかしくなる原因が分からず。
TOPからCSSを持ってきただけなので何か足りないコードがあれば教えて欲しいです。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

0

これが邪魔をしているようですね

<div class="clearfix">
                    <ul>
                        <li>
                            <p class="photo"><img src="./img/index/activity-ph01.jpg" alt="" width="300" height="170"></p>
                            <h3>バドミントン</h3>
                            <p>■活動場所:常滑市体育館</p>
                            <p>■人数:約10名<br>
                                仕事後に会社近くの体育館で活動しています。本格的にやりたい人はもちろんのこと、遊び感覚でやりたい人も大歓迎!平成26年度から、愛知県実業団に加盟して試合に出ています。</p>
                            <p>■試合実績<br>

                                ・平成27年度/常滑市民大会1部男子ダブルス<br>
                                             準優勝
                                ・平成28年度/実業団前期リーグ男子4部優勝<br>
                                         全日本実業団選手権出場<br>    
                                </p>
                        </li>
                        <li>
                            <p class="photo"><img src="./img/index/activity-ph02.jpg" alt="" width="300" height="170"></p>
                            <h3>フットサル</h3>
                            <p>■活動場所:主に東工場屋上<br>
                                      その他県内の体育館、フットサル場</p>
                            <p>■人数:約10名<br>
                                社内に施設があるので、昼休みに集って楽しく運動しています。土曜日になると午前4時30分から始めます!</p>
                        </li>
                        <li>
                            <p class="photo"><img src="./img/index/activity-ph03.jpg" alt="" width="300" height="170"></p>
                            <h3>ボーリング</h3>
                            <p>■活動場所:名古屋グランドボール</p>
                            <p>■人数:16名<br>
                                土曜出勤日や、金曜日の夜に活動しています。ストライクを狙って日々のストレスを発散!?</p>
                        </li>
                        <li class="clear">
                            <p class="photo"><img src="img/index/activity-ph04.jpg" alt="" width="300" height="170"></p>
                            <h3>全日本製造業コマ大戦</h3>
                            <p>■活動場所:久野金属工業常滑工場設計室</p>
                            <p>■人数:約10名</p>
                            <p class="indent">■内容:直径2cmのコマにデザインと技術を詰め込み、相手と同じ土俵で戦う。</p>
                            <p class="indent">■実績:2015年2月世界大会ベスト8、2015年4月東京ビックサイト場所『優勝』など</p>
                        </li>
                        <li>
                            <p class="photo"><img src="./img/index/activity-ph05.jpg" alt="" width="300" height="170"></p>
                            <h3>ゴルフ</h3>
                            <p>■人数:約10名<br>
                                年に1?2回のコンペに向けて打ちっぱなし練習等を行っています。ゴルフ好きな方、チャレンジしてみたい方歓迎します。道具の貸し出しも行います。</p>
                        </li>
                        <li>
                            <p class="photo"><img src="./img/index/activity-ph06.jpg" alt="" width="300" height="170"></p>
                            <h3>釣り</h3>
                            <p>釣り好きの社員が夜中に会社へ集合し船釣りなどに行っています。社員はもちろんのこと、元社員の顔もチラホラ。社員同士の仲の良さが伺えます。魚が釣れても釣れなくても心は満タンになることでしょう。</p>
                        </li>
                    </ul>
                </div>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/01/09 17:49

    こんな初歩的な部分で (ノω=`)
    ありがとうございました!

    キャンセル

0

ベーシック認証がかかっていてサイトが見れないですね

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/01/09 17:31

    失礼しました。
    ID develop
    PASS PassW0rdです

    キャンセル

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

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

関連した質問

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

  • CSS

    4965questions

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

  • HTML5

    3482questions

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

  • レスポンシブWebデザイン

    194questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。