今回の記事はDjangoプロジェクト内でCSSを使う方法に関する初心者向けの記事です。CSSは画面の見た目を整える上で必須のスキルとなるため、是非使用できるようにしましょう。初心者でもわかりやすいようにサンプルアプリを交えて紹介していくので是非参考にして見てください。
Djangoプロジェクト作成
まずは、DjangoをPythonにインストールします。すでにDjangoをインストール済みの方は飛ばしてください。
python venv -m env
cd env/Scripts
activate
cd ../..
pip install django次にDjangoプロジェクトを展開するフォルダで下記のコマンドを実行します。
django-admin startproject sample
↓
cd sample
↓
python manage.py startapp appDjangoプロジェクトでCSSをファイルを指定
Djangoプロジェクト内に作成している「statics」フォルダにCSSファイルを格納していくのでそちらを下記HTMLのように記述します。画像の読み込みとほぼ変わりないです。
<!DOCTYPE html>
{% load static %}
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="{% static 'ap/css/index_css1.css' %}">
<title>きのこがりゲーム</title>
</head>
<body>
<div>
<form action="{% url 'move_to_gamepage' %}" method="GET">
<br>
{{ form.as_p }}
<hr>
<input type="image" src="{% static "ap/image/button/start_button.png" %}" name="start_button">
</form>
</div>
</body>
</html>「index.html」内の下記業が「static」フォルダのCSSを参照し、読み込んでいます。
<link rel="stylesheet" type="text/css" href="{% static 'ap/css/index_css1.css' %}">私は「statics」フォルダ内にさらに階層を分けてCSSファイルを格納しているため、「static/ap/css/〜.css」となっていますが、こちらは皆様のフォルダ構成に従ってください。
また、ページ上部の「load statics」も必ずつけてください。エラーが出ます。
{% load static %}CSSファイルは下記です。
div {
max-width: 50%;
margin: 0 auto;
}
body {
line-height: 1;
font-family: sans-serif;
font-size: 20px;
font-weight: 300;
color: #333;
}要素「div」で囲んでいるHTML内の要素に対して、「max-width」を50％、余白の「margin」を0に設定しています。
CSSがない時とある時で見比べてください。
では今回の記事は以上です。他にもDjango関連の記事を記載しているので是非興味ある方は
コメント
[…] 前回はDjangoにてcssファイルを使用してカードの配置等を変更させました。Djangoでcssを使う方法【Djangoでカードクリックゲーム作成！！2日目②】そこから少し変更させ、いよいよ本番と言っても過言ではないDjango ないでjavascriptの実装です。JQueryというフレームワークもありますが今回はフレームワークなしでどんどん実装していこうとおもいます。また、仕事ではないので方針を固めずどんどんやっていて適宜やり方を考えていこうと思います。 […]
[…] 前回はDjangoにてcssファイルを使用してカードの配置等を変更させました。Djangoでcssを使う方法【Djangoでカードクリックゲーム作成！！2日目②】そこから少し変更させ、いよいよ本番と言っても過言ではないDjango ないでjavascriptの実装です。JQueryというフレームワークもありますが今回はフレームワークなしでどんどん実装していこうとおもいます。また、仕事ではないので方針を固めずどんどんやっていて適宜やり方を考えていこうと思います。 […]