質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1563閲覧

cssが反映されない

shosinnshadesu

総合スコア93

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/09/20 07:06

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を使うと表示されないです。
どなたか教えてください。
htmlだけ

↑pythonで実行した結果

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Flaskを使う以上、HTMLテンプレートはtemplatesディレクトリ、CSSが静的ファイルならstaticディレクトリ(以下のディレクトリ)に入れることになります。まずは、それができているか確認しましょう。

Flaskで@app.route('/')と指定しているのであれば、HTMLテンプレートから生成されるルート直下のHTMLファイルからstatic以下のCSSファイルにアクセスするわけで、HTMLファイルからスタイルシートを指定するパスは、"/static/style.css"とか"static/style.css"とか、"{{url_for('static', filename = 'style.css')}}"とか書く必要があります。

そうすると、HTMLテンプレートをブラウザーで直接表示するときには、CSSファイルには到達できません。

投稿2020/09/20 08:40

編集2020/09/20 09:04
Daregada

総合スコア11990

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問