html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>CARRYHP</title> 6 <link rel="stylesheet" type="text/css" href="home.scss"> 7 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 9</head> 10<body> 11 12 <div id="fb-root"></div> 13 <script>(function(d, s, id) { 14 var js, fjs = d.getElementsByTagName(s)[0]; 15 if (d.getElementById(id)) return; 16 js = d.createElement(s); js.id = id; 17 js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.5"; 18 fjs.parentNode.insertBefore(js, fjs); 19 }(document, 'script', 'facebook-jssdk'));</script> 20 21 22 23 <div class="container"> 24 25 <div class="top-wrapper"> 26 27 28 29 30 <div class="sidebar bar"> 31 <div class="fb-page" data-href="https://www.?.com/carry.dreamers/" data-tabs="timeline" data-width="300" data-height="600" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/carry.dreamers/"><a href="https://www.facebook.com/carry.dreamers/">CARRY〜dreamers〜</a></blockquote></div></div> 32 33 34 35 36 37 38 39 40 </div><!-- sidebar --> 41 42 43 <div class="rightbar bar"> 44 45 46 <div class="layer"> 47 <nav> 48 49 <div> 50 <a class="dream" href="#smoothplay1"><i class="fa fa-modx fa-3x"></i>>ABOUT</a> 51 <p class="neat">夢を叶えたい。</br>そんな思いを語ります。</p> 52 </div> 53 54 <div> 55 <a href="#smoothplay2">>MEMBER</a> 56 <p>これはテキストのテストです。このここがJSによって変更されます。</p> 57 </div> 58 59 <div> 60 <a href="">>DREAM</a> 61 <p>ここを文字化けのようにしていきます。</p> 62 </div> 63 64 <div> 65 <a href="">>CONTACT</a> 66 <p>ここの問題を解決しなければなりません。</p> 67 </div> 68 69 </nav> 70 71 72 73 <div class="contents"> 74 75 <span>D</span>ream never 76 77 78 </div> 79 80 81 </div><!-- layer --> 82 83 84 </div><!-- right-bar --> 85 </div><!-- top-wrapper --> 86 </div><!-- container -->
css
1*{ 2 border:0; 3 margin:0; 4} 5 6.container{ 7 background-color: #333333; 8 border-sizing:border-box; 9 height:600px; 10 width: 100%; 11} 12 13.top-wrapper{ 14 background-color: #ffc; 15 border:1px solid; 16 border-sizing:border-box; 17 margin: 0 auto; 18 height:600px; 19 width:1100px; 20} 21 22.bar{ 23 float:left; 24} 25.bar:after{ 26 content:""; 27 clear:both; 28} 29 30.sidebar{ 31 background-color: #fff; 32 box-sizing: border-box; 33 border-right:1px solid; 34 height:600px; 35 width:300px; 36} 37 38nav{ 39 padding-top: 40px; 40 padding-left: 40px; 41 text-align: left; 42} 43nav a{ 44 background-color: none; 45 color:#c9c05c; 46 letter-spacing: 3px; 47 text-decoration: none; 48 font-weight: bold; 49 font-family: "sans-serif"; 50 font-size: 15px; 51} 52nav a:hover{ 53 color:#fff; 54 text-decoration: underline; 55 transition:1s; 56} 57 58nav p{ 59 color:#357327; 60 display: none; 61 font-weight: bold; 62 font-size: 15px; 63 padding-left: 20px; 64} 65 66nav div{ 67 padding-bottom: 50px; 68} 69.neat{ 70 color:#fff; 71} 72 73.rightbar{ 74 background-color: black; 75 background-image: image-url("toppic.png"); 76 background-size: 100% 100%; 77 height:600px; 78 width:800px; 79} 80 81.layer{ 82 background-color: rgba(255,255,255,0.1); 83 height:600px; 84 position: relative; 85} 86.contents{ 87 color: #fff; 88 font-size: 40px; 89 font-family: sans-serif; 90 position: absolute; 91 text-align: center; 92 text-shadow:5px 5px 1px #999999; 93 left:250px; 94 top:235px; 95} 96
cssが交差してしまって申し訳ないです!
今回box-sizingを使おうとしたのですがどうしてもはみでてしまいます。
*に指定してもだめでした。なぜでしょうか?
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。