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

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

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

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

729閲覧

ログアウトボタンが右に移動しない

退会済みユーザー

退会済みユーザー

総合スコア0

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/10/04 06:44

ログアウトボタンが右に移動しません。htmlに

{% load static%} 
<html lang="ja"> 
<head>
 <meta charset="UTF-8">
 <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
 <link rel="stylesheet" href="{% static 'accounts/detail.css' %}">
 <link rel="stylesheet" href="{% static 'bootflat/css/bootflat.min.css' %}">
 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

 <title>XOXO</title>
 </head>
 <body>
 <header class="clearfix">
 <nav>
 <h1 class="box title">XOXO</h1>
 <div class="container">
 <form name="logout" method="post" action="{% url 'accounts:logout' %}">
 {% csrf_token %}
 <button type="submit" class="box btn btn-primary" style="color:white">ログアウト</button>
 <input name="next" type="hidden"/>
 </form>
 </div>

 </nav>
 </header>

 <img class="img" src="{% static 'detail.jpg' %}" alt="詳細">
 <div class="icon_wrapper">
 <h3>I love you</h3>
 <p>miss you</p>
 </div>
 </body> 
</html>

と書きました。cssに

*{ margin: 0; padding: 0; } .clearfix::after{ content: ""; clear: both; display: block; } header{ width: 100%; height: 100px; background-color:black; } nav{ width: 90%; height: 60px; margin: 0 auto; text-align: left; } .title{ float:left; color:white; font-size: 70px; margin-top:10px; padding-top:-30px; padding-bottom:30px; padding-left:80px; padding-right:80px; height: 60px; } .btn btn-primary btn-lg{  margin-top:10px; padding-top:-30px; padding-bottom:30px; padding-left:80px; padding-right:80px; } .img{ float: left; position: relative; padding-top:30px; padding-left:80px; padding-right:80px; }

と書きました。floatやmargin・paddingを移動させてもログアウトボタンが右に移動しません。また、Chromeの開発者ツールを使って何が原因かを見ているのですが、それでも思うようにcssを動かせません。
ElementsのStyleで線を引かれている部分を一個一個全部直して見るしかないのでしょうか?
なぜこのようになっていてどう直せば良いでしょうか?

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

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

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

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

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

m.ts10806

2017/10/04 06:47

一度質問テンプレートにそって書き直すことを強くすすめます。
m.ts10806

2017/10/04 07:02

右ってどこでしょうか?位置が関わる場合には具体的な位置を記述(または図示)された方が欲しい回答を得られやすくなります。
退会済みユーザー

退会済みユーザー

2017/10/04 08:28

float:right;で解決しました
m.ts10806

2017/10/04 08:31

回答に対するコメントとして書いてください。リンク先Tipsの「アドバイス」部分ですね。
guest

回答3

0

とくに右に移動するような記述が見当たりませんが

たとえばbtn-primaryクラスのついたタグを右に移動するなら

CSS

1.btn-primary{ 2float:right; 3}

を記載するなどでしょう

.btn btn-primary btn-lg{

などの記載はタグの階層や、クラスの管理について理解が薄いか
凡ミスが多いかのどちらかではないでしょうか?

投稿2017/10/04 06:51

yambejp

総合スコア114572

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

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

0

ベストアンサー

おそらくbootstrapだと思うので、bootstrapが提供しているCSSクラスに直接指定するのはオススメしません。
特にログアウトボタンであれば画面にひとつであることはほぼ保証されているものでしょうから、
idを振ってそれに対して指定すべきですね。

html

1<button type="submit" class="box btn btn-primary" id="logout">ログアウト</button>

css

1button#logout{ 2float:right; 3color:white 4}

そうすれば直接styleで記述している文字色の指定もできますし。

css

1.btn btn-primary btn-lg{

複数指定の仕方がおかしいですね。
それぞれクラスなので、頭に「.」をつける必要があります。あとは「,」で区切る。

余談ですが、全角スペースが入ってるので効かない指定がありますよ。

css

1↓ここ 2[ ]margin-top:10px; 3

投稿2017/10/04 07:01

m.ts10806

総合スコア80765

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

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

0

float:right;で解決しました

投稿2017/10/04 08:40

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問