レスポンシブCSSでテキストをアニメーションしながら拡大縮小する方法
- 評価
- クリップ 0
- VIEW 312
レスポンシブができません。
当該のファイルを書いても、ニューっという感じでメニューが拡大縮小
されません。普通にレスポンシブに対応するためにはどうしたらいいんでしょうか?
該当のサンプルページですが、この様にしたいんです。
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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+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も該当の部分だけ提示してください。
「該当のファイルを書いても」とありますが書いたファイルで想定通り
動作する確認は取れているということでしょうか?
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
check解決した方法
0
すいません、長くなったので、複数回に分けました。どうやったらレスポンシブになるでしょうか?
そもそもグニューっと曲がらず、スイッチするようなので、レスポンシブはいいんでしょうか?
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
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;
}
}
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
質問への追記・修正、ベストアンサー選択の依頼
yoshinavi
2018/05/28 21:59
質問のタイトルと本文の内容が違うように思います。 CSSの外部ファイルを使う場合のパスの書き方なのでしょうか? それともメニュー部分の動作に関する問題なのでしょうか? また、メニューに該当する部分がいくつかあり、どこの部分になるのでしょうか? 他の方も書いていますが該当部分のみにマトメると、より良い回答を得れると思います。
ebifurai55
2018/05/29 21:18
タイトルを変えました。
2018/05/29 22:10
複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。