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

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

ただいまの
回答率

87.61%

wordpress(local)内でのレスポンシブ化

受付中

回答 0

投稿

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

score 3

.service-videoの部分をレスポンシブでウインドウ幅を小さくしていくと、margin-leftだけが小さくなり、隣にある画像と被らないようにしたいです。

.service-img内のimgにmargin-leftをvhをつけて、試してみましたが、レスポンシブしていくと画面右に空白ができてしまいます。

ピクセルは使わずにvw,vhを使った方法をご教授願いたいです。

<?php get_header(); ?>

<div class="top">
    <div class="top-background"></div>
    <nav>
        <ul class="nav-align">
            <li><a href="#"> 会社情報</a> </li>
            <li><a href="#feature"> 事業内容</a> </li>
            <li><a href="#product"> 制作事例</a> </li>
            <li><a href="#news"> 採用情報</a> </li>
            <li><a href="#news"> お知らせ</a> </li>
            <li><a href="#contact" class="header-contact"> NEVYコラム</a> </li>

        </ul>
    </nav>


    <h2 class="top-message">
        人に伝わる,<br>映像づくり
    </h2>
</div>

<section class="top-filter">
    <div class="top-filter-left">
        <img src="https://neby.co.jp/wp_nby_2020/wp-content/uploads/2020/12/philosophy.svg" alt="" style="width:65vh; height:30vh;">
    </div>

    <div class="top-filter-right">
        <h2>人に伝わる、映像づくり</h2>
        <p>

            NEBYは創業以来、映像を中心に事業を作り上げてきました。
            <br>
            <br>
            スマートフォンの普及と共に、映像はとても身近なものになりました。
            <br>
            <br>
            第5世代移動通信システム(5G)の到来と共に、
            <br>
            <br>
            映像の世界はさらに広がりを見せようとしています
            <br>
            <br>
            <br>
            <br>
            どんなに技術が発展しても、
            <br>
            <br>
            どんなに手軽に映像が作れるようになったとしても、
            <br>
            <br>
            人を惹きつける映像でなければ意味がありません。
            <br>
            <br>
            <br>
            <br>
            それは人に等しく文字が書けても
            <br>
            <br>
            誰しも小説家に慣れないと同じように。

        </p>
    </div>
</section>

<section class="company-content">
    <div class="company-intro">
        <div class="company-intro-message">
            <h2>NEBYは映像を使って問題解決をする企業です</h2>
            <p>NEBYは創業以来、動画制作とライブ配信番組の制作をメインに事業を行って参りました。
                <br>

                映像によるコミュニケーションデザインを一括しておまかせいただけます。

            </p>

        </div>
        <div class="company-intro-link">
            <div class="president-message">
                <a href="">
                    <h3>代表メッセージ</h3>
                    <p>message</p>
                    <div class="arrow-anime">
                        <div class="arrow">

                        </div>
                    </div>
                </a>
            </div>
            <div class="company-border-left">

            </div>
            <div class="company-detail">
                    <a href="">
                        <h3>会社概要</h3>
                        <p>company</p>
                        <div class="arrow-anime">
                            <div class="arrow">

                            </div>
                        </div>
                    </a>
            </div>
            <div class="company-border-left"></div>
            <div class="company-history">
                    <a href="">
                        <h3>沿革</h3>
                        <p>history</p>
                        <div class="arrow-anime">
                            <div class="arrow">

                            </div>
                        </div>
                    </a>
            </div>
        </div>
    </div>


</section>

<section class="service">
    <div class="service-gradient">
        <div class="service-logo">
            <img src="https://neby.co.jp/wp_nby_2020/wp-content/uploads/2020/12/service_title.svg" alt="" style="width:50vh; height:18.9509vh;">
        </div>
    </div>

</section>

<div class="service-bottom">
    <div class="service-video">
            <div class="video-top">
                <p class="count">01</p>
                <p class="next-to-count">Movie</p>
            </div>

            <div class="video-content">
                <h2>動画制作事業</h2>
                <p>
                    動画の制作を、企画構成・絵コンテ・キャスティング・ロケ調整・カメラマン派遣・編集・カラーグレーディング・モーショングラフィックスなど、全てワンストップでおまかせいただけます。
                </p>
            </div>

            <div class="video-button">

                <a class="hover" href="#">VIEW MORE</a>
                <div class="button-arrow"></div>

            </div>

    </div>
    <div class="service-img">
            <img src="https://neby.co.jp/wp_nby_2020/wp-content/uploads/2020/12/service_img1.png" alt="" style="height:52.7778vh;">
    </div>

    <div class="service-live">

        <div>
            <img src="https://neby.co.jp/wp_nby_2020/wp-content/uploads/2020/12/service_img2.png" alt="" style="width:54.1667vw; height:52.7778vh;">
        </div>

        <div class="video-top">
            <p class="count">02</p>
            <p class="next-to-count">LiveStreaming</p>
        </div>

        <div class="video-content">
            <h2>ライブ配信事業</h2>
            <p>

                Youtubeやtwitterライブ、niconico、FacebookLive、LINELIVEなど、ライブストリーミング事業者と連携し、公式配信枠の確保から企画制作、当日の現場ディレクションなどワンストップでおまかせいただきます。

            </p>
        </div>

        <div class="video-button">

            <a class="hover" href="#">VIEW MORE</a>
            <div class="button-arrow"></div>

        </div>
    </div>
