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

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

ただいまの
回答率

90.83%

  • jQuery

    6162questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5153questions

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

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

    197questions

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

レスポンシブCSSでテキストをアニメーションしながら拡大縮小する方法

解決済

回答 6

投稿 編集

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

ebifurai55

score 9

レスポンシブができません。

当該のファイルを書いても、ニューっという感じでメニューが拡大縮小
されません。普通にレスポンシブに対応するためにはどうしたらいいんでしょうか?

該当のサンプルページですが、この様にしたいんです。

http://www.webdesignleaves.com/samples/resposive/SlickNav/slicknav-02.html
http://www.webdesignleaves.com/samples/resposive/SlickNav/slicknav-03.html

でもよく見るとtextのサイズは一定で、あまり私のサイトと代わり映えのない感じが
してきました。textのサイズを可変する場合はメディアクエリで対応するしかないんでしょうか?拡大縮小のアニメーションして、サイズが変わってほしいです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>javascript本格入門</title>

<meta name="viewport" content="width=device-width,initial-scale=1">
<!-cssの実装-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/stylemin400.css">
<link rel="stylesheet" href="css/stylemin638.css">
<link rel="stylesheet" href="css/stylemax1000.css">
<link rel="stylesheet" type="text/css" href="slicknav/slicknav.css"/>




