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

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

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

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

HTML

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

Q&A

解決済

2回答

933閲覧

html web上の表示が小さくなる

rikuanpg9294

総合スコア15

HTML5

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

HTML

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

0グッド

0クリップ

投稿2021/05/19 04:24

編集2021/05/19 05:05

djangoでwebサイトの制作を始めたのですが、web上に表示するときに小さくなってしまいます。対処方法がわかる方は、おアドバイスをお願いいたします。イメージ説明
col-md-8に変更しスペースをなくしたのですが結果は同じでした。
class = "row my-4"をclass = "row"に変更しても変わりませんでした。

html

1{% extends "app/base.html" %} 2 3{% block content %} 4 5<div class="row my-4"> 6 <div class="col -md-8"> 7 {% for post in post_data%} 8 <div class = "card md-4"> 9 <div class="card-body"> 10 <h2 class="card-title">{{post.title}}</h2> 11 <p class ="card-text">{{post.content|truncatechars:100}}</p> 12 <div class="btn btn-warning ">詳細</div> 13 </div> 14 <div class="card-footer text-muted"> 15 {{post.creaetd|date}}by{{ post.author }} 16 </div> 17 <a href="" class="stretched-link"></a> 18 </div> 19 {% endfor %} 20 </div> 21 22 <div class="col-md-4"> 23 <div class="card"> 24 <h5 class ="card-header">このチュートリアルについて</h5> 25 <div class="card-body"> 26 <p>ステップ1</p> 27 <p class = "mb-0"> 28 初めてのdjango 29 </p> 30 </div> 31 </div> 32 </div> 33</div> 34 35{% endblock %} 36

html

1{% load static %} 2<!DOCTYPE html> 3<html lang="en"> 4<head> 5 <meta charset="utf-8"> 6 <meta name = "viewport" content="width=device-width, initial-scale=1.0"> 7 <!-- BootstrapのCSS読み込み --> 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> 9 <link rel="stylesheet" href="{%static 'css/style.css' %}" 10 <title>ブログチュートリアル</title> 11</head> 12<body> 13 <nav class = "navber navber-expand-lg navber-dark bg-dark"> 14 <div class = "container"> 15 <a class="navber-brand" href="/">ブログ</a> 16 <ul class = "navber-nav ml-auto"> 17 <li class="nav-item"> 18 <a class="nav-link" href="/">ホーム</a> 19 </li> 20 {% if user.is_authenticated %} 21 <li class="nav-item"> 22 <a class="nav-link" href="/">投稿</a> 23 </li> 24 <li class="nav-item"> 25 <a class="nav-link" href="/">ログアウト</a> 26 </li> 27 {% else %} 28 <li class="nav-item"> 29 <a class="nav-link" href="/">サインアップ</a> 30 </li> 31 <li class="nav-item"> 32 <a class="nav-link" href="/">ログイン</a> 33 </li> 34 {% endif %} 35 </ul> 36 </div> 37 </nav> 38 39 <main> 40 <div class="container"> 41 {% block content%} 42 {% endblock %} 43 </div> 44 </main> 45 46 <footer class ="py-2 bg-dark"> 47 <p class="m-0 text-center text-white">Copyright &copy; Django startup 2020</p> 48 <footer> 49 50 {% block extra_js %} 51 {% endblock %} 52</body> 53</html>

css

1* { 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5 } 6 7body{ 8 background: #F1F1F1; 9 display: flex; 10 flex-flow: column; 11 margin-left: 100vh; 12 13} 14 15main{ 16 flex: 1; 17}

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

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

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

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

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

Lhankor_Mhy

2021/05/19 05:03

CSSをご提示ください。
guest

回答2

0

ベストアンサー

とりあえず、margin-left: 100vhを消してみてはどうでしょうか。

投稿2021/05/19 05:17

Lhankor_Mhy

総合スコア36117

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

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

rikuanpg9294

2021/05/19 05:38 編集

bodyの部分を変更することでうまくいきました。ありがとうございます。
guest

0

これだけだとなんとも言えませんが見た感じ、コード(my-4)にある通りカラム4の幅になってるのでは。
提示されてないコードで8にしてたり12の中で右寄せしてたりしませんか?

あと、col -md-8だとカラム8の幅にはなりませんね。スペースがあるので2つのクラスにわかれてます。

投稿2021/05/19 04:29

編集2021/05/19 04:43
m.ts10806

総合スコア80850

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

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

rikuanpg9294

2021/05/19 05:02 編集

回答ありがとうございます。col-md-8に変更しスペースをなくしたのですが結果は同じでした。 class = "row my-4"をclass = "row"に変更しても変わりませんでした。
m.ts10806

2021/05/19 05:09

レイアウトの問題ですし、DJango要素を排除して、コードはブラウザに表示されたときのhtmlを提示されたほうが良いかもしれません。
m.ts10806

2021/05/19 05:10

Lhankor_Mhyさん ご指摘ありがとうございます。 どこかで幅の指定もしてるかもしれませんね。
m.ts10806

2021/05/19 05:11

mainにかけられたflexが気になります
rikuanpg9294

2021/05/19 05:19

mainのflex:1はフッターを常に一番下に来るようにする為に書きました。
m.ts10806

2021/05/19 05:22

私でしたら まず自分が書いたCSSを全部無効にします。 で、一つずつ戻してく。 のは面倒なのでブラウザのデベロッパツールで一個ずつ擬似的に無効にしていって問題切り分けですね。
rikuanpg9294

2021/05/19 05:38

bodyの部分を変更することでうまくいきました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問