Q&A
container
cntainer
cotainer
１記事中に表記の揺れが多数見えます。
この手のミスはプログラミング上では致命的なので、コード外でも気を付けてください。
前提・実現したいこと
python初心者です。
Djangoとbootstrapを使った状況でトランプゲームババ抜きを作成したいと思い、取り組んでいるところです。
views.pyの仕様をババ抜きに変えるところまでは出来ました。
CSSを適用させないでHTMLだけを組み合わせた形であれば問題なくブラウザ上で表示させ、ゲームをすることが出来ます。
しかし、レイアウトを綺麗にするためにCSSを適用させようと試みたところ、CSSの編集した内容がブラウザ上で表示されず困っています。解決方法が分かれば教えていただきたいです。
参考にコードを以下のとおり載せます。
HTMLのbjgame2.htmlのコードは以下のとおりです。
HTML
1{% load static %} 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <title>My melodyとのババ抜きしょうぶ</title> 8 <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet"> 9 <script src="{% static 'js/bootstrap.js' %}"></script> 10 <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}"> 11 </head> 12 <body> 13 <nav class="navbar navbar-inverse"> 14 <div class="navbar-header"> 15 <a class="nav navbar-brand" href="../game/">My melodyとのババ抜きしょうぶ</a> 16 17 </div> 18 <ul class="nav navbar-nav"> 19 <li><a href="../game/"><i class="glyphicon glyphicon-play"></i>ゲーム</a></li> 20 <li><a href="../howto/"><i class="glyphicon glyphicon-question-sign"></i>遊び方</a></li> 21 </ul> 22 </nav> 23 <div class="msg"> 24 <div class="panel panel-default"> 25 <div class="panel-body"> 26 <B>{{ msg }}</B> 27 {% if able_bet == True %} 28 <p> </p> 29 {% else %} 30 <p>{{ msg2 }}</p> 31 {% endif %} 32 </div> 33 </div> 34 </div> 35 <div style="background-image: url({% static 'table_bk.png' %}); 36 background-repeat: no-repeat; 37 background-position : 12px 2px;"> 38 39 </div> 40 <div class="container"> 41 My melody 42 </div>
style.cssのコードは以下のとおりです。
css
1* { 2 margin: 0px; 3 padding: 0px; 4} 5.container { 6 max-width: none !important; 7 width: 570px; 8 padding-left: 10px; 9 margin: 10px; 10 11} 12 13.row { 14 height: 130px; 15} 16 17.card li { 18 display: inline-block; 19} 20 21div.col-xs-8 { 22 margin: 20px auto; 23} 24 25div.col-xs-3{ 26 margin: 20px auto; 27} 28 29div.col-xs-3 * { 30 margin: 0px; 31 padding: 0px; 32} 33 34div.col-xs-4{ 35 margin: 20px auto; 36} 37 38div.col-xs-4 * { 39 margin: 0px; 40 padding: -20px; 41} 42 43div.msg * { 44 background-color: #f0f0f0 45}
画面の状況としては以下のとおりです。
bjgame2.htmlの<div class="container">My melody</div>
の部分はstyle.cssのcontainerクラスが反映されていると思ったので以下のとおりstyle.cssのcntainerを編集しました。
css
1.container { 2 max-width: none !important; 3 width: 570px; 4 padding-left: 30px; 5 margin: 10px; 6}
これでMymelodyの文字が右によると思ってブラウザの更新を押した結果の画像が以下のとおりです。
見てのとおりpadding-leftが10pxのままです。
これを編集したとおりにブラウザに反映させる方法が分かれば教えていただきたいです。
試したこと
キャッシュの消去とハードの再読み込みを行っても反映されません。
新しいクラス.cotainer2を作って反映させようと試みましたが、反映されません。
補足
OS windows10
Python バージョン3.7.1
デベロッパツール上ではなく、CSSを直接URL叩いて開くとどうですか？
m.ts10806さんご指摘ありがとうございます。
プログラミング初心者で大変申し訳ないのですが、デペロッパツール上でcssを編集するという意味はブラウザ上で、画像右側のcssコードが書いてある部分を編集するという意味でしょうか？その場合であれば編集した内容は反映されます。
cssを直接叩いてという意味がstyle.cssのファイルを直接編集して画像の通りブラウザを開くという意味であれば編集しても内容が反映されません。以上の状況でお話しを伺えればと思います。
「デペロッパツール上でcssを編集する」とは言ってません。
「直接URLを叩く」です。
下記のように、ブラウザから直接CSSのURLにアクセスするという意味です。
http://example.com/css/style.css
そのうえでキャッシュクリアして反映されてなかったらそもそもコンパイル通ってない（またはデプロイできてない）と判断できます。
m.ts10806さん追記ありがとうございます。
私はDjangoのmanage.pyとviews.pyを使ってHTMLとCSSをブラウザ上で表示しています。
(なので画像をみていただくとURLが127.0.0.1・・・となっています。)
申し訳ないのですがhttp://でstly.cssを表示する方法が分かりません。この状況でコンパイルが通っていか確認する方法をしっていれば教えていただきたいです。本当にご面倒かけてすみません。
新たなstyle.cssを作成し、そちらを参照した結果反映することに成功しました。
m.ts10806さん忙しい中アドバイスいただきありがとうございました。
自己解決
