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

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

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

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

HTML5

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

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Q&A

2回答

2301閲覧

border-sizingがよく使えません。

zeben

総合スコア67

CSS3

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

HTML5

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

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

0グッド

0クリップ

投稿2016/02/08 14:53

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を使おうとしたのですがどうしてもはみでてしまいます。
*に指定してもだめでした。なぜでしょうか?

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

CSS設定ミスがあります。

border-sizing:border-box;

box-sizing:border-box

上の記述箇所を全て下の記述に修正してください。
ちなみに、この質問のタイトル部分も間違いなので、「box-sizingが使えません」に修正した方が良いです。

投稿2016/02/08 16:07

編集2016/02/08 16:10
yamato_hikawa

総合スコア2092

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

box-sizing: border-box;
はスマートフォンのコーディング時によく用います。
パディングとボーダーを幅と高さに含めて計算します。
width:200px;
padding:0 10px;
border:1px solid #ccc;

box-sizing: border-box;
を指定しないと合計で222pxとなりますが、
box-sizing: border-box;
を指定した場合は要素の合計幅は200pxのままです。

投稿2016/03/20 17:46

921138

総合スコア59

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問