"BOKU"のITな日常

62歳・文系システムエンジニアの”BOKU”は日々勉強を楽しんでます

静的ファイルへのアクセス方法/Windows10 + anaconda + python3.7

今回は、CSSや画像ファイルなどの静的ファイルへのアクセス方法です。 

django2.0・3.0で動作確認済です。

f:id:arakan_no_boku:20190320212948j:plain

 

前提

 

インストール・環境設定で、静的ファイルを置く「static」フォルダの設定を追加できている想定ですすめます。

arakan-pgm-ai.hatenablog.com

arakan-pgm-ai.hatenablog.com

なので。

プロジェクト名は前回の流れで「demos」にしておきます。

静的ファイル(CSS、画像、JavaScript)を扱うために、プロジェクトフォルダの直下にstaticフォルダを以下のように作ってある想定です。

f:id:arakan_no_boku:20191214162049p:plain

サブフォルダの作成

 

「static」の下に、ファイルの種類ごとのフォルダを作ります。

今回は、「css」「images」「js」にします。 

  • cssが「CSS」ファイルの置き場所。
  • imagesが「画像ファイル」の置き場所
  • jsが「JavaScript」の置き場所。

です。

 

 

サンプルを作ってみる

 

静的ファイルへのアクセスを確認するために、簡単な入力画面を作ってみます。

 

HTMLファイルでの対応

 

前回使ったhello.html を以下のように修正します。 

{% load static %}
<!doctype html>
<html lang="ja">
    <head>
  </head>
    <body>
        <div class="container">
            <div class="row text-center">
                <h1>Hello Form!!</h1>
            </div>
            <div class="row text-center">
                <img src="{% static "images/boku.jpg" %}" />
            </div>
        </div>
    </body> 
</html>

静的ファイルにアクセスするには、HTMLの中で以下のように書きます。 

{% load static %} 

・・・

 <img src="{% static "images/boku.jpg" %}" />

 staticの設定をロードして、「static」フォルダをルートにした相対パスで書きます。

これによって

{% static "images/boku.jpg" %}

の部分が

/static/images/boku.jpg

 に変換されます。

つまり「<img src="/static/images/boku.jpg" />」と同じです。

CSSJavaScriptも同様です。

staricフォルダ以下のファイルは全て同じ方法でアクセス可能です。

static\imagesフォルダに、boku.jpgというファイルを置き、実行すると。

f:id:arakan_no_boku:20200418234500p:plain

画像が表示されていることを確認できました。

 

なお、実行方法はこちらと同じです。

arakan-pgm-ai.hatenablog.com