</head>
<body>

    <!-- 標準距離の実装-->
    <div class="container">
        logo

        <ul class="button">
            Download
        </ul>
        <!-- メニューのボタン実装 -->
        <ul class="menu">
            <li><a href="#">メニューA</a>
                <ul class="sub">
                    <li><a href="#">サブメニューA</a></li>
                    <li><a href="#">サブメニューA</a></li>
                    <li><a href="#">サブメニューA</a><!--
                        --><ul class="sub">
                            <li><a href="#">サブメニューA2</a></li>
                            <li><a href="#">サブメニューA2</a></li>
                            <li><a href="#">サブメニューA2</a></li>
                        </ul><!--
                    --></li>
                </ul>
            </li>

            <!-- サブメニューのコメントはブラウザ間の余白を取るためらしい -->
            <!-- サブメニューの中にサブメニューを作るとメニューを表示する -->

            <li><a href="#">メニューB</a>
                <ul class="sub">
                    <li><a href="#">サブメニューB</a></li>
                    <li><a href="#">サブメニューB</a>
                        <ul class="sub">
                            <li><a href="#">サブメニューB2</a></li>
                            <li><a href="#">サブメニューB2</a></li>
                            <li><a href="#">サブメニューB2</a>
                                <ul class="sub">
                                    <li><a href="#">サブメニューB3</a></li>
                                    <li><a href="#">サブメニューB3</a></li>
                                    <li><a href="#">サブメニューB3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">サブメニューB</a></li>
                </ul>
            </li>
            <li><a href="#">メニューC</a>
                <ul class="sub">
                    <!-- サブメニューBだったのでサブメニューCに変更 -->
                    <li><a href="#">サブメニューC</a>
                        <ul class="sub">
                            <li><a href="#">サブメニューC2</a></li>
                            <li><a href="#">サブメニューC2</a></li>
                            <li><a href="#">サブメニューC2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">サブメニューC</a></li>
                    <li><a href="#">サブメニューC</a></li>
                </ul>
            </li>
        </ul>


        </div>

        <div id="container">
        <div class="sentece">

            <ul class="whitebox" id="gnav">

            <span class="logono-sukima">BOOGIE</span>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Demo</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Album</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Home</a></li>
            </ul>
            <div class="slick main toppu bottomu">

                    <div class="hyakupa-sento-janai">Fast Track<p class="tekisuto">Music Is Not to Hear</p>Quis autem vel eum iure reprenderit Quis autem vel</br>eum iure reprehderit,<div class="clearfix"></div></br><div class="learnmore">Learn More</div></div>
                    <div class="hyakupa-sento-janai">Fast Music<p class="tekisuto">It is to Just Feel</p>Quis autem vel eum iure reprenderit Quis autem vel</br>eum iure reprehderit,<div class="clearfix"></div></br><div class="learnmore">Learn More</div></div>
                    <div class="hyakupa-sento-janai">Fast villege<p class="tekisuto">Your my sunshine</p>Quis autem vel eum iure reprenderit Quis autem vel</br>eum iure reprehderit,<div class="clearfix"></div></br><div class="learnmore">Learn More</div></div>
                    <div class="hyakupa-sento-janai">Find out<p class="tekisuto">it is proof not your best</p>Quis autem vel eum iure reprenderit Quis autem vel</br>eum iure reprehderit,<div class="clearfix"></div></br><div class="learnmore">Learn More</div></div>
            </div>    



        </div>
        </div>

        <div class="mainarea">

                <div class="sakana">
                    <div class="hakonoarea">1</div>
                    <div class="hakonoarea">2</div>
                </div>
                <div class="sakana">
                    <div class="hakonoarea">3</div>
                    <div class="hakonoarea bottomu">4</div>
                </div>
                <div class="toppu cian">

                    <div class="mizuiro">
                    We wish a go
                    <div class="koe">
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit.
Aenean commodo ligula eget
 dolor. Aenean massa
                    </div>
                    </div>
                </div>
            </div>
        <div class="kurashian tyuuousoroe">
            <div class="tyuudann marginzennhoukou migidan toppu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</div>
                <div class="migidan"><iframe width="300" height="215" src="https://www.youtube.com/embed/ZA_c_OIwKuY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
                    <div class="clearfix"></div>
            <div class="tyuudann marginzennhoukou hidaridan toppu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</div>
                <div class="migidan"><iframe width="300" height="215" src="https://www.youtube.com/embed/ZA_c_OIwKuY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
                    <div class="clearfix"></div>
            <div class="tyuudann marginzennhoukou migidan toppu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</div>
                <div class="migidan"><iframe width="300" height="215" src="https://www.youtube.com/embed/ZA_c_OIwKuY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
                    <div class="clearfix"></div>
            <div class="tyuudann marginzennhoukou hidaridan toppu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</div>
                <div class="migidan"><iframe width="300" height="215" src="https://www.youtube.com/embed/ZA_c_OIwKuY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
                    <div class="clearfix"></div>



        </div>
        <div class="thirdbackground paddingcenter">
        <span class="statewhite">New Album Release</span></br>
        COMING SOON
        </div>
        <div class="uminosachi tyuuousoroe"></div>
        <div class="kumorinochi tyuuousoroe"></div>
        <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7269.916794736793!2d139.8557849286646!3d35.741468658458395!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1527071966559" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
        <div class="amenochi tyuuousoroe">
            <form action="/my-handling-form-page" method="post">
                <div class="kinyuuwrap">
                    <div class="kinyuu lefuto">
                        <input type="text" class="formnoiro" id="name" name="user_name" value="Name">
                    </div>
                    <div class="kinyuu lefuto">
                        <input type="text" class="formnoiro" id="last name" name="user_name" value="Last Name">
                        </div>
                <div class="clearfix"></div>
                    <div class="kinyuu lefuto">
                        <input type="text" class="formnoiro" id="email" name="user_name" value="Email">
                    </div>
                    <div class="kinyuu lefuto">
                        <input type="text" class="formnoiro" id="phone" name="user_name" value="Phone">
                        </div>
                        <div class="clearfix"></div>
                            <div class="kinyuu lefuto">
                                <textarea class="formnoiro" id="message" name="message" placeholder="Message" rows="10" cols="50"></textarea>
                            </div>
                    </div>
                    <div class="clearfix"></div>
                    <input class="botann" type="submit" value="Send">

                </form>
            </div>
            <div class="rateone toppu">
                <div class="sekainoowari toppu bottomu lefuto">1st dimension</br><p class="mojishiro tyuuousoroe">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p></div>
                <div class="sekainoowari toppu bottomu lefuto">2nd dimension</br><p class="mojishiro tyuuousoroe">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p></div>
                <div class="sekainoowari toppu bottomu lefuto">3rd dimension</br><p class="mojishiro tyuuousoroe">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p></div>
            </div>
            <div class="footer toppu">
                <p class="lastword">copyright ebifurai55</p>
            </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="slicknav/jquery.slicknav.min.js"></script>
        <script src="slick/slick.min.js"></script>
        <script type="text/javascript">
