質問編集履歴

1 textアニメーションのサンプルページ

ebifurai55

ebifurai55 score 15

2018/05/29 21:17  投稿

レスポンシブができません。
当該のファイルを書いても、ニューっという感じでメニューが拡大縮小
されません。普通にレスポンシブに対応するためにはどうしたらいいんでしょうか?
 
該当のサンプルページですが、この様にしたいんです。  
 
http://www.webdesignleaves.com/samples/resposive/SlickNav/slicknav-02.html  
http://www.webdesignleaves.com/samples/resposive/SlickNav/slicknav-03.html  
 
でもよく見るとtextのサイズは一定で、あまり私のサイトと代わり映えのない感じが  
してきました。textのサイズを可変する場合はメディアクエリで対応するしかないんでしょうか?拡大縮小のアニメーションして、サイズが変わってほしいです。  
```HTML
<!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>
```
だんだん混乱してきたので上手くまとめいただける方いらっしゃいませんか?ながくなりそうなので、複数回に分けて綴ります。
  • CSS

    8967 questions

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

  • jQuery

    9163 questions

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

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

    289 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る