\r\n \r\n \r\n \r\n\r\nコード\r\n```初心者です、Bootstrapのcssの上書きをしたいのですがどうすればいいでしょうか？「書く為のテーマの右側」にmargin-right:100pxとしたくて調べて色々試したのですが変化がないです。cssは色々変えて上手くいかなかったので消しました。\r\n\r\n\r\n\r\n\r\n![イメージ説明](fd95d4a6272db938f8b25087a1834a70.png)\r\n\r\n![イメージ説明](d71d99c4f3c9dc498ff5c5142bd9b0ea.png)","answerCount":2,"upvoteCount":0,"datePublished":"2019-08-21T10:15:20.928Z","dateModified":"2022-01-12T10:55:45.698Z","suggestedAnswer":[{"@type":"Answer","text":"**動くサンプル：**[https://jsfiddle.net/v2bp7qjh/](https://jsfiddle.net/v2bp7qjh/)\r\n\r\n---\r\n\r\n既に出ている回答で状態が反映されるため、stylesheet.css に書いて反映されないとすれば、下記のようなことを確認してください。\r\n0. デベロッパーツールでCSSファイルが読み込まれているか（コンソールにエラーが出ていないか）確認する[https://eng-entrance.com/javascript-display-error](https://eng-entrance.com/javascript-display-error)\r\n0. CSSの記述に問題がある場合それ以降が適用されなくなることが有るので、提示されたコードのみを書いて保存する\r\n0. 読み込まれたファイルと別のファイルを編集している可能性のチェック（たまにあります）\r\n0. キャッシュの消去\r\n\r\n【Webブラウザのキャッシュ削除と、スーパーリロード方法一覧 | uzurea.net】\r\n[http://uzurea.net/cacheclear-and-superreload-2018/](http://uzurea.net/cacheclear-and-superreload-2018/)","dateModified":"2019-08-21T14:02:15.705Z","datePublished":"2019-08-21T14:02:15.705Z","upvoteCount":0,"url":"https://teratail.com/questions/207383#reply-306271","comment":[{"@type":"Comment","text":"回答ありがとうございます、画面のサイズを変えてない最初の状態ではmarginを効かせて表示する事はできないのでしょうか？","datePublished":"2019-08-21T14:08:54.154Z","dateModified":"2019-08-21T14:08:54.154Z"},{"@type":"Comment","text":"https://jsfiddle.net/v2bp7qjh/show/\r\n効いていますよ。","datePublished":"2019-08-21T14:19:37.211Z","dateModified":"2019-08-21T14:19:37.211Z"}]},{"@type":"Answer","text":"``の直前に\r\n```CSS\r\n.text-secondary {\r\n margin-right: 100px\r\n}\r\n```\r\n又は\r\n```CSS\r\n.d-flex .header-left {\r\n margin-right: 100px;\r\n}\r\n```","dateModified":"2019-08-21T12:04:51.976Z","datePublished":"2019-08-21T11:54:32.369Z","upvoteCount":0,"url":"https://teratail.com/questions/207383#reply-306245","comment":[{"@type":"Comment","text":"marginを大きい値でpx指定するのはやめたほうが良いと思う自分がいる","datePublished":"2019-08-21T11:57:48.388Z","dateModified":"2019-08-21T11:57:48.388Z"},{"@type":"Comment","text":"回答ありがとうございます、記述しましたが変化がないです。\r\nどういう意味でしょうか？","datePublished":"2019-08-21T11:59:32.642Z","dateModified":"2019-08-21T11:59:32.642Z"},{"@type":"Comment","text":"cssを変える時はsassでするのでしょうか？","datePublished":"2019-08-21T12:01:12.950Z","dateModified":"2019-08-21T12:01:12.950Z"},{"@type":"Comment","text":"意味がわかりません","datePublished":"2019-08-21T12:01:41.587Z","dateModified":"2019-08-21T12:01:41.587Z"},{"@type":"Comment","text":"変化がないのは質問者さんのディスプレイ幅の影響では？\r\nもう少しウィンドウの幅を狭くされては？","datePublished":"2019-08-21T12:02:18.370Z","dateModified":"2019-08-21T12:02:18.370Z"},{"@type":"Comment","text":"記述した後の表示画面の図を質問に追加しましたのでご覧ください。","datePublished":"2019-08-21T12:09:35.203Z","dateModified":"2019-08-21T12:09:35.203Z"},{"@type":"Comment","text":"うーん CSSを直書きしてはいつまでたっても反映されません。\r\nきちんとタグで囲ってください。\r\n（HTMLは組めているのにそこで...）","datePublished":"2019-08-21T12:11:37.453Z","dateModified":"2019-08-21T12:11:37.453Z"},{"@type":"Comment","text":"質問している立場で申し訳ないのですが初心者なので説明を省いた回答な感じがして理解ができません。\r\nの直前と回答があったのでそうしました。","datePublished":"2019-08-21T12:34:56.144Z","dateModified":"2019-08-21T12:34:56.144Z"},{"@type":"Comment","text":"言語名をご確認ください。CSSです。HTMLではありません。","datePublished":"2019-08-21T12:44:32.371Z","dateModified":"2019-08-21T12:44:32.371Z"},{"@type":"Comment","text":"cssに記述しましたが変化はありませんでした。","datePublished":"2019-08-21T13:43:46.842Z","dateModified":"2019-08-21T13:43:46.842Z"},{"@type":"Comment","text":"私のコメント見てますか？画面のサイズを小さくしてみてください。\r\n顕著に現れるはずです。","datePublished":"2019-08-21T14:53:21.426Z","dateModified":"2019-08-21T14:53:21.426Z"}]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"トップ","url":"https://teratail.com"},{"@type":"ListItem","position":2,"name":"Bootstrapに関する質問","url":"https://teratail.com/tags/Bootstrap"},{"@type":"ListItem","position":3,"name":"Bootstrap","url":"https://teratail.com/tags/Bootstrap"}]}}}
teratail
回答率
85.29%
質問するログイン新規登録
トップBootstrapに関する質問
Bootstrap

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

Q&A

2回答

6198閲覧

BootstrapのCSSの上書きをしたい

kyohaya
kyohaya

総合スコア20

Bootstrap

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

0グッド

0クリップ

投稿2019/08/21 10:15

編集2019/08/21 13:42

0

0

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>Write4 NO4</title>
  </head>
  <body>
    <div class="header"style="height: 212px;">
      <div class="container" style="width: 1035px;">
        <div class="d-flex align-items-end">
          <div class="pt-5 header-left">
            <h2>Write</h2>
            <p class="text-secondary ">書く為のテーマ</p>
          </div>    
          <div class="pt-5 mr-5 ml-5 pb-3">ホーム</div>
          <div class="pt-5 mr-5 ml-5 pb-3">ページ</div>
          <div class="pt-5 mr-5 ml-5 pb-3"> タイポグラフィー</div>
          <div class="pt-5 mr-5 ml-5 pb-3">お問い合わせ</div>
        </div>
      </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
コード
```初心者です、Bootstrapのcssの上書きをしたいのですがどうすればいいでしょうか？「書く為のテーマの右側」にmargin-right:100pxとしたくて調べて色々試したのですが変化がないです。cssは色々変えて上手くいかなかったので消しました。




