Q&A
質問のタイトルと本文の内容が違うように思います。 CSSの外部ファイルを使う場合のパスの書き方なのでしょうか？ それともメニュー部分の動作に関する問題なのでしょうか？ また、メニューに該当する部分がいくつかあり、どこの部分になるのでしょうか？ 他の方も書いていますが該当部分のみにマトメると、より良い回答を得れると思います。
レスポンシブができません。
当該のファイルを書いても、ニューっという感じでメニューが拡大縮小
されません。普通にレスポンシブに対応するためにはどうしたらいいんでしょうか？
該当のサンプルページですが、この様にしたいんです。
http://www.webdesignleaves.com/samples/resposive/SlickNav/slicknav-02.html
http://www.webdesignleaves.com/samples/resposive/SlickNav/slicknav-03.html
でもよく見るとtextのサイズは一定で、あまり私のサイトと代わり映えのない感じが
してきました。textのサイズを可変する場合はメディアクエリで対応するしかないんでしょうか？拡大縮小のアニメーションして、サイズが変わってほしいです。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8" /> 5<title>javascript本格入門</title> 6 7<meta name="viewport" content="width=device-width,initial-scale=1"> 8<!-cssの実装--> 9<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 10<link rel="stylesheet" type="text/css" href="slick/slick.css"/> 11<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> 12<link rel="stylesheet" href="css/style.css"> 13<link rel="stylesheet" href="css/stylemin400.css"> 14<link rel="stylesheet" href="css/stylemin638.css"> 15<link rel="stylesheet" href="css/stylemax1000.css"> 16<link rel="stylesheet" type="text/css" href="slicknav/slicknav.css"/> 17 18 19 20 21</head> 22<body> 23 24 <!-- 標準距離の実装--> 25 <div class="container"> 26 logo 27 28 <ul class="button"> 29 Download 30 </ul> 31 <!-- メニューのボタン実装 --> 32 <ul class="menu"> 33 <li><a href="#">メニューA</a> 34 <ul class="sub"> 35 <li><a href="#">サブメニューA</a></li> 36 <li><a href="#">サブメニューA</a></li> 37 <li><a href="#">サブメニューA</a><!-- 38 --><ul class="sub"> 39 <li><a href="#">サブメニューA2</a></li> 40 <li><a href="#">サブメニューA2</a></li> 41 <li><a href="#">サブメニューA2</a></li> 42 </ul><!-- 43 --></li> 44 </ul> 45 </li> 46 47 <!-- サブメニューのコメントはブラウザ間の余白を取るためらしい --> 48 <!-- サブメニューの中にサブメニューを作るとメニューを表示する --> 49 50 <li><a href="#">メニューB</a> 51 <ul class="sub"> 52 <li><a href="#">サブメニューB</a></li> 53 <li><a href="#">サブメニューB</a> 54 <ul class="sub"> 55 <li><a href="#">サブメニューB2</a></li> 56 <li><a href="#">サブメニューB2</a></li> 57 <li><a href="#">サブメニューB2</a> 58 <ul class="sub"> 59 <li><a href="#">サブメニューB3</a></li> 60 <li><a href="#">サブメニューB3</a></li> 61 <li><a href="#">サブメニューB3</a></li> 62 </ul> 63 </li> 64 </ul> 65 </li> 66 <li><a href="#">サブメニューB</a></li> 67 </ul> 68 </li> 69 <li><a href="#">メニューC</a> 70 <ul class="sub"> 71 <!-- サブメニューBだったのでサブメニューCに変更 --> 72 <li><a href="#">サブメニューC</a> 73 <ul class="sub"> 74 <li><a href="#">サブメニューC2</a></li> 75 <li><a href="#">サブメニューC2</a></li> 76 <li><a href="#">サブメニューC2</a></li> 77 </ul> 78 </li> 79 <li><a href="#">サブメニューC</a></li> 80 <li><a href="#">サブメニューC</a></li> 81 </ul> 82 </li> 83 </ul> 84 85 86 </div> 87 88 <div id="container"> 89 <div class="sentece"> 90 91 <ul class="whitebox" id="gnav"> 92 93 <span class="logono-sukima">BOOGIE</span> 94 <li><a href="#">Contact</a></li> 95 <li><a href="#">Demo</a></li> 96 <li><a href="#">Events</a></li> 97 <li><a href="#">Album</a></li> 98 <li><a href="#">About</a></li> 99 <li><a href="#">Home</a></li> 100 </ul> 101 <div class="slick main toppu bottomu"> 102 103 <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> 104 <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> 105 <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> 106 <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> 107 </div> 108 109 110 111 </div> 112 </div> 113 114 <div class="mainarea"> 115 116 <div class="sakana"> 117 <div class="hakonoarea">1</div> 118 <div class="hakonoarea">2</div> 119 </div> 120 <div class="sakana"> 121 <div class="hakonoarea">3</div> 122 <div class="hakonoarea bottomu">4</div> 123 </div> 124 <div class="toppu cian"> 125 126 <div class="mizuiro"> 127 We wish a go 128 <div class="koe"> 129Lorem ipsum dolor sit amet, 130consectetuer adipiscing elit. 131Aenean commodo ligula eget 132 dolor. Aenean massa 133 </div> 134 </div> 135 </div> 136 </div> 137 <div class="kurashian tyuuousoroe"> 138 <div class="tyuudann marginzennhoukou migidan toppu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</div> 139 <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> 140 <div class="clearfix"></div> 141 <div class="tyuudann marginzennhoukou hidaridan toppu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</div> 142 <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> 143 <div class="clearfix"></div> 144 <div class="tyuudann marginzennhoukou migidan toppu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</div> 145 <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> 146 <div class="clearfix"></div> 147 <div class="tyuudann marginzennhoukou hidaridan toppu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</div> 148 <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> 149 <div class="clearfix"></div> 150 151 152 153 </div> 154 <div class="thirdbackground paddingcenter"> 155 <span class="statewhite">New Album Release</span></br> 156 COMING SOON 157 </div> 158 <div class="uminosachi tyuuousoroe"></div> 159 <div class="kumorinochi tyuuousoroe"></div> 160 <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> 161 <div class="amenochi tyuuousoroe"> 162 <form action="/my-handling-form-page" method="post"> 163 <div class="kinyuuwrap"> 164 <div class="kinyuu lefuto"> 165 <input type="text" class="formnoiro" id="name" name="user_name" value="Name"> 166 </div> 167 <div class="kinyuu lefuto"> 168 <input type="text" class="formnoiro" id="last name" name="user_name" value="Last Name"> 169 </div> 170 <div class="clearfix"></div> 171 <div class="kinyuu lefuto"> 172 <input type="text" class="formnoiro" id="email" name="user_name" value="Email"> 173 </div> 174 <div class="kinyuu lefuto"> 175 <input type="text" class="formnoiro" id="phone" name="user_name" value="Phone"> 176 </div> 177 <div class="clearfix"></div> 178 <div class="kinyuu lefuto"> 179 <textarea class="formnoiro" id="message" name="message" placeholder="Message" rows="10" cols="50"></textarea> 180 </div> 181 </div> 182 <div class="clearfix"></div> 183 <input class="botann" type="submit" value="Send"> 184 185 </form> 186 </div> 187 <div class="rateone toppu"> 188 <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> 189 <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> 190 <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> 191 </div> 192 <div class="footer toppu"> 193 <p class="lastword">copyright ebifurai55</p> 194 </div> 195 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 196 <script src="slicknav/jquery.slicknav.min.js"></script> 197 <script src="slick/slick.min.js"></script> 198 <script type="text/javascript"> 199$(function(){ 200 $("ul.menu li").hover(function(){ 201 $(">ul:not(:animated)",this).slideDown("fast"); 202 }, 203 204 function(){ 205 $(">ul",this).slideUp("fast"); 206 }); 207}); 208</script> 209<script> 210 $(function() { 211 $('.slick').slick({ 212 autoplay: true, 213 autoplaySpeed: 3000, 214 infinite: true, 215 arrows: true, 216 dots: false, 217 centerMode: true, 218 slidesToShow:(1), 219 220 221 centerPadding: '0px' 222 }); 223 224 225 }); 226</script> 227<script> 228$(function(){ 229 $('#gnav').slicknav({ 230 231 prependTo: "#container", //指定した要素内にメニュー表示 デフォルトはbody 232}); 233}); 234</script> 235 236</script> 237</body> 238</html>
だんだん混乱してきたので上手くまとめいただける方いらっしゃいませんか？ながくなりそうなので、複数回に分けて綴ります。
回答6件
0
根本的にやり方を間違えていると思います。
各機能は小さく作ってできたら移植というような流れで組むべきだと思います。
「ニューっという感じでメニューが拡大縮小されません。」
というのはどの部分のことでしょうか？#menuですか？
それなら
html
1 <!-- メニューのボタン実装 --> 2 <ul class="menu"> 3 <li><a href="#">メニューA</a> 4 <ul class="sub"> 5 <li><a href="#">サブメニューA</a></li> 6 <li><a href="#">サブメニューA</a></li> 7 <li><a href="#">サブメニューA</a><!-- 8 --><ul class="sub"> 9 <li><a href="#">サブメニューA2</a></li> 10 <li><a href="#">サブメニューA2</a></li> 11 <li><a href="#">サブメニューA2</a></li> 12 </ul><!-- 13 --></li> 14 </ul> 15 </li> 16 17 <!-- サブメニューのコメントはブラウザ間の余白を取るためらしい --> 18 <!-- サブメニューの中にサブメニューを作るとメニューを表示する --> 19 20 <li><a href="#">メニューB</a> 21 <ul class="sub"> 22 <li><a href="#">サブメニューB</a></li> 23 <li><a href="#">サブメニューB</a> 24 <ul class="sub"> 25 <li><a href="#">サブメニューB2</a></li> 26 <li><a href="#">サブメニューB2</a></li> 27 <li><a href="#">サブメニューB2</a> 28 <ul class="sub"> 29 <li><a href="#">サブメニューB3</a></li> 30 <li><a href="#">サブメニューB3</a></li> 31 <li><a href="#">サブメニューB3</a></li> 32 </ul> 33 </li> 34 </ul> 35 </li> 36 <li><a href="#">サブメニューB</a></li> 37 </ul> 38 </li> 39 <li><a href="#">メニューC</a> 40 <ul class="sub"> 41 <!-- サブメニューBだったのでサブメニューCに変更 --> 42 <li><a href="#">サブメニューC</a> 43 <ul class="sub"> 44 <li><a href="#">サブメニューC2</a></li> 45 <li><a href="#">サブメニューC2</a></li> 46 <li><a href="#">サブメニューC2</a></li> 47 </ul> 48 </li> 49 <li><a href="#">サブメニューC</a></li> 50 <li><a href="#">サブメニューC</a></li> 51 </ul> 52 </li> 53 </ul> 54
ここだけの提示でいいです。cssも該当の部分だけ提示してください。
「該当のファイルを書いても」とありますが書いたファイルで想定通り
動作する確認は取れているということでしょうか？
投稿2018/05/28 13:18
総合スコア3830
そうです#menuのところです。ここが拡大縮小のアニメーションをして、拡大縮小してほしいのですが、どんなテクニックがあるでしょうか？メディアクエリを書いて、やろうにもレスポンシブがあまり理解できてないので、Webページを作る時、textのレスポンシブ対応はどうしてますでしょうか？対応してない、とかだったら対応してない。でもいいです。画像やメニューの配置がレスポンシブなのは見ますが、textはあまり見かけないのです。Webデザイナーによると思いますが。やっぱりアニメーションするとカッコイイサイトになると思います。
今思い出したのですが、#menuの所で、CSS書いてませんでしたね。メニューの部分の文字も変更したいです
どんなテクニックがあるでしょうか？って「当該のファイルを書いても」とあるのであなたはテクニックを理解しているのでは？
そもそも理解していないのであれば「当該のファイルを書いても」「ニューっという感じでメニューが拡大縮小され」るはずもなく、まずはサンプルや書籍を漁るべき。
ここは自分でしっかり理解したコードを書いて、かつ思った動きと違う場合にその理由を尋ねるべき場であってそこらのコードをコピーしたか何かで質問者もわからないコード内容を尋ねたり教えてもらう場ではないかと。
すいません
0
自己解決
すいません、長くなったので、複数回に分けました。どうやったらレスポンシブになるでしょうか？
そもそもグニューっと曲がらず、スイッチするようなので、レスポンシブはいいんでしょうか？
投稿2018/05/28 12:15
総合スコア35
回答でないものを回答として書くのは、控えていただけませんか？
長くなりすぎるのあれば、エッセンスだけ抽出した短いコードにまとめるとか、外部のコード共有サービスを使うとか。
すいません
0
style638
1@media screen and (min-width: 768px) { 2 3.amenochi{ 4 padding:0px; 5 height:500px; 6 } 7.formnoiro { 8 width:270px; 9 } 10.botann { 11 /*top:0%;*/ 12 /*left:80%;*/ 13 } 14.amenochi{ 15 padding-top:10px; 16 } 17.kurashian { 18 height:auto; 19 } 20 21.migidan { 22 float: left; 23 } 24.tyuudann { 25 height:auto; 26} 27.statewhite { 28 font-size:24px; 29} 30.thirdbackground { 31 font-size:48px; 32 } 33.paddingcenter { 34 padding-left: 150px; 35 } 36 37.kinyuuwrap{ 38 height:330px; 39 } 40.kinyuu { 41 color:white; 42 float:left; 43 } 44.formnoiro { 45 font-size:20px; 46 border:none; 47 border-bottom:1px solid #fff; 48 background-color:black; 49 color:white; 50 margin-bottom:20px; 51 color:#999; 52 } 53 54.botann { 55 position:relative; 56 /* top:240px; */ 57 left:60%; 58 padding-top:10px; 59 padding-left:10px; 60 width:150px; 61 height:30px; 62 background-color:cyan; 63 color:white; 64 font-weight:bold; 65 border:1px solid cyan; 66 67 } 68 69.hidaridan { 70 float:right; 71 } 72.rateone { 73 height:500px; 74 } 75 76} 77
投稿2018/05/28 12:14
総合スコア35
0
style400
1@media screen and (max-width: 480px) { 2.leftarea { 3 float:none; 4 width:auto; 5 } 6.mizuiro { 7 position: static; 8 font-family:arial; 9 font-size:38px; 10 color:yellow; 11 top: auto; 12 left: auto; 13 width:237px; 14 height:auto; 15 margin-top:30px; 16 margin-left: auto; 17 background-color:aqua; 18 z-index:999; 19 opacity:0.7; 20 clear:both; 21 } 22.konocssdake { 23 margin-top:40px; 24 clear:both; 25 } 26.botann { 27 left:30%; 28 } 29.amenochi { 30 padding-top:10px; 31 } 32.kurashian { 33 height: auto; 34 } 35.migidan { 36 float: none; 37 } 38.statewhite { 39 font-size:12px; 40 } 41.thirdbackground { 42 font-size:24px; 43 } 44.paddingcenter { 45 padding-left: 50px; 46 } 47.formnoiro { 48 font-size:20px; 49 border:none; 50 border-bottom:1px solid #fff; 51 background-color:black; 52 color:white; 53 margin-bottom:20px; 54 color:#999; 55 } 56 57.botann { 58 position:relative; 59 /* top:240px; */ 60 left:50%; 61 padding-top:10px; 62 padding-left:10px; 63 width:150px; 64 height:30px; 65 background-color:cyan; 66 color:white; 67 font-weight:bold; 68 border:1px solid cyan; 69 70 } 71.hyakupa-sento-janai { 72 margin-left:5px; 73 } 74.tyuudann { 75 width:auto; 76 } 77.cian { 78 width:320px; 79 } 80.logono-sukima { 81 float:none; 82 } 83.sekainoowari { 84 float:none; 85 } 86.rateone { 87 height:auto; 88 } 89
投稿2018/05/28 12:13
総合スコア35
0
style1000
1@media screen and (min-width: 970px) { 2 3.amenochi{ 4 padding:0px; 5 height:500px; 6 } 7.formnoiro { 8 width:270px; 9 } 10.botann { 11 left:60%; 12 } 13.amenochi{ 14 padding-top:10px; 15 16 } 17.mizuiro { 18 left:200px; 19 } 20.tyuudann { 21 width:400px; 22} 23.rateone { 24 height:300px; 25 } 26 27
投稿2018/05/28 12:13
総合スコア35
0
style
1/*A Design by W3layouts 2Author: W3layout 3Author URL: http://w3layouts.com 4License: Creative Commons Attribution 3.0 Unported 5License URL: http://creativecommons.org/licenses/by/3.0/ 6*/ 7/* reset */ 8/* 9html,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;} 10article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;} 11ol,ul{list-style:none;margin:0px;padding:0px;} 12blockquote,q{quotes:none;} 13blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;} 14table{border-collapse:collapse;border-spacing:0;} 15*/ 16/* start editing from here */ 17/*a{text-decoration:none;}*/ 18/*.txt-rt{text-align:right;}*//* text align right */ 19/*.txt-lt{text-align:left;}*//* text align left */ 20/*.txt-center{text-align:center;}*//* text align center */ 21/*.float-rt{float:right;}*//* float right */ 22/*.float-lt{float:left;}*//* float left */ 23/*.clear{clear:both;}*//* clear float */ 24/*.pos-relative{position:relative;}*//* Position Relative */ 25/*.pos-absolute{position:absolute;}*//* Position Absolute */ 26/*.vertical-base{ vertical-align:baseline;}*//* vertical align baseline */ 27/*.vertical-top{ vertical-align:top;}*//* vertical align top */ 28/*.underline{ padding-bottom:5px; border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add *//*5px bottom padding and a underline */ 29/*nav.vertical ul li{ display:block;}*//* vertical menu */ 30/*nav.horizontal ul li{ display: inline-block;}*//* horizontal menu */ 31/*img{max-width:100%;}*/ 32*/ 33/*--end reset--*/ 34html body{ 35 width: 100%; 36 height: 100%; 37 padding: 0px; 38 margin: 0px; 39 overflow: hidden; 40 font-family: arial; 41 font-size: 12px; 42 color: #ccc; 43 background:#F2F2F2; 44} 45 46 47 .container { 48 background-color : #5555aa; 49 width : 100%; 50 heigth: 200px; 51} 52 53.button { 54 float :right; 55 background-color: #1111aa; 56} 57.whitebox { 58 /* margin-left:0 auto; */ 59 font-size:20px; 60 margin: auto; 61/* margin-top:0px;*/ 62/* padding-top:40px;*/ 63 width: 800px; 64 height: 70px; 65 list-style-type:none; 66 background-color:#ffffff; 67 border-radius: 1em; 68} 69 70.whitebox li { 71 float:right; 72 padding:20px; 73 /*margin-left: 10px; 74 margin-right: 10px;*/ 75 76} 77 78.logono-sukima { 79 padding:20px; 80 float:left; 81} 82 83.sentece { 84 background:url("../images/b1.jpg"); 85 background-repeat: no-repeat; 86 background-attachment: fixed; 87 background-position: center; 88 background-size: cover; 89 min-height: 500px; 90 padding:10px; 91} 92 93.main { 94 float:left; 95 width:100%; 96 height:200px; 97 color:white; 98} 99 100.toppu { 101 margin-top:30px; 102} 103 104.bottomu { 105 margin-bottom:30px; 106} 107 108.lefuto { 109 margin-left:30px; 110 } 111.tyuuousoroe { 112 margin-left:auto; 113 margin-right:auto; 114 } 115.bubun{ 116 117 padding:40px; 118 margin:0px; 119 color:white; 120 font-size:32px; 121 text-decoration:bold; 122} 123 124.slick-prev{ 125 left:25px; 126 z-index:999; 127 color:#000; 128 } 129.slick-next{ 130 right:25px; 131 color:black; 132 } 133/* 134.slick-prev::before { 135 position: relative; 136 content: "\f060"; 137 font-family: FontAwesome; 138 background: rgba(255,255,255,0.5); 139 width: 10px; 140 opacity: 1; 141 142 } 143 144.slick-next::before { 145 position: relative; 146 content: "\f061"; 147 font-family: FontAwesome; 148 background: rgba(255,255,255,0.5); 149 /*padding-right: 30px;*/ 150 /*opacity: 1; 151 } 152 153*/ 154/* .slick_container { 155 width:360px; /* 任意の値 */ 156 /* margin:0 auto; /* 任意の値 */ 157/* position:relative; 158}*/ 159 160/* .slick-prev, .slick-next { */ 161/* width:60px; *//* 画像幅 */ 162/* height:34px *//* 画像高さ */ 163/*} 164.slick-prev:before, .slick-next:before { 165 content:""; 166} 167button.slick-prev, button.slick-next { 168 z-index:2; 169} 170.slick-prev{left:20px; *//* 任意の値 *//*} 171.slick-next{right:20px; *//* 任意の値 *//*} 172 173.slick-arrow{z-index:10;*//* 値は適当に *//*}*/ 174 175.mainarea { 176/* padding-left: 1%;*/ 177 width:100%; 178 height:620px; 179 margin-top:20px; 180 border-top:1px solid rgba(0,0,0,0.3); 181 182} 183 184.leftarea { 185 float:left; 186 width:64%; 187 height:600px; 188 clear:both; 189} 190.posi { 191 192} 193 194.rightarea { 195 float:left; 196 width:33%; 197 height:600px; 198 border-left:1px solid rgba(0,0,0,0.3); 199 padding-left:20px; 200 padding-top:20px; 201} 202.mizuiro { 203 position: relative; 204 font-family:arial; 205 font-size:38px; 206 color:yellow; 207 top: 300px; 208 left: 200px; 209 width:300px; 210 height:200px; 211 margin:20px auto; 212 background-color:aqua; 213 z-index:999; 214 opacity:0.7; 215 padding:20px; 216 } 217.cian { 218 width:350px; 219 height:500px; 220 background-image:url("../images/ab1.jpg"); 221 } 222.koe { 223 font-family:arial; 224 font-size:14px; 225 color:black; 226 } 227.tekisuto { 228 color:white; 229 font-size:32px; 230 text-decoration:bold; 231 } 232.learnmore { 233 padding-top:15px; 234 padding-left:20px; 235 width:150px; 236 height:30px; 237 background-color:cyan; 238 color:white; 239 font-weight:bold; 240 border:1px solid cyan; 241 } 242.hyakupa-sento-janai { 243 margin-left:130px; 244 } 245.sakana { 246 float:right; 247 padding-right:20px; 248 249} 250 251.clearfix { 252 clear:both; 253 } 254 255.hakonoarea { 256 background-color:gray; 257 width:130px; 258 height:60px; 259 text-align:center; 260 margin-top:20px; 261 padding-top:50%; 262 color:white; 263 font-weight:bold; 264 } 265 266.kurashian { 267 padding-left: 1%; 268 width: auto; 269 height: 900px; 270 /*background-color:#62f5f5; 水色。cyanとAquaは同じ */ 271 background-color:gray; 272 max-width:970px; 273 } 274.tyuudann { 275 width:400px; 276 height:100px; 277 } 278 279.marginzennhoukou { 280 margin:30px; 281 } 282 283.migidan { 284 float:left 285 } 286.hidaridan { 287 float:right; 288 } 289.thirdbackground { 290 background-image:url("https://p.w3layouts.com/demos_new/template_demo/06-03-2018/boogie-demo_Free/19401194/web/images/cunt1.jpg"); 291 background-repeat: no-repeat; 292 background-attachment: fixed; 293 background-position: center; 294 background-size: cover; 295 296 padding:40px; 297 width:auto; 298 height:200px; 299 color:yellow; 300 font-weight:bold; 301 font-size:48px; 302 } 303 304.statewhite { 305 color:white; 306 } 307 308.paddingcenter { 309 padding-left:300px; 310 311 } 312 313.uminosachi { 314 padding:40px; 315 width:auto; 316 height:300px; 317 background-color:aqua; 318 } 319.kumorinochi { 320 padding:40px; 321 width:auto; 322 height:300px; 323 background-color:gray; 324 } 325.amenochi { 326 padding:40px; 327 height:350px; 328 background-color:black; 329 } 330.formnoiro { 331 font-size:20px; 332 border:none; 333 border-bottom:1px solid #fff; 334 background-color:black; 335 color:white; 336 margin-bottom:20px; 337 color:#999; 338 } 339 340.botann { 341 position:relative; 342 /* top:240px; */ 343 left:50%; 344 padding-top:10px; 345 padding-left:10px; 346 width:150px; 347 height:30px; 348 background-color:cyan; 349 color:white; 350 font-weight:bold; 351 border:1px solid cyan; 352} 353/*@media screen and(min-width:320px){*/ 354 355.slicknav_menu { 356 display:none;/*PC時は非表示*/ 357} 358@media screen and (max-width: 600px) { 359 #gnav { 360 display:none;/*モバイル時は非表示*/ 361} 362 .slicknav_menu { 363 display:block;/*モバイル時は表示*/} 364} 365.rateone { 366 width:100%; 367 height:270px; 368 background-color:black; 369 } 370.sekainoowari { 371 float:left; 372 width:300px; 373 height:200px; 374 background-color:cyan; 375 font-size:18px; 376 color:yellow; 377 opacity: 0.7; 378 text-align:center; 379 } 380.mojishiro { 381 color:white; 382 text-align:center; 383 } 384.footer { 385 width:100%; 386 height:70px; 387 background-color:black; 388 } 389.lastword { 390 color:white; 391 text-align:center; 392 } 393
投稿2018/05/28 12:12
総合スコア35
あなたの回答
tips
プレビュー
