DjangoにおいてCSSファイルが反映されない

実現したいこと

WEBのアプリケーション作成途中にCSSファイルが読み取られない

ファイル構造

CSSファイルのone-page-wonder.cssとone-page-wonder.min.cssは読み取られている

発生している問題・エラーメッセージ

2020-09-09 17:38:17,411	[WARNING]	C:\Users\rikuw\venv_private_diary\lib\site-packages\django\core\servers\basehttp.py(Line:157)	"GET /static/css/mystyle.css HTTP/1.1" 404 1671

settings.py

import os

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

SECRET_KEY = 'q6y8^q5+dpgyuk4^jb9^x(f9s#9n$v1hq)zhom$41lhwd7)hhn'

DEBUG = True

ALLOWED_HOSTS = []

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'diary.apps.DiaryConfig',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'private_diary.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'private_diary.wsgi.application'

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/3.1/topics/i18n/

LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

STATIC_URL = '/static/'

###mystyle.css

body, #wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    margin-top: auto;
}

.my-div-style {
    margin-top: 6rem;
}

###base.html

{% load static %}

<html lang="ja">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>{% block title %}{% endblock %}</title>

  <!-- Bootstrap core CSS -->
  <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">

  <!-- Custom fonts for this template -->
  <link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="{% static 'css/one-page-wonder.min.css' %}" rel="stylesheet">

  <!-- My style-->
  <link rel="stylesheet" type="text/css" href="{% static 'css/mystyle.css' %}">
  {% block head %}{% endblock %}
</head>

<body>
 <div id="wrapper">
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top">
        <div class="container">
          <a class="navbar-brand" href="{% url 'diary:index' %}">PRIVATE DIARY</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item {% block active_inquiry %}{% endblock %}">
                <a class="nav-link" href="{% url 'diary:inquiry' %}">INQUIRY</a>
              </li>
            </ul>
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="#">Sign Up</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Log In</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>

  {% block header %}{% endblock %}

  {% block contents %}{% endblock %}

  <!-- Footer -->
  <footer class="py-5 bg-black">
    <div class="container">
      <p class="m-0 text-center text-white small">Copyright &copy; Private Diary 2020</p>
    </div>
    <!-- /.container -->
  </footer>

  <!-- Bootstrap core JavaScript -->
  <script src="{% static 'vendor/jquery/jquery.min.js'%}"></script>
  <script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
 </div>
</body>

</html>

###inquiry.html

{% extends 'base.html' %}

{% block title %}お問い合わせ | Private Diary{% endblock %}

{% block active_inquiry %}active{% endblock %}

{% block contents %}
<div class="container">
  <div class="row">
    <div class="my-div-style">
      <form method="post">
        {% csrf_token %}

        {{ form.non_field_errors }}

        {% for field in form %}
          <div class="form-group row">
            <label for="{{ field.id_for_label }}" class="col-sm-4 col-form-label">
              <strong>{{ field.label_tag }}</strong>
            </label>
            <div class="col-sm-8">
              {{ field }}
              {{ field.errors }}
            </div>
          </div>
        {% endfor %}

        <div class="offset-sm-4 col-sm-8">
          <button class="btn btn-primary" type="submit">送信</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}

試したこと

https://teratail.com/questions/109580
に同じような質問があったためこのページを参考にし

python manage.py collectstatic

をコマンド入力したのですが下記のようなメッセージが出てきました。

raise ImproperlyConfigured("You're using the staticfiles app "
django.core.exceptions.ImproperlyConfigured: You're using the staticfiles app without having set the STATIC_ROOT s
etting to a filesystem path.

補足情報（FW/ツールのバージョンなど）

Windows10

(venv_private_diary) C:\Users\rikuw\venv_private_diary\private_diary>pip freeze
asgiref==3.2.10
Django==3.1.1
psycopg2-binary==2.8.5
pytz==2020.1
sqlparse==0.3.1

t_obara

2020/09/09 11:26

画面キャプチャでは、「mystyle」となっていますが、拡張子「.css」は付いているんですか？

DR.py

2020/09/09 11:47

一応mystyleの横にCSSファイルのマークはついているのですが、ほかの二つは名前に「.css」とついているのでそれが原因でした。自分のファイルから名前の編集で.cssを付けたところCSSが読み取られました mystyleの種類が”ファイル”から”カスケードスタイル”になったので読み取られたと思います。ありがとうございました。