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

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

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

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

Bootstrap

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

Q&A

解決済

1回答

1769閲覧

marginを指定できない

tidavest

総合スコア595

CSS3

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

Bootstrap

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

0グッド

0クリップ

投稿2017/02/23 06:02

<!Doctype html> <head><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="style.css"></head> <body> <div class="wrapper"> <div class="header"> <H2>主の独り言</H> <img src="ninja.jpg"> <p id="RealtimeClockArea">※ここに時計(2桁固定版)が表示されます。</p> <script type="text/javascript"> function set2fig(num) { // 桁数が1桁だったら先頭に0を加えて2桁に調整する var ret; if( num < 10 ) { ret = "0" + num; } else { ret = num; } return ret; } function showClock2() { var nowTime = new Date(); var nowHour = set2fig( nowTime.getHours() ); var nowMin = set2fig( nowTime.getMinutes() ); var nowSec = set2fig( nowTime.getSeconds() ); var msg = "現在時刻は、" + nowHour + ":" + nowMin + ":" + nowSec + " です。"; document.getElementById("RealtimeClockArea").innerHTML = msg; } setInterval('showClock2()',1000); </script> </div> <div class="container-fluid"> <div class="row"> <div class="col-sm-2" style="background-color:red;">Red</div> <div class="col-sm-8" style="background-color:blue;">Blue</div> <div class="col-sm-2" style="background-color:yellow;">Yellow</div> </div> </div> </div> </div> </body> </html>

上記コードの下行の方に、<div class="container-fluid">
とbootstrapが始まっている箇所がございます。
このクラスにマージンを設定して上部に、余白を設定したいと思い、
.container-fluid {
margin-top:15px;
}

としましたが、変化がありませんでした。
どこが間違っているのか、指摘お願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

こちらの環境では質問者さんのHTMLを修正し、確認したところmargin-topはちゃんとかかっていましたが、いかがでしょうか?

HTML

1<!Doctype html> 2<html><!-- 追加 --> 3<head> 4 <meta charset="utf-8"><!-- 追加 --> 5 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 6 <title>タイトル</title><!-- 追加 --> 7 <style type="text/css"> 8 .container-fluid { 9 margin-top: 15px; 10 } 11 </style> 12</head> 13<body> 14<div class="wrapper"> 15 <div class="header"> 16 <h2>主の独り言</h2><!-- h2タグの対応ができていなかったので修正 --> 17 <img src="ninja.jpg"> 18 19 <p id="RealtimeClockArea">※ここに時計(2桁固定版)が表示されます。</p> 20 <script type="text/javascript"> 21 function set2fig(num) { 22 // 桁数が1桁だったら先頭に0を加えて2桁に調整する 23 var ret; 24 if (num < 10) { 25 ret = "0" + num; 26 } 27 else { 28 ret = num; 29 } 30 return ret; 31 } 32 function showClock2() { 33 var nowTime = new Date(); 34 var nowHour = set2fig(nowTime.getHours()); 35 var nowMin = set2fig(nowTime.getMinutes()); 36 var nowSec = set2fig(nowTime.getSeconds()); 37 var msg = "現在時刻は、" + nowHour + ":" + nowMin + ":" + nowSec + " です。"; 38 document.getElementById("RealtimeClockArea").innerHTML = msg; 39 } 40 setInterval('showClock2()', 1000); 41 </script> 42 </div> 43 <div class="container-fluid"> 44 <div class="row"> 45 <div class="col-xs-2" style="background-color:red;">Red</div><!-- col-sm-をcol-xs-に変更 --> 46 <div class="col-xs-8" style="background-color:blue;">Blue</div><!-- col-sm-をcol-xs-に変更 --> 47 <div class="col-xs-2" style="background-color:yellow;">Yellow</div><!-- col-sm-をcol-xs-に変更 --> 48 </div> 49 </div> 50</div> 51<!-- 不要なdivの閉じタグを削除 --> 52</body> 53</html>

投稿2017/02/23 06:12

s8_chu

総合スコア14731

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

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

tidavest

2017/02/23 06:51

ありがとうございます。出来ました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問