webページのスムーズな読み込み
ハル先生のlesson動画で勉強しデプロイまでできましたが
全て正常に動作するのですがページによっては、どうしても
読み込みがおかしい
一瞬文字だけ表示される(スタイルが効いていない)
その後、すぐ正常に表示される
ソースコード
{% load static %}
{% load user_tags %}
<!DOCTYPE >
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kaisei+Tokumin:wght@500&display=swap" rel="stylesheet">
<link href="{% static 'css/vuetify.css' %}" rel="stylesheet">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<link href="{% static 'css/materialdesignicons.min.css' %}" rel="stylesheet">
<title>Vital Get</title>
<link rel="manifest" href="/static/manifest.json">
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js').then(function() { console.log('Service Worker Registered'); });
}
</script>
</head>
<body>
<v-app id="app">
<v-row justify="center">
<v-col cols="12" xs="aouto">
<template>
<v-bottom-navigation height="70" class="pink" dark>
{% if user.is_authenticated %}
<v-btn href="{% url 'index' %}">
<span>Home</span>
<v-icon large>mdi-home</v-icon>
</v-btn>
<v-btn href="{% url 'profile' %}">
<span class="font-weight-bold">マイページ</span>
<v-avatar size="38">
{% for user in user_data %}
{% if user.image %}
<v-img src="{{ user.image.url }}"></v-img>
{% else %}
<v-icon large>mdi-account-circle</v-icon>
{% endif %}
{% endfor %}
</v-avatar>
</v-btn>
<v-btn href="{% url 'vital_his' %}">
<span class="font-weight-bold">バイタルヒストリー</span>
<v-icon large>mdi-book-open-outline</v-icon>
<v-badge color="red" left overlap content={{ request.user | vi_count }}></v-badge>
</v-btn>
{% else %}
<h1 class="mt-4">Let's start with Vital Get</h1>
</v-bottom-navigation>
{% endif %}
</template>
</v-col>
</v-row>
<main>
{% block content %}
{% endblock %}
</main>
<template>
<v-footer v-bind="localAttrs" :padless="padless" fixed>
<v-bottom-navigation height="60" class="red dark">
<v-btn href="{% url 'drug' %}">
<span class="white--text font-weight-bold">お薬メモ</span>
<v-icon large>mdi-pill</v-icon>
</v-btn>
<v-btn href="{% url 'contact' %}">
<span class="white--text font-weight-bold">連絡人登録</span>
<v-icon large>mdi-cellphone-settings</v-icon>
</v-btn>
<v-btn href="{% url 'top' %}">
<span class="white--text font-weight-bold">Hp-q</span>
<v-icon large>mdi-hospital-box-outline</v-icon>
</v-btn>
<v-btn href="{% url 'all_doten' %}">
<span class="white--text font-weight-bold">Negai-10</span>
<v-icon large>mdi-numeric-10-box</v-icon>
</v-btn>
{% if user.is_superuser %}
<v-btn href="{% url 'user_manage' %}">
<span class="white--text">UserM</span>
<v-icon large color="white">mdi-alien-outline</v-icon>
</v-btn>
<v-btn href="{% url 'unsafe' %}">
<span class="white--text">Unsafe</span>
<v-icon large color="white">mdi-box</v-icon>
</v-btn>
<v-btn href="/admin">
<span>admin</span>
<v-icon large>mdi-angular</v-icon>
</v-btn>
{% endif %}
</v-footer>
</template>
</v-app>
{% block extra_js %}
<script src="{% static 'js/vue.js' %}"></script>
<script src="{% static 'js/vuetify.js' %}"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
dialog:false,
icondialog:true,
dialog2:true,
dialog3:false,
dialog7:true,
subdialog:false,
avadialog:false,
loader: false,
pass:"",
url: "",
show:false,
show2:false,
drug:false,
sheet: false,
dokuso:false,
count:0,
showPassword : false,
items: ['1','2','3','4','5','6','7'],
btn:false ,
job:['会社員', '公務員', '医療従事者', '主婦', '学生','ショップ店員','無職','その他'],
rela:['親子','親戚','兄弟・姉妹','友人','知人','行政の人','不動産管理者','その他'],
num_time:['1','2','3','4','5'],
src:"",
email:"",
asa_msg:false,
src2:"",
imgdialog:true,
snackbar: true,
drug:true,
passde:false,
big:false,
snackbar2:false,
seeing:false,
overlay2:false,
required: value => !!value || "必ず入力してください",
img_req: value => !!value || "画像ファイルを選択してください",
job_req: value => !!value || "職業を選択してください",
rela_req: value => !!value || "間柄を選択してください",
num_req: value => !!value || "数字を選択してください",
render_req: value => !!value || "性別を選択してください",
limit_length: value => value.length <= 6 || "6文字以内で入力してください" ,
pass_len: value => value.length >= 10 || "10文字以上で入力してください",
hira_zi: value => {
const pattern = /^[あ-ん゛゜ぁ-ぉゃ-ょー「」、]+/
return pattern.test(value) || 'ひらがなで入力して下さい'},
kanzi_zi: value => {
const pattern = /^[ぁ-んァ-ヶー一-龠]+$/
return pattern.test(value) || '全角漢字で入力して下さい'},
year_len: value =>{
const pattern = /^([0-9]{4,4})$/
return pattern.test(value) || '4桁半角数字'},
month_len: value =>{
const pattern = /^([0-9]{1,1})$/
return pattern.test(value) || '1桁半角数字'},
day_len: value =>{
const pattern = /^([0-9]{1,2})$/
return pattern.test(value) || '2桁以内半角数字'},
tel_num: value => {
const pattern = /^([0-9]{11})$/
return pattern.test(value) || 'ハイフンなし半角数字のみ入力してください'},
zip_num: value => {
const pattern = /^([0-9]{7})$/
return pattern.test(value) || 'ハイフンなし半角数字7桁入力してください'},
pass_v: value => {
const pattern = /^[a-zA-Z0-9]+[a-zA-Z!]+[0-9]/
return pattern.test(value) || '英字と数字を組み合わせてください'},
rules: [
value => !!value || '必ず入力してください',
value => {
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
return pattern.test(value) || 'メールアドレスを正しく入力してください。'
},
],
rules2: [
value => {
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
return pattern.test(value) || 'メールアドレスを正しく入力してください。'
},
],
}
},
methods: {
submit() {
if (this.$refs.user_form.validate()){
}
else{
alert('NONONONP')
this.show = !this.show
event.preventDefault()
}
},
onFocus: function(){
this.show = false
},
onFocus2: function(){
this.show2 = true
this.show = false
},
close:function(){
this.show2 = false
},
onFocus3: function(){
this.show = false
this.passde = true
},
onBlur: function(){
this.show3 = false
},
onBlur2: function(){
this.hawai=""
},
woman(event){
this.src2="/static/img/woman_k.png"
this.show = false
},
man(event){
this.src2="/static/img/man_k.png"
this.show = false
},
payment: function(){
this.show=!this.show
},
goto: function(){
this.drug=false
},
goto2: function(){
this.drug=true
},
drugde: function(){
this.seeing = true
this.asa = true
this.src="/static/img/drug_asa.gif"
// setTimeout(() => {this.asa_msg = true},7000)
// setTimeout(() => {this.src="/static/img/drug_asago.gif"},8500)
},
drughiru: function(){
this.seeing = true
},
drugban: function(){
this.seeing = true
},
subsp: function(){
this.subdialog=true
},
ava:function(){
this.avadialog=true
},
over:function(){
this.big=true
},
onMouseout:function(){
this.big=false
},
loader2:function(){
this.loader=true
},
delyes: function(){
if (this.$refs.user_form.validate()){
this.overlay2= true
}
else{
event.preventDefault()
}
},
getbtn: function(){
this.overlay2=true
},
},
})
</script>
{% endblock %}
</body>
</html>
自分で試したこと
アイコンのcssは使用するアイコンのみ表記しました
補足情報
サーバーVULTR
Django2.2.10
回答 3件
回答するにはログインが必要です
村上さんの問題は
HTML/CSSのデザインに変更したのに、Runserverすると、
結果を反映されなかったか？
以下、確認してください。
①css ,Bootstrap と合わせて、重複の箇所があるか？
②HTMLに 記載されたCSSリンクとCSSファイル名はあってるかどうか？
→２点はよくあっています。
もし、問題がなければ、以下の方法を試してみてください
①Google の Cacheを削除してください。
②CSSリンク先の後に？日付を入れてください。
例
<link href="{% static 'css/vuetify.css' %}?20220225" rel="stylesheet">
1