• cssファイルの扱い方(staticの使い方)

    djangoでのcssファイルの使い方について学んでいきましょう。

    cssファイル(staticファイル)は、アプリと関連づけられている

    まずおさえておかなければいけないことは、cssファイル(staticファイル)は、アプリと関連付けられているということです。

    これがどういうことか見ていきましょう。

    まず、htmlファイルについて整理していきましょう。

    htmlファイルを保存する場所は、settings.pyファイルの中のDIRで設定していました。

    settings.pyファイルの中で、DIRを[BASE_DIR, 'templates']とすることで、manage.pyファイルが入っている階層/templatesフォルダの中にhtmlファイルを探しにいくという形です。

    そしてこれは、どのアプリからでも同じです。

    つまり、Aというアプリでも、Bというアプリでも、views.pyファイルの中でindex.htmlを呼び出せば、djangoはtemplatesフォルダの中のindex.htmlファイルを探しにいくのです。

    それに比べて、cssファイルの場合は、それぞれのアプリと関連づいていることに注意をする必要があります。

    cssファイルを保存する場所の初期設定

    まずは、cssファイルが保存される場所の初期設定についてみていきましょう。

    これもsettings.pyファイルの中で確認することができます。

    具体的には、STSTIC_URLと書かれている部分です。

    コード
    

    STATIC_URL='/static/'

    と書かれていることがわかるかと思います。

    この'/static/'は、それぞれのアプリが入っている場所の中のstaticフォルダのことを指していることに注意しましょう。

    フォルダ構成を見ながら、その場所の違いについて見ていきましょう。

    ここで、AAAというプロジェクトを作り、その中でBBBというアプリを作ると仮定します。この時のフォルダの構成はこのような形になります(staticフォルダの位置に注目してください。)

    フォルダ構成
    

    manage.py

    templates

      index.html

    AAA

      __init__.py

      settings.py

      urls.py

      wsgi.py

    BBB

      __init__.py

      admin.py

      models.py

      urls.py

      views.py

      static

        base.css

    htmlファイルの場所と、cssファイルの場所が違うことがわかると思います。

    cssファイルの扱いを知るためには、まずこの点を理解しましょう。

    同じ場所にまとめたい場合

    ただ、cssファイルについても同じ場所にまとめておきたいという場合があるかもしれません。

    この場合は、STATICFILES_DIRを使います。

    これは、djangoがSTATIC_URLを探しにいき、その中で目的とするファイルが見つからなかったときに次にdjangoが探しに行くフォルダを設定するものです。

    ここで、templatesフォルダの設定と同じように、このように書くことによって、cssファイルをまとめて同じフォルダに保存することができるようになります。

    コード
    

    STSTICFILES_DIRS = (

    os.path.join(BASE_DIR, 'static'),

    )

    このようにすることで、manage.pyが置かれているフォルダ(BASE_DIR)にあるstaticファイルをdjangoが探しにいくようになります。

    ~Django無料講義~のご案内

    Code for Djangoが、4時間超の無料Django講義をはじめました

    •  ・本を出版したCode for Djangoの
       製作者が作ったサイトです。
    •  ・Code for Djangoの内容も、
       動画で詳しく解説しています。
    •  ・動画は順次ふやしていきますので、
       ただで学び続けることが可能です。
    •  ・Djangoの効率的なスキルアップに、
       是非お役立て下さい。