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

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

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

受付中

jQueryを使用したドロップダウンリストの要素のレスポンシブデザインが縦に並ばない

con2319
con2319

総合スコア50

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

1回答

0評価

1クリップ

176閲覧

投稿2022/05/28 08:12

<環境>
直接関係あるもの
bootstrap:bootstrap-grid.min.jsファイルのみでグリッドシステムのみ
jQuery:jquery-1.8.0.min.jsファイル使用
一応書いたもの(サーバーサイド)
django ver:3.2.5

<実現したい事>
ウィンドウが800px以上の時はヘッダーの要素を横に並べ、それ以下の時は縦に並べサイドバーに並べられ
右上にあるマークをクリックしたときに表示するというもの。

<現状>
レスポンシブデザインでウィンドウが800px以上の時はjQueryでcol-3クラスを追加して
グリッドシステムを反映させてるが、800px未満になるとcol-3クラスを削除して
サイドバーに縦並べにして表示・非表示は右上にあるマークで行おうとしているが
表示・非表示は問題ないが要素が横並びになってしまう。

<修正したい箇所>
サイバーにある項目を縦並びにしたい。

コード

html

{% load static %} <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="description" content="最新技術と自然との調和を目指す"> <meta name="viewport" content="width=device-width"> <link rel="shortcut icon" href="{% static 'img/favicon.iCo' %}" type="image/vnd.microsoft.icon"> <title>{% block title %}{% endblock %}</title> <link rel="stylesheet" href="{% static 'css/bootstrap-grid.min.css' %}"> <link rel="stylesheet" href="{% static 'css/base.css' %}"> <script src="{% static 'js/vendor/jquery-1.8.0.min.js' %}"></script> <!--<script src="{% static 'js/vendor/jquery-1.10.2.min.js' %}"></script> <script src="{% static 'js/vendor/jquery-ui-1.10.3.custom.min.js' %}"></script>--> <script src="{% static 'js/base.js' %}"></script> </head> <body id="top"> <header id="header"> <div id="headerWrap"> <h1><img src="{% static 'img/logoSundayfc.png' %}" height="80px" alt="logo"></h1> <nav id="mainnav"> <p id="menuWrap"><a id="menu"><span id="menuBtn"></span></a></p> <div class="panel"> <ul class="dropdwn row"> <li id="classList" class="col-3"> <a class="kari">TOP</a> <ul class="dropdwn_menu"> <li><a href="#">CLUB TOP PAGE</a></li> <li><a href="#">MOVIE</a></li> </ul> </li> <li id="classList" class="col-3"> <a class="kari">FOOTSAL・SCHOOL</a> <ul class="dropdwn_menu"> <li><a href="#">CLUB TOP PAGE</a></li> <li><a href="#">MOVIE</a></li> </ul> </li> <li id="classList" class="col-3"><a href="#">MATCH RESULT</a></li> <li id="classList" class="col-3"><a href="#">PHOTO GALLERY</a></li> </ul> </div> </nav> </div> </header> <!--<script> $(function() { $('.dropdwn_menu').onclick(function() { $('.dropdwn_menu').slideToggle(1000); }); }); </script>--> {% block contents %}{% endblock %} <footer id="footer"> Copyright(c) 2022 SUNDAY FC. All Rights Reserved. Design by CHACON<!-- ←クレジット表記を外す場合はシリアルキーが必要です http://f-tpl.com/credit/ --> </footer> </body> </html>

javascript

/*This code is js code for respnsive-sideber below.*/ var winW = $(window).width(), winH = $(window).height(), nav = $('#mainnav ul a'), curPos = $(this).scrollTop(); if (winW > 800){ var headerH =0; } else{ var headerH =70; } /*this code is not need , so it erase this code. $(nav).on('click', function(){ var $el = $(this), id = $el.attr('href'); $('html, body').animate({ scrollTop: $(id).offset().top - headerH }, 500); if (winW < 890){ $('#menuWrap').next().slideToggle(); $('#menuBtn').removeClass('close'); } return false; });*/ $('.panel').hide(); $('#menuWrap').toggle(function(){ $(this).next().slideToggle(); $('#menuBtn').toggleClass('close'); }, function(){ $(this).next().slideToggle(); $('#menuBtn').removeClass('close'); }); /*This code is js code for dropdown-list below.*/ $('.kari').on('click',function(event){ $(event.target).siblings().slideToggle(500); }); /*This code is js code for dropdown-list below.*/ $(window).on('load resize',function(){ if(800<=winW){ $('#classList').addClass('col-3'); }else{ $('#classList').removeClass('col-3'); } }); });

css