$(function(){
    $("ul.menu li").hover(function(){
        $(">ul:not(:animated)",this).slideDown("fast");
    },

    function(){
        $(">ul",this).slideUp("fast");
    });
});
</script>
<script>
  $(function() {
    $('.slick').slick({
      autoplay: true,
      autoplaySpeed: 3000,
      infinite: true,
      arrows: true,
      dots: false,
      centerMode: true,
      slidesToShow:(1),


      centerPadding: '0px'
    });


  });
</script>
<script>
$(function(){
    $('#gnav').slicknav({

    prependTo: "#container", //指定した要素内にメニュー表示 デフォルトはbody
});
});
</script>

</script>
</body>
</html>

だんだん混乱してきたので上手くまとめいただける方いらっしゃいませんか?ながくなりそうなので、複数回に分けて綴ります。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • yoshinavi

    2018/05/28 21:59

    質問のタイトルと本文の内容が違うように思います。 CSSの外部ファイルを使う場合のパスの書き方なのでしょうか? それともメニュー部分の動作に関する問題なのでしょうか? また、メニューに該当する部分がいくつかあり、どこの部分になるのでしょうか? 他の方も書いていますが該当部分のみにマトメると、より良い回答を得れると思います。

    キャンセル

  • ebifurai55

    2018/05/29 21:18

    タイトルを変えました。

    キャンセル

  • 退会済みユーザー

    2018/05/29 22:10

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 6

+1

根本的にやり方を間違えていると思います。
各機能は小さく作ってできたら移植というような流れで組むべきだと思います。
「ニューっという感じでメニューが拡大縮小されません。」
というのはどの部分のことでしょうか?#menuですか?

それなら

        <!-- メニューのボタン実装 -->
        <ul class="menu">
            <li><a href="#">メニューA</a>
                <ul class="sub">
                    <li><a href="#">サブメニューA</a></li>
                    <li><a href="#">サブメニューA</a></li>
                    <li><a href="#">サブメニューA</a><!--
                        --><ul class="sub">
                            <li><a href="#">サブメニューA2</a></li>
                            <li><a href="#">サブメニューA2</a></li>
                            <li><a href="#">サブメニューA2</a></li>
                        </ul><!--
                    --></li>
                </ul>
            </li>

            <!-- サブメニューのコメントはブラウザ間の余白を取るためらしい -->
            <!-- サブメニューの中にサブメニューを作るとメニューを表示する -->

            <li><a href="#">メニューB</a>
                <ul class="sub">
                    <li><a href="#">サブメニューB</a></li>
                    <li><a href="#">サブメニューB</a>
                        <ul class="sub">
                            <li><a href="#">サブメニューB2</a></li>
                            <li><a href="#">サブメニューB2</a></li>
                            <li><a href="#">サブメニューB2</a>
                                <ul class="sub">
                                    <li><a href="#">サブメニューB3</a></li>
                                    <li><a href="#">サブメニューB3</a></li>
                                    <li><a href="#">サブメニューB3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">サブメニューB</a></li>
                </ul>
            </li>
            <li><a href="#">メニューC</a>
                <ul class="sub">
                    <!-- サブメニューBだったのでサブメニューCに変更 -->
                    <li><a href="#">サブメニューC</a>
                        <ul class="sub">
                            <li><a href="#">サブメニューC2</a></li>
                            <li><a href="#">サブメニューC2</a></li>
                            <li><a href="#">サブメニューC2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">サブメニューC</a></li>
                    <li><a href="#">サブメニューC</a></li>
                </ul>
            </li>
        </ul>


