python
1from flask import Flask, request, render_template 2import requests 3import json 4 5app = Flask(__name__) 6app.secret_key = 'asdkbvusdv' 7API_KEY = 'AIzaSyAsfp44DK_5R3vKtjXH34iFZXilBg6-qdg' 8 9 10@app.route('/') 11def index(): 12 return render_template('index.html') 13 14 15if __name__ == '__main__': 16 app.run(debug=True, host='127.0.0.1')
html
1<html> 2 <head> 3 <link rel="stylesheet" href="../css/style.css"> 4 </head> 5<body> 6 <form action="/search" method="POST"> 7 <div class="container"> 8 <input type="text" placeholder="urlの右にあるやつ入力して"> 9 <div class="search"></div> 10 </div> 11 </form> 12</body> 13</html>
css
1@import url("https://fonts.googleapis.com/css?family=Inconsolata:700"); 2* { 3 margin: 0; 4 padding: 0; 5 -webkit-box-sizing: border-box; 6 box-sizing: border-box; 7} 8 9html, body { 10 width: 100%; 11 height: 100%; 12} 13 14body { 15 background: #252525; 16} 17 18.container { 19 position: absolute; 20 margin: auto; 21 top: 0; 22 left: 0; 23 right: 0; 24 bottom: 0; 25 width: 300px; 26 height: 100px; 27} 28 29.container .search { 30 position: absolute; 31 margin: auto; 32 top: 0; 33 right: 0; 34 bottom: 0; 35 left: 0; 36 width: 80px; 37 height: 80px; 38 background: crimson; 39 border-radius: 50%; 40 -webkit-transition: all 1s; 41 transition: all 1s; 42 z-index: 4; 43 -webkit-box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4); 44 box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4); 45} 46 47.container .search:hover { 48 cursor: pointer; 49} 50 51.container .search::before { 52 content: ""; 53 position: absolute; 54 margin: auto; 55 top: 22px; 56 right: 0; 57 bottom: 0; 58 left: 22px; 59 width: 12px; 60 height: 2px; 61 background: white; 62 -webkit-transform: rotate(45deg); 63 transform: rotate(45deg); 64 -webkit-transition: all .5s; 65 transition: all .5s; 66} 67 68.container .search::after { 69 content: ""; 70 position: absolute; 71 margin: auto; 72 top: -5px; 73 right: 0; 74 bottom: 0; 75 left: -5px; 76 width: 25px; 77 height: 25px; 78 border-radius: 50%; 79 border: 2px solid white; 80 -webkit-transition: all .5s; 81 transition: all .5s; 82} 83 84.container input { 85 font-family: 'Inconsolata', monospace; 86 position: absolute; 87 margin: auto; 88 top: 0; 89 right: 0; 90 bottom: 0; 91 left: 0; 92 width: 50px; 93 height: 50px; 94 outline: none; 95 border: none; 96 background: crimson; 97 color: white; 98 text-shadow: 0 0 10px crimson; 99 padding: 0 80px 0 20px; 100 border-radius: 30px; 101 -webkit-box-shadow: 0 0 25px 0 crimson, 0 20px 25px 0 rgba(0, 0, 0, 0.2); 102 box-shadow: 0 0 25px 0 crimson, 0 20px 25px 0 rgba(0, 0, 0, 0.2); 103 -webkit-transition: all 1s; 104 transition: all 1s; 105 opacity: 0; 106 z-index: 5; 107 font-weight: bolder; 108 letter-spacing: 0.1em; 109} 110 111.container input:hover { 112 cursor: pointer; 113} 114 115.container input:focus { 116 width: 300px; 117 opacity: 1; 118 cursor: text; 119} 120 121.container input:focus ~ .search { 122 right: -250px; 123 background: #151515; 124 z-index: 6; 125} 126 127.container input:focus ~ .search::before { 128 top: 0; 129 left: 0; 130 width: 25px; 131} 132 133.container input:focus ~ .search::after { 134 top: 0; 135 left: 0; 136 width: 25px; 137 height: 2px; 138 border: none; 139 background: white; 140 border-radius: 0%; 141 -webkit-transform: rotate(-45deg); 142 transform: rotate(-45deg); 143} 144 145.container input::-webkit-input-placeholder { 146 color: white; 147 opacity: 0.5; 148 font-weight: bolder; 149} 150 151.container input:-ms-input-placeholder { 152 color: white; 153 opacity: 0.5; 154 font-weight: bolder; 155} 156 157.container input::-ms-input-placeholder { 158 color: white; 159 opacity: 0.5; 160 font-weight: bolder; 161} 162 163.container input::placeholder { 164 color: white; 165 opacity: 0.5; 166 font-weight: bolder; 167} 168/*# sourceMappingURL=style.css.map */
上のようにコードを書いて、htmlだけでブラウザに表示させようとするとcssは反映されるのですが、pythonを使うと表示されないです。
どなたか教えてください。
↑pythonで実行した結果
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。