@charset "UTF-8"; @import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css); @import url(https://fonts.googleapis.com/css?family=Pacifico); /* reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;} ul{list-style:none;} table{border-collapse:collapse;border-spacing:0;} caption,th{text-align:left;} q:before,q:after{content:'';} object,embed{vertical-align:top;} legend{display:none;} h1,h2,h3,h4,h5,h6{font-size:100%;} img,abbr,acronym,fieldset{border:0;} body{ font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif; font-weight: 300; -webkit-text-size-adjust:100%; overflow-x: hidden; color: #000; background: #fff; } a{ color: #0066ff; text-decoration: none; } a:hover, .active{ text-decoration: underline; } a:active, a:focus,input:active, input:focus{outline:0;} /* ヘッダー ------------------------------------------------------------*/ #header{ text-align: center; } #header h1{ padding-top: 60px; } /* #mainnav li{ color: #000; }*/ #mainnav a{ color: #000; font-family: Impact; } #mainImg{ position: relative; overflow: hidden; width: 100%; height: 528px; } #mainImg img{ position: absolute; left: 50%; max-width: 1280px; width: 1280px; height: 528px; margin-left: -640px; } .dropdwn_menu{ display: none; } /* 共通 ------------------------------------------------------------*/ img{ max-width: 100%; height: auto; } section{ clear:both; padding-top: 70px; } section h2{ font-family: 'Pacifico', cursive; width: 60%; margin: 0 auto 40px; font-size: 22px; font-weight:normal; text-align: center; background: url(../img/borderBlack.png) repeat-x 0 50%; background-size: 1px 1px; } section h2 span { background: #fff; padding: 0 80px; } .inner{ width: 94%; margin: 0 auto; padding-bottom: 50px; } .innerS{ width: 60%; margin: 0 auto; padding-bottom: 80px; } /* RESPONSIVE 設定 ------------------------------------------------------------*/ /*1200px以上のスクリーン*/ @media only screen and (min-width: 1200px){ .inner{ width: 1024px; } } @media only screen and (min-width: 800px){ body{ font-size:14px; } a#menu{ display:none; } .panel{ display:block !important; } #mainnav li{ display: inline-block; padding: 100px 25px; font-size: 15px; } .dropdwn_menu li{ display:block; } /* SEC03 PROJECT -----------------*/ .col3{ text-align: center; } .col3 li{ display: inline-block; width: 28%; padding: 0 2.5% 50px; margin-bottom: 0; vertical-align: top; text-align: left; } #footer{ padding: 30px 10px 70px 0; } } /*480px以上のスクリーンの時適応*/ @media only screen and (min-width: 641px){ .col2 li{ width: 60%; vertical-align: top; } .col2 li:first-child{ width: 35%; padding-right: 4%; } } /*640px未満のスクリーンの時適応*/ @media only screen and (max-width: 640px){ .innerS{ width: 94%; padding-bottom: 70px; } .col3 li{ line-height: 1.7; } .col3 img{ margin: 0 auto; } .col3 .img{ padding: 30px; margin-bottom: 20px; } #gallery li{ float: none; width: 100%; } #map iframe{ width: 96% !important; left: 2%; } #sec04_02{ padding: 50px 20px; } } @media only screen and (max-width: 799px){ #header{ position: fixed; width: 100%; z-index: 500; } #headerWrap{ position: relative; width: 100%; height: 70px; background: #fff; border-bottom: 1px solid #ccc; } #header h1{ padding-top: 10px; } #header h1 img{ margin-top: 3px; max-height: 45px; width: auto !important; } a#menu{ display: inline-block; position: relative; width: 40px; height: 40px; margin: 10px; } #menuBtn{ display: block; position: absolute; top: 60%; left: 50%; width: 18px; height: 2px; margin: -1px 0 0 -7px; background: #000; transition: .2s; } #menuBtn:before, #menuBtn:after{ display: block; content: ""; position: absolute; top: 50%; left: 0; width: 18px; height: 2px; background: #000; transition: .3s; } #menuBtn:before{ margin-top: -7px; } #menuBtn:after{ margin-top: 5px; } a#menu .close{ background: transparent; } a#menu .close:before, a#menu .close:after{ margin-top: 0; } a#menu .close:before{ transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } a#menu .close:after{ transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } .panel{ width: 100%; display: none; overflow: hidden; position: relative; left: 0; top: 0; z-index: 100; } #mainnav{ position: absolute; top: 0; width: 100%; text-align: right; z-index:500; } #mainnav ul{ border-bottom: 1px solid #ccc; background: #fff; text-align: left; } #mainnav li a{ position: relative; display:block; padding:15px 25px; border-bottom: 1px solid #ccc; color: #000; font-weight: 400; } #mainnav li a:before{ display: block; content: ""; position: absolute; top: 50%; left: 5px; width: 6px; height: 6px; margin: -4px 0 0 0; border-top: solid 2px #000; border-right: solid 2px #000; -webkit-transform: rotate(45deg); transform: rotate(45deg); } #mainImg{ padding-top: 60px; z-index: -100; } .col3 li{ margin: 50px auto 0 auto; display: block; } section{ padding-top: 50px; } section h2{ margin: 0 auto 20px; } section h2 span { padding: 0 30px; } .dropdwn_menu li{ display: block; } }

以上です。わかる方いれば教えてください。
あと可能ならデザイン的に悪い所を修正して頂けると嬉しいです。
宜しくお願い致します。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。