</div>

<!-- footer-menuから下をget_footer()に置き換える -->
<?php get_footer(); ?>




    <!-- pickup -->
$black-color:#596166;

body{
    padding: 0;
    margin: 0;

    background: url(../img/top.jpg)center center / cover no-repeat fixed;
    font-family: 'Yu Mincho','serif';
}

.nav-align{
    display: flex;
    width: 78vh;
    margin-right: auto;
    margin-left: auto;
    li{
        margin-right: 5vh;
        width: 25vh;
        a{
            text-decoration: none;
            color: white;
        }
    }
}


header{
    background-color:transparent;
    position: fixed;
    width: 100%;

    z-index: 10;

}



.header-inner{
    display: flex;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5vh;
}

.header-logo{
    margin-right: auto;
}

.header-right{
    margin-left: auto;
}

.header-right{
    a{
        color: white;
    }
}

ul{
    list-style: none;
}

.top{
    height: 100vh;
}
.top-message{
    margin-left: 13vw;
    font-size: 10vh;
    color: white;
}

.top-filter{
    padding-left: 13vw;
    display: flex;
    background-color: rgba(122, 137, 146, 0.863);
    filter: saturate(75%);
    padding-top: 10vh;

}

.top-filter-right{
    margin-left: 8vw;
    margin-top: 10vh;
    color: white;
    padding-bottom: 13vh;
    margin-right: 5vw;
}

.company-intro{
    margin: 5vh 0;
}

.company-intro-link{
    display: flex;
    width: 100vh;
    margin-right: auto;
    margin-left: auto;
}

.president-message,.company-detail,.company-history{
    margin: 0 9vh;

    width: 20vh;
    a{
        text-align: center;
        text-decoration: none;
        color: $black-color;
    }
}

.company-content{
    background-color: #ededed;
    border: 1vw #ededed solid;
}

.company-intro-message{
    text-align: center;
    h2{
        font-size: 4vh;
    }
    p{
        margin-bottom: 10vh;
    }
}
.arrow{
    width: 10vh;
    background-color: #596166;
    position: relative;
   margin-left: 1vh;
    margin-top: 6.2rem;
    height: 1px;
}

.arrow::after{
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 0 10px;
    border-color: transparent transparent transparent gray;
    position: absolute;
    top: -400%;
    left: 100%;
}

.button-arrow{
    width: 10vh;
    background-color: #596166;
    position: relative;
   margin-left: 15vh;

    height: 1px;
}

.button-arrow::after{
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 0 10px;
    border-color: transparent transparent transparent gray;
    position: absolute;
    top: -400%;
    left: 100%;
}

.company-border-left{
    border-left: 1px solid rgba(111, 121, 127, 0.3);
}

.service{
    background-color: white;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;


    width: 100vw;
}

.service-gradient{
    background-color: white;
    background: url(../img/service-back.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 3;
    height: 100vh;
    position: relative;
}

.service-logo{
    position: absolute;
    margin-top: 10vh;
    right: 10vw;
}

.service-bottom{
    background-color: white;
    height: 100vh;
    position: relative;
    padding-top: 10vh;
    border: 3px solid white;
    z-index: 3;
}

.service-video{
    width: 50vh;
    box-shadow: 2px 2px 4px gray;
    height: 65vh;
    padding: 0 5vh;
    top: -50vh;
    margin-left: 12vw;
    position: absolute;
    z-index: 2;
    background-color: white;
}

.service-live{
    @extend .service-video;
    top: -100vh;
    display: none;
}

.video-top{
    display: flex;
    p{
        margin: 0;
    }
   .count{
       font-size: 7vh;
       color: $black-color;
       padding: 3vh;
   }
   .next-to-count{
    font-size: 2vh;
    padding-top: 8vh;
   }

}

.video-content{
    margin-bottom: 8vh;
    h2{
        font-size: 4vh;
    }
    p{
        letter-spacing: 10px;
    }
}

.video-button{
    a{
    color: $black-color;
    padding: 2.5vh 7vh;
    border: 1px solid $black-color;
    background-color: white;
    text-decoration: none;
    }
}

.service-img{
    img{
       // margin-left:72vh;
        width:55vw;
        position: absolute;
        top: -30vh;
        z-index: 10;
        right: 0;
    }
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • Lhankor_Mhy

    2021/01/12 14:49

    「レスポンシブしていくと画面右に空白ができてしまいます」とのことですが、この「レスポンシブする」とは「スクリーンサイズを小さくする」という意味で合っていますか?

    そうであれば、ご提示のコードを試してみましたが、スクリーンの右端に空白が発生することはありませんでしたので、問題が再現できませんでした。

    キャンセル

まだ回答がついていません

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

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

関連した質問

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