ここだけの提示でいいです。cssも該当の部分だけ提示してください。
「該当のファイルを書いても」とありますが書いたファイルで想定通り
動作する確認は取れているということでしょうか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/05/29 21:26

    そうです#menuのところです。ここが拡大縮小のアニメーションをして、拡大縮小してほしいのですが、どんなテクニックがあるでしょうか?メディアクエリを書いて、やろうにもレスポンシブがあまり理解できてないので、Webページを作る時、textのレスポンシブ対応はどうしてますでしょうか?対応してない、とかだったら対応してない。でもいいです。画像やメニューの配置がレスポンシブなのは見ますが、textはあまり見かけないのです。Webデザイナーによると思いますが。やっぱりアニメーションするとカッコイイサイトになると思います。

    キャンセル

  • 2018/05/29 21:27

    今思い出したのですが、#menuの所で、CSS書いてませんでしたね。メニューの部分の文字も変更したいです

    キャンセル

  • 2018/05/29 22:10

    どんなテクニックがあるでしょうか?って「当該のファイルを書いても」とあるのであなたはテクニックを理解しているのでは?
    そもそも理解していないのであれば「当該のファイルを書いても」「ニューっという感じでメニューが拡大縮小され」るはずもなく、まずはサンプルや書籍を漁るべき。
    ここは自分でしっかり理解したコードを書いて、かつ思った動きと違う場合にその理由を尋ねるべき場であってそこらのコードをコピーしたか何かで質問者もわからないコード内容を尋ねたり教えてもらう場ではないかと。

    キャンセル

  • 2018/05/31 23:21

    すいません

    キャンセル

check解決した方法

0

すいません、長くなったので、複数回に分けました。どうやったらレスポンシブになるでしょうか?

そもそもグニューっと曲がらず、スイッチするようなので、レスポンシブはいいんでしょうか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/05/28 21:24

    回答でないものを回答として書くのは、控えていただけませんか?

    長くなりすぎるのあれば、エッセンスだけ抽出した短いコードにまとめるとか、外部のコード共有サービスを使うとか。

    キャンセル

  • 2018/05/31 23:21

    すいません

    キャンセル

0

/*A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
*/
/* reset */
/*
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
*/
/* start editing from here */
/*a{text-decoration:none;}*/
/*.txt-rt{text-align:right;}*//* text align right */
/*.txt-lt{text-align:left;}*//* text align left */
/*.txt-center{text-align:center;}*//* text align center */
/*.float-rt{float:right;}*//* float right */
/*.float-lt{float:left;}*//* float left */
/*.clear{clear:both;}*//* clear float */
/*.pos-relative{position:relative;}*//* Position Relative */
/*.pos-absolute{position:absolute;}*//* Position Absolute */
/*.vertical-base{    vertical-align:baseline;}*//* vertical align baseline */
/*.vertical-top{    vertical-align:top;}*//* vertical align top */
/*.underline{    padding-bottom:5px;    border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add *//*5px bottom padding and a underline */
/*nav.vertical ul li{    display:block;}*//* vertical menu */
/*nav.horizontal ul li{    display: inline-block;}*//* horizontal menu */
/*img{max-width:100%;}*/
*/
/*--end reset--*/
html body{
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-family: arial;
    font-size: 12px;
    color: #ccc;
    background:#F2F2F2;
}


 .container {
    background-color : #5555aa;
    width : 100%;
    heigth: 200px;
}

.button {
    float :right;
    background-color: #1111aa;
}
.whitebox {
    /* margin-left:0 auto; */
    font-size:20px;
    margin: auto;
/*    margin-top:0px;*/
/*    padding-top:40px;*/
    width: 800px;
    height: 70px;
    list-style-type:none;
    background-color:#ffffff;
    border-radius: 1em;
}

.whitebox li {
    float:right;
    padding:20px;
    /*margin-left: 10px;
    margin-right: 10px;*/

}

.logono-sukima {
    padding:20px;
    float:left;
}

