【Django】Webサイトに横並びで画像をレスポンシブに表示する方法

前回、Djangoで構築したWebサイトで画像をレスポンシブに表示する設定方法を紹介しました。
今回はそのレスポンシブ画像を横並びで表示する方法をまとめました。

ベースディレクトリは前回と同様「static」フォルダ配下となります。

前回の記事はこちらから

「Django」で構築したWebサイトで画像を横並びに表示&レスポンシブにする設定

前回同様、Webサイトに表示する画像は以下、ベースディレクトリとなる「static」フォルダ配下の画像を使用します。

mysite/
|-- settings.py
static/
|-- images
|   |-- network
|       `-- pc.png

再度設定の確認ですが、まずベースディレクトリをDjangoで設定をしないといけません。
設定は「settings.py」を編集します。

$ vim mysite/settings.py

以下で、ファイル最終行の「STATIC_URL」を「static」フォルダとし、ベースディレクトリを登録します。

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

HTMLファイルに横並びで画像を貼り付ける

HTMLファイルへの貼り付け方は、ファイル編集時の先頭に「{% load static %}」を設定し、staticフォルダを読み込ませます。

そして、画像を貼り付けたい場所に「% staic ~%」でstaticフォルダを指定し、画像フォルダを指定します。
「class=”img-fluid”」でBootstrap4のレスポンス指定となります。

以下が設定例となります。

レスポンシブ画像2枚表示

{% load static %}
 
------中略------

<div class="container">
  <h2>レスポンシブ画像2枚</h2>
  <div class="row">
    <div class="col">
      <img src="{% static "images/network/pc.png"%}" alt="" class="img-fluid">
    </div>
    <div class="col">
      <img src="{% static "images/network/pc.png"%}" alt="" class="img-fluid">
    </div>
  </div>
</div>

PC表示

スマホ表示

レスポンシブ画像4枚表示

{% load static %}
 
------中略------

<div class="container">
  <h2>レスポンシブ画像4枚</h2>
  <div class="row">
    <div class="col">
      <img src="{% static "images/network/pc.png"%}" alt="" class="img-fluid">
    </div>
    <div class="col">
      <img src="{% static "images/network/pc.png"%}" alt="" class="img-fluid">
    </div>
    <div class="col">
      <img src="{% static "images/network/pc.png"%}" alt="" class="img-fluid">
    </div>
    <div class="col">
      <img src="{% static "images/network/pc.png"%}" alt="" class="img-fluid">
    </div>
  </div>
</div>

PC表示

スマホ表示

以上がDjangoで構築したWebサイトで画像を横並びに表示する設定となります。




エンジニアのオンライン学習

ITエンジニアにおすすめの教材、オンラインスクールです。
無料からエンジニアの学習ができる教材などまとめているので参考にしてください。

おすすめオンライン教材
自宅で学習ができるオンラインスクール

ITエンジニアの開発・検証・学習としてインターネット上で専用のサーバ(VPS)を利用しましょう!
実務経験はVPSで学べます。



コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUT US
げんき☆ひろき
インターネット関連のSEをやっています。 ネットワーク、サーバー、ストレージ、仮想基盤まで幅広く手を出しており、MVNOの構築経験もあります。 現在は、Pythonを使ったプログラミングの開発をしネットワークの自動化ツールを作成しています! Pythonの入門書も作成しているので、ぜひ参考にしてください!