新規登録画面をサクッと作成してアップロード／Flask Blueprintを利用した時のCSSファイルとjsファイルの保存場所
はじめに
今回は新規登録画面を作っていきます。完成したら「Pythonanywhere」へアップロードします。ログイン画面とほとんど同じなのでCSSは使いまわします。
動作環境
Windows10
メモ帳
Google Chrome
作業フォルダ/ ├ static/ │ ├ image.jpg │ ├ newcomer.css │ └ newcomer.js └ newcomer.html
アップロードのことを考えて「static」フォルダを作りました。
ソースコード
newcomer.html
<!DOCTYPE html>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="static/newcomer.css">
<script src="static/newcomer.js"></script>
<title>新規登録画面</title>
<div class="frame">
<img src="static/image.jpg">
<h2>アカウントを作成</h2>
<div class="box1">
<label for="text1" id="l_text1">名前</label>
<input id="text1" type="text">
</div>
<div class="box1">
<label for="text2" id="l_text2">パスワード</label>
<input id="text2" type="password">
</div>
<p>
アカウントを作成すると、利用規約、およびCookieの使用を含むプライバシーポリシーに同意したことになります。
</p>
<button class="btn1" type="submit">登録する</button>
<p>
<br>
<a href="/blog/top">ログイン画面に戻る</a>
</p>
</div>
newcomer.css
@media screen and (max-width: 600px) {
p {
font-size: 80%;
}
}
.frame{
width: 90%; /*幅*/
margin: 30px auto; /*上の位置と中央寄せ*/
max-width: 600px; /*最大の幅*/
}
img{
display: block; /*要素の表示形式*/
margin: auto; /*中央寄せ*/
width: 40px; /*幅*/
height: auto; /*縦横比を維持する高さを自動計算*/
}
.box1{
width: 100%; /*幅*/
height: 60px; /*高さ*/
margin: 15px 0px; /*領域外のスペース*/
background-color: #eee; /*背景色*/
border-bottom: 2px solid #c2c2c2; /*text1の下線*/
}
#l_text1{
display: block; /*要素の表示形式*/
font-size: 14px; /*文字の大きさ*/
padding: 5px 10px; /*領域内のスペース*/
}
#text1{
font-size: 18px; /*文字の大きさ*/
padding: 0 0 7px 10px; /*ボックスを大きくする*/
width: 100%; /*幅*/
background-color: #eee; /*背景色*/
border: none; /*外枠の線*/
outline: none; /*外枠の線*/
border-bottom: 2px solid #c2c2c2; /*text1の下線*/
box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
}
#text1:focus{
border-bottom: 2px solid #1B73BA; /*下線の太さと色*/
}
#l_text2{
display: block; /*要素の表示形式*/
font-size: 13px; /*文字の大きさ*/
padding: 5px 10px; /*領域内のスペース*/
}
#text2{
font-size: 18px; /*文字の大きさ*/
padding: 2px 0 7px 10px; /*ボックスを大きくする*/
width: 100%; /*幅*/
background-color: #eee; /*背景色*/
border: none; /*外枠の線*/
outline: none; /*外枠の線*/
border-bottom: 2px solid #c2c2c2; /*text1の下線*/
box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
}
#text2:focus{
border-bottom: 2px solid #1B73BA; /*下線の太さと色*/
}
.btn1{
position:relative; /*相対位置（topのために必要）*/
width:100%; /*幅*/
height:50px; /*高さ*/
top: 10px; /*上の位置*/
color:#fff; /*文字の色*/
border:none; /*外枠*/
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px; /*角の半径*/
background:#1B73BA; /*背景色*/
display: block; /*要素の表示形式*/
-webkit-appearance: none;
outline: 0; /*外枠（押した後）*/
cursor: pointer; /*カーソル（指のかたち）*/
}
.btn1:hover{
opacity: 0.8; /*透明度*/
}
a {
text-decoration: none; /*下線を消す*/
}
a:hover{
text-decoration: underline; /*下線を引く*/
}
newcomer.js
window.onload = function () {
document.getElementById( "text1" ).onfocus = function(){
document.getElementById("l_text1").style.color = '#1B73BA';
};
document.getElementById( "text1" ).onblur = function(){
document.getElementById("l_text1").style.color = '';
};
document.getElementById( "text2" ).onfocus = function(){
document.getElementById("l_text2").style.color = '#1B73BA';
};
document.getElementById( "text2" ).onblur = function(){
document.getElementById("l_text2").style.color = '';
};
}
ソースコードはほとんど「ログイン画面」と同じです。詳しい解説は「HTML ツイッター風のログイン画面を作成する（CSSでレイアウトの調整）」をご覧ください。
続けて「Pythonanywhere」へアップロードします。ここで問題が発生しました。
Blueprintを利用した時のCSSファイルとjsファイルの保存場所
「main.py」のこの部分
app.register_blueprint(app2, url_prefix="/blog")
「url_prefix="/blog"」を入れることによって、分割されたpyファイルでは「/」が「/blog」扱いされるようになります。（「/top」は「/blog/top」扱いに）
前回はCSSファイルがなかったので問題ありませんでした。CSSファイルとjsファイルは「作業フォルダ/static」のフォルダに保存します。
しかし、このままではうまく読み込めなかったのでどう対処したかを残しておきます。
「newcomer.html」の場合はこの部分
<link rel="stylesheet" type="text/css" href="/static/newcomer.css">
<script src="/static/newcomer.js"></script>
<img src="/static/image.jpg">
このように変更することでうまく読み込めるようになりました。
ポイントは「/static/newcomer.css」で、頭に「/」を付けるところです。
「newcomer.html」から直接開くときは「/」は必要ない（逆に「/」があると認識しない）のですが、Pythonanywhereへアップロードする際には変更が必要です。
現在のファイル構成
作業フォルダ/ ├ blog/ │ ├ templates/ │ │ └ blog/ │ │ ├ base.html │ │ ├ top.html │ │ ├ newcomoer.html │ │ └ index.html │ ├ models/ │ │ ├ __init__.py │ │ ├ database.py │ │ ├ models.py │ │ └ wiki.db │ ├ __init__.py │ └ server.py ├ static/ │ ├ image.jpg │ ├ login.css │ ├ login.js │ ├ newcomer.css │ └ newcomer.js ├ templates/ │ └ index.html ├ key.py └ main.py
ログイン画面と新規登録画面だけでもこんなになるんですね。
おまけ：キャッシュ（クッキー）が邪魔でCSSが更新されない時の対処法
CSSファイルを編集して保存しても反映されない場合がよくあります。その時は、シークレットモード「シークレット ウィンドウを開く」で試してみましょう。
まとめ
CSSは特に詰まるところはなかったです。名前とパスワードの欄が選択中はラベルの色が青く変わるところだけJavascriptで対応しています。HTMLもブロック毎に見えてきました。frame要素の中に[画像][表題][テキストボックス][ボタン][段落][リンク]が入っているのが分かります。ログイン画面の復習のようでより理解ができるようになったと思います。
↓よかったらポチッとしていってください。