.sentece {
    background:url("../images/b1.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    min-height: 500px;
    padding:10px;
}

.main {
    float:left;
    width:100%;
    height:200px;
    color:white;
}

.toppu {
    margin-top:30px;
}

.bottomu {
    margin-bottom:30px;
}

.lefuto {
    margin-left:30px;
    }
.tyuuousoroe {
    margin-left:auto;
    margin-right:auto;
    }
.bubun{

    padding:40px;
    margin:0px;
    color:white;
    font-size:32px;
    text-decoration:bold;
}

.slick-prev{
    left:25px;
    z-index:999;
    color:#000;
    }
.slick-next{
    right:25px;
    color:black;
    }
/*
.slick-prev::before {
        position: relative;
        content: "\f060";
        font-family: FontAwesome;
        background: rgba(255,255,255,0.5);
        width: 10px;
        opacity: 1;

          }

.slick-next::before {
        position: relative;
        content: "\f061";
        font-family: FontAwesome;
        background: rgba(255,255,255,0.5);
        /*padding-right: 30px;*/
        /*opacity: 1;
        }

*/
/*        .slick_container {
    width:360px; /* 任意の値 */
   /* margin:0 auto; /* 任意の値 */
/*    position:relative;
}*/

/* .slick-prev, .slick-next { */
/*    width:60px; *//* 画像幅 */
/*    height:34px *//* 画像高さ */
/*}
.slick-prev:before, .slick-next:before {
    content:"";
}
button.slick-prev, button.slick-next {
    z-index:2;
}
.slick-prev{left:20px; *//* 任意の値 *//*}
.slick-next{right:20px; *//* 任意の値 *//*}

.slick-arrow{z-index:10;*//* 値は適当に *//*}*/

.mainarea {
/*    padding-left: 1%;*/
    width:100%;
    height:620px;
    margin-top:20px;
    border-top:1px solid rgba(0,0,0,0.3);

}

.leftarea {
    float:left;
    width:64%;
    height:600px;
    clear:both;
}
.posi {

}

.rightarea {
    float:left;
    width:33%;
    height:600px;
    border-left:1px solid rgba(0,0,0,0.3);
    padding-left:20px;
    padding-top:20px;
}
.mizuiro {
    position: relative;
    font-family:arial;
    font-size:38px;
    color:yellow;
    top: 300px;
    left: 200px;
    width:300px;
    height:200px;
    margin:20px auto;
    background-color:aqua;
    z-index:999;
    opacity:0.7;
    padding:20px;
    }
.cian {
    width:350px;
    height:500px;
    background-image:url("../images/ab1.jpg");
    }
.koe {
    font-family:arial;
    font-size:14px;
    color:black;
    }
.tekisuto {
    color:white;
    font-size:32px;
    text-decoration:bold;
    }
.learnmore {
    padding-top:15px;
    padding-left:20px;
    width:150px;
    height:30px;
    background-color:cyan;
    color:white;
    font-weight:bold;
    border:1px solid cyan;
    }
.hyakupa-sento-janai {
    margin-left:130px;
    }
.sakana {
    float:right;
    padding-right:20px;

}

.clearfix {
    clear:both;
    }

.hakonoarea {
    background-color:gray;
    width:130px;
    height:60px;
    text-align:center;
    margin-top:20px;
    padding-top:50%;
    color:white;
    font-weight:bold;
    }

.kurashian {
    padding-left: 1%;
    width: auto;
    height: 900px;
    /*background-color:#62f5f5; 水色。cyanとAquaは同じ */
    background-color:gray;
    max-width:970px;
    }
.tyuudann {
    width:400px;
    height:100px;
    }

.marginzennhoukou {
    margin:30px;
    }

.migidan {
    float:left
    }
.hidaridan {
    float:right;
    }
.thirdbackground {
    background-image:url("https://p.w3layouts.com/demos_new/template_demo/06-03-2018/boogie-demo_Free/19401194/web/images/cunt1.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;

    padding:40px;
    width:auto;
    height:200px;
    color:yellow;
    font-weight:bold;
    font-size:48px;
    }

.statewhite {
    color:white;
    }

.paddingcenter {
    padding-left:300px;

    }

.uminosachi {
    padding:40px;
    width:auto;
    height:300px;
    background-color:aqua;
    }
.kumorinochi {
    padding:40px;
    width:auto;
    height:300px;
    background-color:gray;
    }
.amenochi {
    padding:40px;
    height:350px;
    background-color:black;
    }
.formnoiro {
    font-size:20px;
    border:none;
    border-bottom:1px solid #fff;
    background-color:black;
    color:white;
    margin-bottom:20px;
    color:#999;
    }

.botann {
    position:relative;
    /* top:240px; */
    left:50%;
    padding-top:10px;
    padding-left:10px;
    width:150px;
    height:30px;
    background-color:cyan;
    color:white;
    font-weight:bold;
    border:1px solid cyan;
}
/*@media screen and(min-width:320px){*/

.slicknav_menu {
 display:none;/*PC時は非表示*/
}
@media screen and (max-width: 600px) {
 #gnav {
 display:none;/*モバイル時は非表示*/
}
 .slicknav_menu {
 display:block;/*モバイル時は表示*/}
}
.rateone {
    width:100%;
    height:270px;
    background-color:black;
    }
.sekainoowari {
    float:left;
    width:300px;
    height:200px;
    background-color:cyan;
    font-size:18px;
    color:yellow;
    opacity: 0.7;
    text-align:center;
    }
.mojishiro {
    color:white;
    text-align:center;
    }
.footer {
    width:100%;
    height:70px;
    background-color:black;
    }
.lastword {
    color:white;
    text-align:center;
    }

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

@media screen and (min-width: 970px) {

.amenochi{
    padding:0px;
    height:500px;
    }
.formnoiro {
    width:270px;
    }
.botann {
    left:60%;
    }
.amenochi{
    padding-top:10px;

    }
.mizuiro {
    left:200px;
    }
.tyuudann {
    width:400px;
}
.rateone {
    height:300px;
    }

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

@media screen and (max-width: 480px) {
.leftarea {
    float:none;
    width:auto;
    }
.mizuiro {
    position: static;
    font-family:arial;
    font-size:38px;
    color:yellow;
    top: auto;
    left: auto;
    width:237px;
    height:auto;
    margin-top:30px;
    margin-left: auto;
    background-color:aqua;
    z-index:999;
    opacity:0.7;
    clear:both;
    }
.konocssdake {
    margin-top:40px;
    clear:both;
    }
.botann {
    left:30%;
    }
.amenochi {
    padding-top:10px;
    }
.kurashian {
    height: auto;
    }
.migidan {
    float: none;
    }
.statewhite {
    font-size:12px;
    }
.thirdbackground {
    font-size:24px;
    }
.paddingcenter {
        padding-left: 50px;
        }
.formnoiro {
    font-size:20px;
    border:none;
    border-bottom:1px solid #fff;
    background-color:black;
    color:white;
    margin-bottom:20px;
    color:#999;
    }

.botann {
    position:relative;
    /* top:240px; */
    left:50%;
    padding-top:10px;
    padding-left:10px;
    width:150px;
    height:30px;
    background-color:cyan;
    color:white;
    font-weight:bold;
    border:1px solid cyan;

    }
.hyakupa-sento-janai {
    margin-left:5px;
    }
.tyuudann {
    width:auto;
    }
.cian {
    width:320px;
    }
.logono-sukima {
    float:none;
    }
.sekainoowari {
    float:none;
    }
.rateone {
    height:auto;
    }

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

@media screen and (min-width: 768px) {

.amenochi{
    padding:0px;
    height:500px;
    }
.formnoiro {
    width:270px;
    }
.botann {
    /*top:0%;*/
    /*left:80%;*/
    }
.amenochi{
    padding-top:10px;
    }
.kurashian {
    height:auto;
    }

.migidan {
    float: left;
    }
.tyuudann {
    height:auto;
}
.statewhite {
    font-size:24px;
}
.thirdbackground {
    font-size:48px;
    }
.paddingcenter {
    padding-left: 150px;
    }

.kinyuuwrap{
    height:330px;
    }
.kinyuu {
    color:white;
    float:left;
    }
.formnoiro {
    font-size:20px;
    border:none;
    border-bottom:1px solid #fff;
    background-color:black;
    color:white;
    margin-bottom:20px;
    color:#999;
    }

.botann {
    position:relative;
    /* top:240px; */
    left:60%;
    padding-top:10px;
    padding-left:10px;
    width:150px;
    height:30px;
    background-color:cyan;
    color:white;
    font-weight:bold;
    border:1px solid cyan;

    }

.hidaridan {
    float:right;
    }
.rateone {
    height:500px;
    }

}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • jQuery

    6162questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5153questions

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

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

    197questions

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