![イメージ説明](fd95d4a6272db938f8b25087a1834a70.png)

![イメージ説明](d71d99c4f3c9dc498ff5c5142bd9b0ea.png)

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

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

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

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

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

m.ts10806
m.ts10806

2019/08/21 11:48

コードはマークダウンのcode機能を利用してご提示ください。 cssもあわせてご提示ください
kyoya0819
kyoya0819

2019/08/21 11:52

そもそもCSSがないのでは？
kei344
kei344

2019/08/21 13:28

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
kyohaya
kyohaya

2019/08/21 13:42

kei344さん編集をしました。
kei344
kei344

2019/08/21 13:46

stylesheet.css が提示されていませんが、何も記載がないCSSファイルなのでしょうか。
kyohaya
kyohaya

2019/08/21 13:53

説明文も追加したのですがcssは色々変えて変化がなかったので消しました。
guest

回答2件

0

動くサンプル：https://jsfiddle.net/v2bp7qjh/

既に出ている回答で状態が反映されるため、stylesheet.css に書いて反映されないとすれば、下記のようなことを確認してください。
0. デベロッパーツールでCSSファイルが読み込まれているか（コンソールにエラーが出ていないか）確認するhttps://eng-entrance.com/javascript-display-error
0. CSSの記述に問題がある場合それ以降が適用されなくなることが有るので、提示されたコードのみを書いて保存する
0. 読み込まれたファイルと別のファイルを編集している可能性のチェック（たまにあります）
0. キャッシュの消去

【Webブラウザのキャッシュ削除と、スーパーリロード方法一覧 | uzurea.net】
http://uzurea.net/cacheclear-and-superreload-2018/

投稿2019/08/21 14:02

kei344
kei344

総合スコア69643

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

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

kyohaya
kyohaya

2019/08/21 14:08

回答ありがとうございます、画面のサイズを変えてない最初の状態ではmarginを効かせて表示する事はできないのでしょうか？
guest

0

</head>の直前に

CSS
1.text-secondary {
2  margin-right: 100px
3}

又は

CSS
1.d-flex .header-left {
2  margin-right: 100px;
3}

投稿2019/08/21 11:54

編集2019/08/21 12:04
kyoya0819
kyoya0819

総合スコア10434

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

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

kyoya0819
kyoya0819

2019/08/21 11:57

marginを大きい値でpx指定するのはやめたほうが良いと思う自分がいる
kyohaya
kyohaya

2019/08/21 11:59

回答ありがとうございます、記述しましたが変化がないです。 どういう意味でしょうか？
kyohaya
kyohaya

2019/08/21 12:01

cssを変える時はsassでするのでしょうか？
kyoya0819
kyoya0819

2019/08/21 12:01

意味がわかりません
kyoya0819
kyoya0819

2019/08/21 12:02

変化がないのは質問者さんのディスプレイ幅の影響では？ もう少しウィンドウの幅を狭くされては？
kyohaya
kyohaya

2019/08/21 12:09

記述した後の表示画面の図を質問に追加しましたのでご覧ください。
kyoya0819
kyoya0819

2019/08/21 12:11

うーん CSSを直書きしてはいつまでたっても反映されません。 きちんとタグで囲ってください。 （HTMLは組めているのにそこで...）
kyohaya
kyohaya

2019/08/21 12:34

質問している立場で申し訳ないのですが初心者なので説明を省いた回答な感じがして理解ができません。 </head>の直前と回答があったのでそうしました。
kyoya0819
kyoya0819

2019/08/21 12:44

言語名をご確認ください。CSSです。HTMLではありません。
kyohaya
kyohaya

2019/08/21 13:43

cssに記述しましたが変化はありませんでした。
kyoya0819
kyoya0819

2019/08/21 14:53

私のコメント見てますか？画面のサイズを小さくしてみてください。 顕著に現れるはずです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

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

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

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問

トップBootstrapに関する質問

BootstrapのCSSの上書きをしたい